通过 Webpack 和 Vue.JS 导入和使用 3rd 方包
Posted
技术标签:
【中文标题】通过 Webpack 和 Vue.JS 导入和使用 3rd 方包【英文标题】:Import and use 3rd Party Package with Webpack and Vue.JS 【发布时间】:2018-05-27 16:14:46 【问题描述】:早安,
我目前是 webpack 中集成 vue.js 的新手。
基本上,我正在尝试使用我已经安装在我的 node_modules 中的第 3 方包。
在这个例子中,我安装了一个名为“Vuex Toast”的包(vue.js 的警告)。 NPM Package here
这是我的项目结构。
.../js/main.build.js
.../src-modules/app.js (blank for now)
通常,每次我运行 webpack 命令时,我都会生成我的 main.build.js
有人可以帮我在这里如何使用那个 3rd 方包吗?
【问题讨论】:
您应该将该模块导入/要求到您的 app.js 中,以允许 webpack 构建您的依赖关系树。 您能否提供基于此链接的示例。 npmjs.com/package/vuex-toast?基本上,我只想显示这个包提供的基本警报。如果我知道如何合并其他包,下次我可以使用其他包。 我没有使用过该模块,但是我认为您将它与webpack
应该做的事情混淆了。值得先熟悉一下 webpack 以深入了解如何使用它。
但我真正关心的是,只需合并它并能够使用该软件包。因为在安装中,老实说,我不知道该怎么做才能在我的项目中使用这个包。
其他包也一样。我无法使用它们,因为即使我已经将它们安装在我的 node_modules 中,我也不知道如何使用它们
【参考方案1】:
webpack(以及一般的打包工具)的理念是你 require
代码和 webpack 为你打包它。
在您的app.js
中执行以下操作:
const vuexToast = require('vuex-toast');
现在你可以使用它了。 Webpack 会知道检查您的 node_modules/vuex-toast
文件夹。
【讨论】:
这是我需要做的唯一设置以显示该包中的警报吗? 当然不是;这就是您访问包代码的方式。要真正做一些有用的事情,请遵循包的文档:github.com/ktsn/vuex-toast#example 问题是,我不知道如何按照那里的设置进行操作。 :// @jsonGPPDvuex-toast
文档中是否有特定的地方令人困惑?也许我们可以帮助澄清。
@Sidney 是的,因为我没有尝试在 vue.js 中添加 3rd 方包。我真的需要帮助来使用 webpack 将它实施到我的项目中。调用vuexToast是第一步,现在不知道下一步怎么实现包。以上是关于通过 Webpack 和 Vue.JS 导入和使用 3rd 方包的主要内容,如果未能解决你的问题,请参考以下文章
Vue JS 路由器组件 - 在路由之间导航后无法重用使用 webpack 导入的 JS 文件
json 配合Vue.js配置Webpack -27。通过npm脚本简化的webpack和webpack-dev-server命令
json 配合Vue.js配置Webpack - 26.通过npm脚本来执行webpack和webpack-dev-server命令