在前端开发中，使用第三方包是必不可少的。而对于一些大型项目，为了减少打包后的文件大小，我们需要将一些公共模块提取出来，使用它们的时候再引入，以减少代码冗余。而这时候就需要使用 broccoli-vendor 这个包来帮助我们进行公共模块的提取。
安装
在使用 broccoli-vendor 之前，我们需要先将它安装在我们的项目中。
--- ------- --------------- ----------
使用
broccoli-vendor 提供了一个 Vendor 类，我们需要在 Brocfile.js 中使用它来创建一个实例。
--- ------ - --------------------------- --- ------ - --- ----------------- - ----------- ----------------------- ----------------- ----- ---
jsTreeDir：表示我们要提取的公共模块所在的目录。outputFile：表示生成的文件的路径及文件名。preserveSymlinks：表示是否需要保留软链接。
示例
接下来，让我们通过一个简单示例来演示如何使用 broccoli-vendor。
我们假设现在有一个包含了许多公共模块的文件夹 public/lib，其中包含了三个库：jquery、lodash 和 react。
现在，我们需要将这些库提取出来，生成一个名为 vendor.js 的文件，并将它放到我们的项目中使用。
首先，我们需要在 Brocfile.js 中引入 broccoli-vendor。
--- ------ - ---------------------------
然后，我们需要创建一个 Vendor 实例。
--- ---------- - --- -------------------- - ----------- ---------------------- ---
最后，我们将 vendorTree 作为参数传入到 mergeTrees 中，最终生成一个包含了我们自己的代码和公共模块的文件夹，并将它编译成我们需要的格式。
--- ------- - --- --- ---------- - --- -------------- - -------------------- ------------ - -- ---------- ------- ---
现在我们就可以在我们的项目中直接引入 vendor.js 文件，使用里面的库了。
--------- -----
------
------
----- ----------------
------------- ------------
-------
------
---- ----------------
------- ------------------------------------
--------
-------------------- -- ------ -------
--------------- -- ------ -------
------------------- -- ----- -------
---------
-------
-------总结
本文介绍了如何使用 broccoli-vendor 这个包来提取我们项目中的公共库，并生成一个单独的文件，以减少代码冗余。同时，本文也提供了一个简单示例，来演示如何使用 broccoli-vendor。希望本文能够对前端开发人员带来实际的帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c89ccdc64669dde5196