ES6 转译 | CSS-Tricks

虽然对 ES6 的支持不断增强，但我们不能总是假设用户使用的浏览器都支持其所有功能。因此，为了现在就利用 ES6 功能并确保我们不会遇到跨浏览器兼容性问题，我们需要转译我们的代码。

让我们看看执行代码转译任务的两种可能方法。首先，我们将使用 npm 脚本和 Babel。其次，我们将看看如何使用 Gulp 和 Babel。

Babel

Babel 是 ES6 的首选转译器。它最初称为 6to5，但后来更名为 Babel，因为很明显这个名称在未来无法使用。随着 Babel 6 的发布，重点更多地转向使 Babel 可插拔。它创建了一个系统，允许您创建插件来转换您的代码！Babel 6 版的默认操作不再是将 ES6 转换为 ES5，因此您现在必须包含各种预设。

Babel 中的预设允许您选择所需的转换，或者您可以选择 babel-preset-es2015 预设并使用所有功能。

Babel CLI

为了使用我们将要介绍的三种方法，务必确保已安装 Node.js。最简单的方法是访问 Node.js 网站并下载适合您操作系统的最新版本。

如果一切按计划进行，您应该可以在终端中使用 node。要确认 Node.js 是否已安装在您的系统上，请打开终端并在提示符中键入 node -v。

$ node -v
v5.2.0

如果您得到的响应类似于上面显示的内容，那么您就可以开始了！如果您对命令行不太熟悉，我建议您查看 Wes Bos 的 commandlinepoweruser.com。这是一个很棒的免费视频系列，可以帮助您快速上手常用命令。

一旦我们启动并运行了 Node，我们就需要安装 Babel CLI。为此，我们将使用 npm。要测试这一点，请创建一个项目文件夹并在终端中导航到该文件夹。要开始，我们需要创建一个 package.json 文件。要使用 npm 启动它，我们可以运行

npm init

这将引导您完成几个问题：您的项目名称、版本、描述等。当它询问您有关“入口点”的信息时，您可以暂时将其保留为 index.js。通常，这将是您项目的主要文件。如果您提前知道该文件将命名为何，请立即添加它。

完成这些步骤后，将创建一个新的 package.json 文件。现在，是时候安装我们需要的 babel 包了。

npm install --save-dev babel-cli

运行此行后，您将在项目目录中看到一些新的更改。首先，您会注意到现在有一个 node_modules 文件夹，其次，您的 package.json 文件中有一个新条目。上面代码的关键部分之一是 --save-dev 标志。此标志将在 devDependencies 部分的 package.json 文件中保存模块 babel-cli。

"devDependencies": {
  "babel-cli": "^6.6.5"
},

文件中的此部分用于开发中使用的模块，这意味着它们在生产中不需要。如果我们使用 --save 而不是 --save-dev 运行安装，它会将模块放在 dependencies 部分。

但是，所有这些部分的意义何在？如果您不熟悉 npm 和 package.json 文件，它是一个文件，您可以将其从一个项目复制到另一个项目，然后运行 npm install，devDependencies 或 dependencies 中列出的任何内容都将为此项目安装。如果您只想安装依赖项，可以运行

npm install --production

在开发应用程序时，您将希望专门在开发中使用某些模块，并在生产中专门使用某些模块。使用 --save 和 --save-dev，您可以将这些模块放入正确的存储桶中。

Babel 预设

如前所述，Babel 不会默认立即转译 ES6。我们还必须包含 babel-preset-es2015 模块。

npm install --save-dev babel-preset-es2015

此模块确保我们能够转译代码。

文件夹结构

在我们走得太远之前，让我们谈谈文件夹结构。如果您要继续学习，我已将文件夹结构设置如下

- project
    - src
      - app.js
    - public
    - package.json

