Broccoli-buble 是一个将 es6 代码编译成 es5 的 npm 包。本文将介绍如何使用 broccoli-buble 包进行打包编译，并提供实际示例代码。
安装 broccolli-buble
在安装 Broccoli-buble 之前需要先创建一个项目并切换到该项目目录下，然后可以直接运行以下命令来安装 broccoli-buble :
npm install -g broccoli-cli broccoli-babel broccoli-buble broccoli-merge-trees
安装完成后，你应该可以在命令行中运行 broccoil -v 来检查安装是否成功。
使用 broccoli-buble
在使用 broccoli-buble 时，我们需要将源代码打包编译到目标输出目录下。首先需要在项目目录中建立一个名为 Broccolifile.js 的文件，内容如下：
-- -------------------- ---- ------- ----- --------------- - ------------------------------------- ----- ----- - -------------------------- ----- ---------- - -------------------------------- ----- ------ - --------------------------- ----- ------- - ------ ----- ------ - --- --------------- - -------- ------------ -------- ----------------- -------- ---- --- ----- -------- - --- ----------------------- - ---------- -------- --- ----- -------- - --- ---------------- -------------- - --- -----------------------
我们先分别创建了三个 Broccoli 插件：
new Funnel()用来实现从源代码目录src中筛选出.js文件到目标目录js；new BabelTranspiler()插件用来将 ES6 代码转译为 ES5 代码；new Buble()插件用来将转译后的 ES5 代码转换成 UMD 格式的模块。
最后我们使用 new MergeTrees() 插件将 appBuble 合并到单个内容树中，最终生成的输出文件可以通过本地服务器直接访问。
示例代码
下面是 src 目录下的例子代码:
const demo = () => {console.log('Hello World!')};
demo(); 要编译上面的例子代码，只需要执行以下命令：
broccoli build dist
其中 dist 是打包编译后的输出目录，执行完命令后，你的代码就已经编译好了。
总结
本文中，我们学习了如何使用 Broccoli-buble 进行打包编译，并提供了一份实际示例代码。希望这篇文章能够帮助你更好地使用 broccoli-buble npm 包并提高你的前端开发技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8accdc64669dde5289