npm 包 gobble-es6-transpiler 使用教程

简介

gobble-es6-transpiler 是一个 npm 包，其作用是将 ES6+ 的 JavaScript 代码编译成 ES5 代码。它使用 Babel 进行编译，而 gobble 则是用来打包和处理文件的工具。

在本篇教程中，我们将介绍如何使用 gobble-es6-transpiler，以及如何在前端开发中使用它提高开发效率。

安装和使用

1. 安装 gobble 和 gobble-es6-transpiler：

npm install --save-dev gobble gobble-es6-transpiler

1. 在你的 gobblefile.js 中，添加编译 ES6 的任务：

const gobble = require('gobble');
const es6 = require('gobble-es6-transpiler'); // 引入 gobble-es6-transpiler

module.exports = gobble('src')
  .transform(es6()) // 使用 gobble-es6-transpiler
  .moveTo('dist');

1. 运行 gobble 命令进行打包：

gobble

1. 编译后的文件将会在 dist 目录下。

示例代码

假设我们有一个 ES6 的脚本文件，代码如下：

// src/index.js
const hello = name => `Hello ${name}!`;
console.log(hello('World'));

使用 gobble-es6-transpiler 进行编译后，代码将会被转换成 ES5 代码，如下：

// dist/index.js
'use strict';

var hello = function hello(name) {
  return 'Hello ' + name + '!';
};
console.log(hello('World'));

我们可以使用 browserslist 配置，来让 babel 处理库中的代码，并将其编译成 React Native 支持的 JavaScript。

// .browserslistrc
last 2 Chrome versions
last 2 Firefox versions
last 2 Edge versions
last 2 Safari versions
React Native

-- -------------------- ---- -------
-- -------------
----- ------ - ------------------
----- --- - ---------------------------------
----- ----- - ----------------------
----- ---- - ----------------

----- -------- - -------------------- -------
----- --------- - -------------------- --------

-------------- - ----------------
  -----------
    -----
      ------- - --------- ---- ----- -- ---- --
    -- -
        ---------- ------
        ----------- ---------
        -------- -
          -
            -------------
            -
              -------- -
                --------- ------ - ---------- --- -- ---- -------- -- ---- ------- -- ---- ------- -- ---- ---- -- ---- -------- -- ------
              --
            --
          --
        --
      -- -
        ------ ------
        ----------- -------------------- ------------
      --
  -
  -------------------

总结

使用 npm 包 gobble-es6-transpiler 可以方便地将 ES6+ 的 JavaScript 代码编译成 ES5 代码，提高前端开发效率。在应用 gobble-es6-transpiler 时需要注意的是，需结合 gobble 和 babel-core 使用。同时，对于生产环境的使用，需要配置 browserslist 进行编译优化。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e6e255dee6beeee7403