通过 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 问题是,我不知道如何按照那里的设置进行操作。 :// @jsonGPPD vuex-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命令

无法从 Vue.js 中的单个文件组件导入 Mixin

Vue.js - 通过 Webpack 注册图表组件

无法使用 webpack 4 和 babel 7 导入 soap-npm 模块