随着前端技术的不断发展，打包工具成为了前端开发中必不可少的一部分。Webpack 作为最流行的打包工具之一，有着丰富的插件和 loader 可以使用。而本篇文章要介绍的是其中一个高效的 loader，那就是 buble-loader。
什么是 buble-loader？
buble-loader 是一个使用 Bublé 编译器作为 JavaScript 解析器的 Webpack loader。Bublé 是一个极其快速、易于使用的 ES2015 转译器，它可以将 ES2015+ 的代码转换为 ES5 的语法，并且它的体积只有 70kb 左右。在性能方面，Bublé 编译器快于 Babel 编译器，这也是 buble-loader 成为许多项目的首选解决方案之一的原因。
如何使用 buble-loader？
1、首先安装 buble-loader
可以在终端中使用以下命令：
npm install buble-loader --save-dev
2、在 Webpack 的配置文件中添加规则
在 Webpack 的配置文件中找到对应的 module.rules，添加以下配置：
-- -------------------- ---- ------- -------------- - - -- ----- ------------- ------- - ------ - - ----- ------------ -------- ---------------------------------- ---- - ------- --------------- -------- - ------------- --------------- - - - - - -展开代码
规则配置解释：
- test：文件匹配的正则表达式。
- exclude：排除不需要编译的文件夹，提高编译速度。
- use.loader：使用的 loader 名称。
- use.options.objectAssign：控制语法转换，在这里设置的值将会被转换为 Object.assign() 函数。
3、重新运行 Webpack
运行 Webpack 可以看到 buble-loader 正确的编译了符合条件的的 JS 文件。
buble-loader 的优点
与 Babel 不同，Bublé 不支持模块语法，因此 Bublé 必须依赖其他工具来帮助将模块化的代码转换为浏览器可以理解的代码，并且 Bublé 的体积非常小，这意味着应用程序的加载时间和流量将受到显著的改善。除了体积和速度外，Bublé 还拥有以下优点：
简单易用：Bublé 容易使用，需要几乎没有配置，适合于初学者。
ES2015+ 全面支持：Bublé 完全支持 ES2015/ES6 和更新的 JavaScript 语法，包括全部关键字、对象方法和函数语法。
不需要 Polyfill：Bublé 可以在不使用 polyfill 的情况下实现较新版本 JavaScript 的语法。
编译速度更快：Bublé 的编译速度是 Babel 的 15 倍。
总结
通过本文的介绍，你已经了解了如何使用 buble-loader，以及 buble-loader 的优点。buble-loader 可以快速地将 ES2015+ 的代码转换为 ES5 的语法，使得我们编写的代码能够运行在旧版浏览器上，同时又能保证编译速度和体积的优化。在实际开发中，如果我们需要对大量的 JavaScript 代码进行编译，可以尝试使用 buble-loader 提高编译速度和代码运行性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64097
