前言
在开发前端项目时，我们往往需要使用诸如 webpack 或者 Broccoli 这样的构建工具。这些工具能够将我们的源代码进行打包、压缩等操作，最终生成可用的生产环境代码。
在使用 Broccoli 进行项目构建时，我们遇到了一个常见的问题：如何输出构建结果。此时，npm 包 Broccoli-Output-Wrapper 就能够派上用场了。
Broccoli-Output-Wrapper 简介
Broccoli-Output-Wrapper 是一个作为 Broccoli 插件的 npm 包，其主要作用是将构建结果输出到指定的目录中。下面我们将详细介绍如何使用该 npm 包。
安装
在项目根目录下执行以下命令进行安装：
--- ------- ---------- -----------------------
配置
在项目的 Brocfile.js 文件中使用 Broccoli-Output-Wrapper 插件：
----- --------------------- - ----------------------------------- ----- ------------ - --- --------------------------- - ----------- -------- ---
其中，node 是 Broccoli 插件返回的 node 对象，outputPath 是构建结果输出的目录。
使用
在执行构建命令时，将 outputFunnel 传入即可：
-------- ----- ------------
上述命令执行成功后，构建结果将会输出到指定目录下。
示例代码
下面是一个完整的示例代码，我们以构建一个简单的 web 应用为例：
项目结构
--------
--- -----------
--- ------------
--- -------
- --- ----------
--- ----
--- --------
--- ----------index.html
--------- -----
------
------
----- --------------- --
------------- --------------
----- ---------------- ----------------- --
-------
------
---- ---------------
------- ------------------------
-------
-------index.js
----- --- - ------------------------------- ------------- - ----------- -------------
styles.css
---- - ----------------- ----- ------- -- -------- -- - -- - ------ ----- ---------- ---- ----------- ------- -
Brocfile.js
----- --------------------- - ----------------------------------- ----- ------ - --------------------------- ----- ---------- - -------------------------------- ----- --- - ------ ----- ------ - --------- ----- ------- - --- ---------------- - ------ ------------- -------- --- --- ----- ------ - --- ---------------- - ------ --------------- -------- --- --- ----- ---- - --- ------------------- - ------ --------------- -------- --- --- --- --- - --- -------------------- ------- ------- ----- ------------ - --- -------------------------- - ----------- ------ --- -------------- - -------------
执行 broccoli build 构建命令，构建结果将会输出到项目根目录下的 dist/ 目录下。
结语
在本文中，我们详细介绍了 npm 包 Broccoli-Output-Wrapper 的使用方法，并通过一个具体的示例展示了该 npm 包的作用。希望本文能够对你的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedc2ecb5cbfe1ea06120eb