前言
在开发前端项目时，我们往往需要使用诸如 webpack 或者 Broccoli 这样的构建工具。这些工具能够将我们的源代码进行打包、压缩等操作，最终生成可用的生产环境代码。
在使用 Broccoli 进行项目构建时，我们遇到了一个常见的问题：如何输出构建结果。此时，npm 包 Broccoli-Output-Wrapper 就能够派上用场了。
Broccoli-Output-Wrapper 简介
Broccoli-Output-Wrapper 是一个作为 Broccoli 插件的 npm 包，其主要作用是将构建结果输出到指定的目录中。下面我们将详细介绍如何使用该 npm 包。
安装
在项目根目录下执行以下命令进行安装：
npm install --save-dev broccoli-output-wrapper
配置
在项目的 Brocfile.js 文件中使用 Broccoli-Output-Wrapper 插件：
const BroccoliOutputWrapper = require('broccoli-output-wrapper');
const outputFunnel = new BroccoliOutputWrapper(node, {
outputPath: './dist'
});其中，node 是 Broccoli 插件返回的 node 对象，outputPath 是构建结果输出的目录。
使用
在执行构建命令时，将 outputFunnel 传入即可：
broccoli build outputFunnel
上述命令执行成功后，构建结果将会输出到指定目录下。
示例代码
下面是一个完整的示例代码，我们以构建一个简单的 web 应用为例：
项目结构
project/
├── Brocfile.js
├── package.json
├── public/
│ └── index.html
└── src/
├── index.js
└── styles.cssindex.html
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------- --------------
----- ---------------- ----------------- --
-------
------
---- ---------------
------- ------------------------
-------
-------index.js
const app = document.getElementById('app');
app.innerHTML = '<h1>Hello, world!</h1>';styles.css
-- -------------------- ---- ------- ---- - ----------------- ----- ------- -- -------- -- - -- - ------ ----- ---------- ---- ----------- ------- -
Brocfile.js
-- -------------------- ---- ------- ----- --------------------- - ----------------------------------- ----- ------ - --------------------------- ----- ---------- - -------------------------------- ----- --- - ------ ----- ------ - --------- ----- ------- - --- ---------------- - ------ ------------- -------- --- --- ----- ------ - --- ---------------- - ------ --------------- -------- --- --- ----- ---- - --- ------------------- - ------ --------------- -------- --- --- --- --- - --- -------------------- ------- ------- ----- ------------ - --- -------------------------- - ----------- ------ --- -------------- - -------------
执行 broccoli build 构建命令，构建结果将会输出到项目根目录下的 dist/ 目录下。
结语
在本文中，我们详细介绍了 npm 包 Broccoli-Output-Wrapper 的使用方法，并通过一个具体的示例展示了该 npm 包的作用。希望本文能够对你的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc2ecb5cbfe1ea06120eb