在根 project 文件夹中，我有一个 src 文件夹和一个 public 文件夹。src 文件夹用于保存我的预转译代码。这将是用漂亮的 ES6 语法编写的代码，而 public 文件夹将是转译代码的目标。public 文件夹还将保存应用程序所需的 CSS、HTML 和图像。

NPM 脚本

我们将要介绍的第一种转译方法是使用 NPM 运行 Babel。在 package.json 文件中，有一个名为 scripts 的部分，我们可以在其中定义想要运行的命令。使用 Babel CLI，我们可以设置一个脚本编译我们的代码并将其输出到我们想要的位置。scripts 部分采用 JSON 对象作为值。此对象中的键将是我们脚本的名称，而值将是要运行的命令。

"scripts": {
  "js" : "babel src/app.js --out-file public/app.js"
}

将上述内容添加到 scripts 部分的 package.json 中，将从 src/app.js 中获取我们的代码，通过 Babel 运行它，并将文件输出到 public/app.js 中。Babel 命令有很多选项，我们稍后会介绍，但 --out-file 标志用于确定编译源的目标。

继续在 src/app.js 文件中添加一些 ES6 代码。如果您不知道要添加什么，请尝试以下操作

const person = {
  name: 'Ryan Christiani'
};

const testString = `My name is ${person.name}`;

如果您在终端中键入 npm run js，您应该会看到类似以下内容的输出

> [email protected] js /Users/yourusername/path/to/project
> babel ./src/app.js --out-file ./public/app.js

现在，是见证奇迹的时刻：让我们看看 public/app.js 文件。请注意，如果您之前没有创建，Babel 将为您创建它。

const person = {
  name: 'Ryan Christiani'
};

const testString = `My name is ${person.name}`;

嗯……这看起来完全一样。这是因为我们尚未使用 es2015 预设！

babelrc

为了告诉 Babel 我们想要使用已下载的预设，我们需要创建一个配置文件。此文件称为 .babelrc。如果您以前从未使用过点文件，您可能会觉得有点奇怪！点文件旨在成为隐藏文件，通常用于存储配置信息，或者只是隐藏某些内容。默认情况下，您无法在计算机上看到点文件，但是快速搜索 Google 将向您展示如何在查找器中启用它们。由于我们使用的是终端，因此我们可以使用 ls -a 命令显示任何以 . 开头的文件或文件夹。

如果您在编辑器中打开项目文件夹，Sublime Text（我整本书中使用的编辑器）或 Atom 将向您显示这些文件。

为了配置 Babel 以使用我们的预设，我们需要将此代码添加到 .babelrc 文件中。

{ 
  "presets": ["es2015"] 
}

Babel 配置文件采用一个 JSON 对象，其中包含一个 presets 键，该键包含一个包含您想要使用的预设的数组。您可以使用许多预设，请查看 Babel 文档以获取更多信息。现在，如果您运行 npm run js，它将正确地转译我们的代码，并将输出更改为如下所示

'use strict';

var person = {
  name: 'Ryan Christiani'
};

var testString = 'My name is ' + person.name;

这很好，但是让我们使我们的脚本更强大一些。现在，当我们运行脚本时，它将输出文件并停止。如果您想继续处理文件，我们需要一遍又一遍地运行它。我们可以配置脚本以监视文件并在文件更改时运行！

"scripts": {
  "js": "babel ./src/app.js --watch --out-file ./public/app.js"
}

通过添加 --watch 标志，我们告诉 Babel 侦听 src/app.js 文件中的任何更改，并在进行更改时，我们希望将该代码的转译版本输出到 public/app.js 中。您可以使用 npm 脚本和 Babel CLI 执行更多操作，但是让我们看看如何使用 Gulp 和 Babel 来转译我们的代码！

Gulp

Gulp 是一款流行的任务运行器，可以帮助你自动化工作流程。市面上有很多不同的任务运行器，包括 Grunt、Broccoli 和 Brunch。在这本书中，我们将了解如何配置 Gulp 来自动化使用 Babel，并在书的后面，我们将使用它来处理模块。所以让我们开始吧！

