简介
当我们在前端项目中使用第三方库时，通常会将这些库直接引入到项目中，然后进行打包和发布。但是，在一些情况下，我们可能需要将这些第三方库作为一个单独的包来管理，并且可以通过 npm 来管理依赖关系。npm 包 vendors 就是用于实现这个功能的工具。
安装
我们可以通过以下命令来安装 npm 包 vendors：
npm install --save-dev npm-package-vendor
使用
在项目中使用 npm 包 vendors 的主要流程如下：
- 在 package.json 中添加 vendors 字段。
- 执行 npm run vendor 命令生成 vendors 包。
- 在 HTML 文件中引入 vendors 包。
添加 vendors 字段
在 package.json 中添加 vendors 字段，该字段的值应该是一个数组，包含了需要打包的第三方库的名称。
例如，我们想要打包 lodash 和 moment.js 两个库，那么我们需要在 package.json 文件中添加以下内容：
-- -------------------- ---- -------
-
------- -------------
---------- --------
-- ---
---------- -
---------
--------
-
-执行 npm run vendor 命令
执行以下命令来生成 vendors 包：
npm run vendor
执行完毕后，我们可以在项目根目录下看到一个新的 dist/vendors.js 文件。
引入 vendors 包
在 HTML 文件中引入 vendors 包即可使用打包好的第三方库了。例如：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- -----------
-------
------
------- ---------------------------------
------- ------------------------
-------
-------示例代码
以下是一个简单的示例，演示了如何在项目中使用 npm 包 vendors。
package.json
-- -------------------- ---- -------
-
------- -------------
---------- --------
-------------- ---
------- -----------
---------- -
--------- --------------------
--
------------------ -
--------------------- --------
--
---------- -
---------
--------
-
-app.js
// 使用 lodash 和 moment.js
console.log(_.chunk([1, 2, 3, 4], 2));
console.log(moment().format('MMMM Do YYYY, h:mm:ss a'));index.html
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- -----------
-------
------
------- ---------------------------------
------- ------------------------
-------
-------结论
通过使用 npm 包 vendors，我们可以更好地管理前端项目中的第三方库，并且可以更加方便地进行打包和发布。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/46707