通过 Webpack 和 Vue.JS 导入和使用 3rd 方包

Posted 2023-02-23

【中文标题】通过 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是第一步，现在不知道下一步怎么实现包。