Gulp 入门

为了开始使用 Gulp，我们需要在我们的系统上全局安装它。Gulp 是另一个 npm 模块，因此我们像这样安装它：npm install --global gulp-cli。在使用 gulp 时，我们只需要全局安装一次，并且在每个新项目中也需要在本地安装。我们可以通过运行以下命令来实现：npm install --save-dev gulp。

gulpfile.js

要配置 gulp，我们首先需要创建一个名为 `gulpfile.js` 的新文件。这将用于定义我们的任务。如果你以前从未在 Node 中工作过，你可能不熟悉 require 函数。这是一个函数，它将从 `node_modules` 文件夹或你自己的模块中引入任何模块。由于我们运行了 npm install --save-dev gulp，它将其放在了我们的 `node_modules` 文件夹中。在 `gulpfile.js` 中，我们可以通过 require 来访问 gulp。

const gulp = require('gulp');

这会将 Gulp 存储在一个名为 gulp 的新变量中。你会注意到我在这里使用了 const！这个 `gulpfile.js` 将是我们第一个使用 ES6 的 JavaScript 文件。我不会详细介绍我们在这里使用的 ES6 功能，这就是本书的目的！我们将在本书后面更深入地讨论这些特性。

Gulp 都是关于任务的。我们将从在这个文件中定义一些简单的任务开始。

const gulp = require('gulp');

gulp.task('js', () => {

});

gulp.task('default', () => {

});

上面的 () => 是 ES6 箭头函数的语法。如果你不熟悉它，不要担心，我们稍后会讨论它。

我们创建的这两个任务将一起工作，如果我们愿意，也可以单独工作。第一个任务是我们称之为 js 的任务（请注意，除了 default 之外，你可以将任务命名为你想要的任何名称）。js 任务将处理获取我们的 JS 并通过 Babel 运行它。为了运行此任务，我们可以在终端中运行 gulp js。当然，我们必须首先定义任务。

第二个任务称为 default。这是一个特殊的任务：在这里，我们可以设置一些代码，这些代码将启动许多其他任务，或者在我们的例子中，为某些文件发生变化时创建一个监听器。要运行此任务，我们只需在终端中键入 gulp 即可。Gulp 知道如果它只看到 gulp，它将运行 default 任务。

js 任务

在开始之前，我们必须安装一个模块，该模块将允许 babel 与 Gulp 一起工作。奇怪的是，这个模块称为 gulp-babel。在你的终端中键入 npm install --save-dev gulp-babel 以开始下载 gulp-babel 包。

