前言
Broccoli-clext 是一个非常实用的 npm 包，它是 Broccoli 框架的插件，可用于对前端代码进行构建优化。
在前端开发领域，构建工作是必不可少的一环，优化构建工作能够减小代码体积，提升网站性能，Broccoli-clext 很好地解决了这个问题。
下面我们来详细了解一下如何使用 broccoli-clext 的功能。
安装 broccoli-clext
在使用之前，我们需要先安装 broccoli-clext 包。在命令行中输入以下命令即可安装：
npm install broccoli-clext --save-dev
安装完成后，为了方便使用，推荐将 broccoli-clext 引入到项目的构建脚本中。
使用 broccoli-clext
在介绍使用方法之前，我们先来了解一下 Broccoli。
Broccoli 是一款比较流行的前端构建工具，类似于 Gulp 和 Grunt，在构建时可以生成一个静态文件，以让前端代码更加高效。
在使用 Broccoli 进行构建时，需要一个 Brocfile.js 文件，里面存放着配置代码，这个文件就是导入包并进行配置的地方。
Broccoli-clext 的使用也是通过在 Brocfile.js 文件中进行配置，我们可以在配置文件中优化代码并进行构建。
下面是一个示例，我们将对 js 文件进行压缩和转义。
首先，我们需要在 Brocfile.js 文件中导入 broccoli-clext 包，然后进行配置。
var Clext = require('broccoli-clext');
var sourceTree = 'js/src';
var compiledTree = new Clext(sourceTree,{
'gulp-plugin-uglify': {},
'gulp-plugin-babel',{}
});在这个示例中，我们定义了一个 sourceTree 的路径对象，它指向我们的 js 文件源文件夹目录。然后调用了 broccoli-clext 构造函数，此时已经初始化了一个 Broccoli 插件，放入 compiledTree 中并利用。 构造函数的两个参数是：
- sourceTree：代表源文件夹的路径对象。
- pluginName、 options : 是将要使用的 Gulp 插件配置信息。
以上面的示例为例，我们同时使用了 gulp-plugin-uglify 和 gulp-plugin-babel。这两个插件分别实现了 JS 压缩和 JS 转义的功能。这些插件都可以从 NPM 包管理器上获取，我们只需要在配置文件中进行引入并进行配置即可。
源文件夹文件结构
在 Broccoli 构建时，区别于正常 Node.js 构建，它的输出不指向磁盘目录，而是指向内存空间里的预定义目录。而源文件夹中的目录结构，在 Broccoli 中也是有特殊意义的，它代表了输出目录的层级。
在以上 broccoli-clext 的例子中，源文件夹的路径为 'js/src'，那么 BROCCOLI 输出的目录结构样式必须如下：
/js/ --- /compiled/
在这个示例中， Broccoli 会在编译时创建目录 /js/compiled/ 并将编译后的文件输出到这个目录里。
结束语
Broccoli-clext 是一个相对来说比较成熟的前端构建工具，它项对于我们优化构建工作具有非常实用的功能。
通过学习本文，您应该已经掌握了如何使用 broccoli-clext 进行优化构建工作。当然，只有理论性知识肯定是不够的，需要我们在实践中总结和完善，不断地提升我们的技能。
我们希望通过这篇文章能够给您带来一定的学习和指导意义。如果您有其他疑问，欢迎留言讨论。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8bccdc64669dde52a2