在前端领域，我们经常会用到NPM包来简化我们的工作。本文将介绍一个非常有用的NPM包——gobble-6to5。通过使用gobble-6to5，我们可以轻松将ES6代码编译成可用于浏览器的ES5代码，同时还可以使用gobble提供的管道功能来完成其他一些前端构建任务。
什么是gobble-6to5
gobble-6to5是一个基于gobble的插件，用于将ES6代码编译成ES5代码。
gobble是一个用于前端构建的工具，它提供了一种声明式的API，让我们可以使用简单的JavaScript来定义前端构建任务。gobble还提供了管道功能，让我们可以将多个任务组合成一个任务来完成复杂的构建任务。
gobble-6to5就是在gobble的基础上实现的一个插件，它使用6to5将ES6代码编译成ES5代码，并提供了一些配置选项来让我们可以灵活地控制编译过程。
如何使用gobble-6to5
在使用gobble-6to5之前，我们需要安装gobble和gobble-6to5这两个NPM包:
npm install --global gobble npm install --save gobble-6to5
接下来，我们需要创建一个gobblefile.js文件来定义我们的构建任务:
-- -------------------- ---- ------- --- ------ - ------------------ --- --------- - ----------------------- -- ------- --- --- - -------------- -- ------------------- --- --- - ------------------------- ---------------- ---- ---- -- -------------- --- - ------------------- -------------- - ----
在上面的代码中，我们首先使用gobble来定义源代码目录，然后使用gobble-6to5插件将ES6代码编译成ES5代码，并将编译后的代码复制到发布目录中。
gobble提供了很多有用的API，比如watch、serve、制定文件扫描规则、设置文件输出路径等等，这里就不一一介绍了，读者可以参考gobble的官方文档进行学习。
gobble-6to5提供的配置选项
除了可以将ES6代码编译成ES5代码外，gobble-6to5还提供了一些配置选项，让我们可以灵活地控制编译过程。
includePolyfill
includePolyfill选项可以指定是否在编译后的代码中包含6to5提供的polyfills。
默认情况下，gobble-6to5不会在编译后的代码中包含polyfills，因为这可能会导致代码的体积变大。如果我们在编译后的代码中需要使用6to5提供的polyfills，那么就需要设置includePolyfill为true。
var es5 = src.transform(sixToFive({
includePolyfill: true
}));sourceMap
sourceMap选项可以指定是否在编译后的代码中包含source map。
source map是一种用于指示JS压缩前后代码的映射关系的工具，可以帮助我们更容易地调试JS代码。在开发过程中，我们通常会开启source map选项，而在发布时关闭source map选项以达到更好的压缩效果。
var es5 = src.transform(sixToFive({
sourceMap: true
}));结语
以上就是gobble-6to5的使用教程，通过学习本文，你可以掌握如何使用gobble-6to5将ES6代码编译成ES5代码，并了解gobble-6to5提供的配置选项。
如果你还没有使用gobble，那么我强烈建议你尝试一下。gobble简单易用，非常适合前端构建任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e6e255dee6beeee73e1