在我们的 gulp 文件中，让我们添加这些行

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('js', () => {
    return gulp.src('./src/app.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('./public'));
});

gulp.task('default', () => {

});

我们首先要做的是 require gulp-babel，然后在我们的 js 任务中，我们返回 gulp.src('./src/app.js')。我们返回它以让 gulp 知道这将是一个异步事件。.src 方法允许我们设置文件的路径，在本例中，它是一个文件。当我们进入本书的模块部分时，我们将对其进行修改，使其更加健壮。Gulp 使用流，这意味着我们可以继续将数据沿管道向下移动，因此使用 .pipe 方法，我们将源文件发送到 babel 中。

就像之前一样，我们需要指定我们想要使用的预设。为此，我们可以将一个对象传递给 babel 函数，以告诉 babel 插件我们想要使用哪个预设。我们的源代码被转换为浏览器可识别的代码，并再次传递，因此我们可以将其通过管道传输到 gulp.dest 中，它设置最终的目标位置。

现在我们的任务已完成，在终端中运行 gulp js 应该会产生此输出！

[19:50:35] Using gulpfile ~/Sites/lets-learn/book/testfiles/gulpfile.js
[19:50:35] Starting 'js'...
[19:50:35] Finished 'js' after 102 ms

如果你没有任何错误，那么一切应该都很好。Gulp 将运行，从 `src` 文件夹中获取你的 `app.js`，对其进行转换，并将其保存到 `public` 文件夹中。

你可能已经注意到这仅运行了一次。如果我们更改了一些代码，我们必须再次运行它。让我们设置 gulp 持续监视我们的文件的功能。

gulp.task('default', ['js'],() => {
    gulp.watch('src/app.js',['js']);
});

修改 default 任务，我们添加一个额外的参数，一个数组，用于我们在第一次使用任务时想要触发的任务。gulp.watch 方法接受几个参数：一个等待文件更改的文件路径，以及一个你想要运行的任务数组。现在我们可以只运行 gulp 了。

$ gulp
[21:26:50] Using gulpfile ~/Sites/lets-learn/book/testfiles/gulpfile.js
[21:26:50] Starting 'js'...
[21:26:50] Finished 'js' after 102 ms
[21:26:50] Starting 'default'...
[21:26:50] Finished 'default' after 6.73 ms

更改你的 `src/app.js` 文件将再次运行 js 任务！希望这可以帮助你快速上手，以便你今天就可以开始使用 ES6，即使你必须支持的浏览器不支持你想要的特性。

Ryan Christiani 是多伦多 HackerYou 的首席讲师和开发主管，也是 Let’s Learn ES6 的作者，这本书包含了你需要了解的关于 JavaScript 最新语法的全部内容。

Agop

# 2016 年 9 月 13 日

在我看来，本文缺少一个至关重要的步骤：使用模块加载器（例如使用 require()）。没有模块加载器，ES2015+ 就不会很有趣。我建议引入 Webpack 并让它执行 Babel 编译，而不是 Gulp。这是一个匹配本文设置的即用型设置调整

webpack.config.js:

const webpack = require('webpack');

module.exports = {
    entry: {
        app: 'src/app.js',
        // Feel free to add more entry points here.

        // These modules will be compiled into vendor.js.
        vendor: [
            'moment' // Just as an example.
        ]
    },

    output: {
        path: './public',
        filename: '[name].js'
    },

    resolve: {
        // Allow require('./foo') as well as require('./foo.js').
        extensions: ['', '.js']
    },

    plugins: [
        // See "vendor" above. This allows you to serve common module code as a single file.
        new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
    ],

    module: {
        loaders: [
            // Babel loader compiles ES2015 into ES5.
            {
                loader: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/,
                query: {
                    // Use the default ES2015 preset to avoid specifying a bunch of plugins one by one.
                    presets: ['es2015'],
                    plugins: [
                        // These plugins aren't necessary. Totally up to you.
                        'transform-runtime',
                        'transform-object-rest-spread'
                    ]
                }
            }
        ]
    }
};

然后对你的 `gulpfile.js` 进行一个小调整

gulp.task('js', function(done) => {
    webpack(require('./webpack.config'), function(err, stats) {
        if (err) throw new gutil.PluginError('webpack', err);

        gutil.log('[webpack]', stats.toString('minimal'));

        done();
    });
});

就是这样！现在你可以做一些超级棒的事情，比如

安装 Moment.js

$ npm install --save-dev moment

在某个组件或其他地方使用它

// Require Moment.js from node_modules.
const moment = require('moment');

导入你自己的内容

const someComponent = require('./some-component');

Chaz Gatian

评论永久链接# 2016 年 9 月 14 日

Agop 我完全同意。我们需要停止教人们使用 gulp 和 grunt 等任务运行器，并将他们带入捆绑器时代。

André Betiolo

# 2016 年 9 月 14 日

感谢这篇文章，到目前为止，我还没有将其投入生产，但你的文章做到了。

Farhad YZ

# 2016 年 9 月 19 日

优秀的概述。Mom 脚本使用起来很有趣，gulp 和 grunt 使用起来也很不错，并且在运行和自动化任务方面可能派上用场，但是像 browserify 或 webpack 这样的模块捆绑器是我见过的最灵活和通用的。感谢阐明这个概念