使用 Babel

1 选择你的工具 (尝试 CLI)

原型

Babel 内置插件

2 安装

在浏览器中

在浏览器中编译的用例非常有限，因此如果你在生产环境下工作，你应该在服务端预编译脚本。请查看配置构建系统了解更多信息。

你可以使用 babel/babel-standalone 作为 babel 的预编译版本，或者你自己在 babel 基础之上运行一个 bundler 。

你还可以使用更多在线工具对脚本进行原型化:

Babel 官方提供的 REPL

运行 Babel 于在线编辑器上:

CLI

虽然你可以在你的机器上全局安装 Babel CLI, 但根据单个项目进行本地安装会更好一些。

这样做有两个主要的原因：

同一机器上的不同的项目可以依赖不同版本的 Babel, 这允许你一次更新一个项目。
这意味着在你的工作环境中没有隐含的依赖项。它将使你的项目更方便移植、更易于安装。

我们可以通过以下命令本地安装 Babel CLI:

npm install --save-dev babel-cli

注意： 如果你没有一个 package.json, 在安装之前请新建一个。这可以保证 npx 命令产生合适的交互。

在完成安装之后，你的 package.json 文件应该包括：

{
  "devDependencies": {
+   "babel-cli": "^6.0.0"
  }
}

Require hook

npm install babel-register

Broccoli

npm install --save-dev broccoli-babel-transpiler

Browserify

npm install --save-dev babelify

Brunch

npm install --save-dev babel-brunch

Duo

npm install --save-dev duo-babel

Gobble

npm install --save-dev gobble-babel

Grunt

npm install --save-dev grunt-babel

Gulp

npm install --save-dev gulp-babel

jspm

运行 jspm init -p 时选择 babel 作为编译器，或者用以下命令将现有的工程切换到 Babel 中：

jspm dl-loader --babel

Make

在多数 Unix 系统中已经预装过。 Windows 系统可以从 gow 获取。

MSBuild

.NET 中支持 Babel 是由 ReactJS.NET 项目所提供的。通过 NuGet 执行 MSBuild 安装任务:

Install-Package React.MSBuild

RequireJS

npm install requirejs-babel

Rollup

npm install --save-dev rollup

npm install --save-dev rollup-plugin-babel

使用以下 preset 取代 es2015 preset:

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

Sprockets

gem install sprockets-es6

Webpack

npm install --save-dev babel-loader babel-core

Webpack 1

npm install --save-dev babel-loader babel-core

Fly

npm install -D fly-babel babel-preset-env

Start

npm install -D start-babel

Ember

npm install --save-dev ember-cli-babel

Meteor

meteor add ecmascript

Rails

gem install sprockets-es6

Sails

npm install --save-dev sails-hook-babel

AVA

没有必要安装 babel-core, 因为 AVA 已经将他打包好。

Jasmine

npm install --save-dev babel-register

Jest

npm install --save-dev babel-jest

Karma

npm install --save-dev karma-babel-preprocessor

Lab

npm install --save-dev lab-babel

Mocha

npm install --save-dev babel-register

Connect

npm install babel-connect

Nodemon

npm install babel-cli babel-preset-env --save-dev

C# / .NET

.NET 对于 Babel 的支持由 ReactJS.NET 项目提供。核心库可以通过 NuGet 安装：

Install-Package React.Core

Node

npm install --save-dev babel-core

Ruby

gem install babel-transpiler

Pug

npm install jstransformer-babel

WebStorm

npm install --save-dev babel-cli

Node Inspector

npm install -g babel-node-debug

3 使用

在浏览器中

使用 babel-standalone

<div id="output"></div>
<!-- 加载 Babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 你的脚本代码 -->
<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById('output').innerHTML = getMessage();
</script>

CLI

我们将把我们的指令放在本地版本的 npm 脚本中，而不是直接通过命令行来运行 Babel.

简单的在你的 package.json 中添加一个 "scripts" 属性并将 babel 命令放在它的 build 属性中。

  {
    "name": "my-project",
    "version": "1.0.0",
+   "scripts": {
+     "build": "babel src -d lib"
+   },
    "devDependencies": {
      "babel-cli": "^6.0.0"
    }
  }

现在从我们的终端可以运行以下命令：

npm run build

这会按照和之前一样的方式来运行 Babel 并将输出放在 lib 目录下，唯一不同在于我们现在使用了一个本地拷贝。

另外，你可以在 node_modules 中引用 babel 命令。

./node_modules/.bin/babel src -d lib

了解完整 Babel CLI 文档请看使用文档。

Require hook

使用它你需要在应用程序的入口起点顶部引入 Babel 。

require("babel-register");

如果你在应用程序中使用 ES6 的 import 语法，你则需要在入口起点的顶部引入 Babel ，以确保它优先加载:

import "babel-register";

所有以 .es6， .es， .jsx 和 .js 扩展名为后缀的文件都能被 Babel 转译。特殊的 polyfill 自然也需要引入特殊的 polyfill 。

不适合在库中使用
Require hook 会自动钩住所有节点需要的钩子。这将污染全局作用域，引发未知冲突。正因如此，它不适合在库中使用，但你如果正在编写一个应用程序，那么使用它就完全没问题。

不适合用于生产环境下
Require hook 主要推荐用于简单的情况下。

关于 Babel Require hook 的完整文档，请查看usage docs.

Broccoli

var babelTranspiler = require("broccoli-babel-transpiler");
var scriptTree = babelTranspiler(inputTree, options);

欲了解更多信息，请参阅 babel/broccoli-babel-transpiler 项目.

Browserify

通过 CLI 使用

browserify script.js -t babelify --outfile bundle.js

通过 Node API 使用

browserify({ debug: true })
  .transform(babelify);

或者一个更完整的例子:

var fs = require("fs");
var browserify = require("browserify");
var babelify = require("babelify");

browserify({ debug: true })
  .transform(babelify)
  .require("./script.js", { entry: true })
  .bundle()
  .on("error", function (err) { console.log("Error: " + err.message); })
  .pipe(fs.createWriteStream("bundle.js"));

传递选项

CLI

browserify -d -e script.js -t [ babelify --comments false ]

Node API

browserify().transform(babelify.configure({
  comments: false
}))

package.json

{
  "transform": [["babelify", { "comments": false }]]
}

欲了解更多信息，请参阅 babel/babelify 项目。

Brunch

就是这些！在你的 brunch 配置文件(例如: brunch-config.coffee)中设置 babel 选项，已经被内部处理的 filename 和 sourceMap 除外。

plugins:
  babel:
    whitelist: ["arrowFunctions"]
    format:
      semicolons: false

欲了解更多信息，请参阅 babel/babel-brunch 项目。

Duo

通过 CLI

duo --use duo-babel

通过 Node API

Duo(root)
  .entry(entry)
  .use(babel)
  .run(fn);

欲了解更多信息，请参阅 babel/duo-babel 项目。

Gobble

var gobble = require("gobble");
module.exports = gobble("src").transform("babel", options);

欲了解更多信息，请参阅 babel/gobble-babel 项目。

Grunt

require("load-grunt-tasks")(grunt); // npm install --save-dev load-grunt-tasks

grunt.initConfig({
  "babel": {
    options: {
      sourceMap: true
    },
    dist: {
      files: {
        "dist/app.js": "src/app.js"
      }
    }
  }
});

grunt.registerTask("default", ["babel"]);

欲了解更多信息，请参阅 babel/grunt-babel 项目。

Gulp

var gulp = require("gulp");
var babel = require("gulp-babel");

gulp.task("default", function () {
  return gulp.src("src/app.js")
    .pipe(babel())
    .pipe(gulp.dest("dist"));
});

和 source maps 一起使用

像这样使用 gulp-sourcemaps:

var gulp = require("gulp");
var sourcemaps = require("gulp-sourcemaps");
var babel = require("gulp-babel");
var concat = require("gulp-concat");

gulp.task("default", function () {
  return gulp.src("src/**/*.js")
    .pipe(sourcemaps.init())
    .pipe(babel())
    .pipe(concat("all.js"))
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("dist"));
});

欲了解更多信息，请参阅 babel/gulp-babel 项目。

jspm

当你在任何源代码中使用 import 或者 export 模块语法时 Babel 会自动启用。

对 JSX 的支持现在被 jspm 禁用。在 jspm 配置文件 `babelOptions` 中添加 `"blacklist": []` 可以重新启用它。

Make

SRC = $(wildcard src/*.js)
LIB = $(SRC:src/%.js=lib/%.js)

lib: $(LIB)
lib/%.js: src/%.js .babelrc
  mkdir -p $(@D)
  babel $< -o $@

make

MSBuild

在你的 MSBuild 脚本中都任务:

<UsingTask AssemblyFile="packages\React.MSBuild.2.1.0\React.MSBuild.dll" TaskName="TransformBabel" />

使用如下代码:

<TransformBabel SourceDir="$(MSBuildProjectDirectory)" TargetDir="" />

这样操作将会改变文件夹中每一个 .js 和 .jsx 文件，并同时对应生成一个 .generated.js 文件。

查看 guide 获取更多信息。

RequireJS

在配置中添加以下路径:

paths: {
  es6: "node_modules/requirejs-babel/es6",
  babel: "node_modules/requirejs-babel/babel-4.6.6.min"
}

接下来，通过 es6! 加插件名引用文件:

define(["es6!your-es6-module"], function (module) {
  // ...
});

欲了解更多信息，请参阅 mikach/requirejs-babel 项目.

Rollup

var rollup = require("rollup");
var babel = require("rollup-plugin-babel");

rollup.rollup({
  entry: "src/main.js",
  plugins: [ babel() ]
}).then(function (bundle) {
  bundle.write({
    dest: "dist/bundle.js",
    format: "umd"
  });
});

欲了解更多信息，请参阅 rollup 和 rollup-plugin-babel 项目.

Sprockets

# Gemfile
gem "sprockets"
gem "sprockets-es6"

require "sprockets/es6"

欲了解更多信息，请查阅 TannerRogalsky/sprockets-es6 项目.

Webpack

通过 config 方式

module: {
  rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

通过 loader 方式

var Person = require("babel!./Person.js").default;
new Person();

欲了解更多信息，请查阅 babel/babel-loader 项目.

Webpack 1

通过 config 方式

module: {
  loaders: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

通过 loader 方式

var Person = require("babel!./Person.js").default;
new Person();

欲了解更多信息，请参阅 babel/babel-loader 项目。

Fly

  export function* text () {
    yield this
      .source("src/**/*.js")
      .babel({ presets: ["env"] })
      .target("dist/")
  }

欲了解更多信息，请参阅 flyjs/fly-babel 项目。

Start

import Start from 'start';
import reporter from 'start-pretty-reporter';
import files from 'start-files';
import read from 'start-read';
import babel from 'start-babel';
import write from 'start-write';

const start = Start(reporter());

export function build() {
  return start(
    files('lib/**/*.js'),
    read(),
    babel({ sourceMaps: true }),
    write('build/')
  );
}

欲了解更多信息，请参阅 start-runner/babel 项目。

Ember

就是它了！

欲了解更多信息，请参阅 babel/ember-cli-babel 项目。

Meteor

就是它了！任何以 .js 为扩展名的文件均会通过 Babel 被自动转译。

从 Meteor 1.2 开始，所有新的应用中会默认安装 ecmascript 软件包，所以 meteor add ecmascript 只是现有的应用程序所必需的。

欲了解更多信息，请参阅 ecmascript README.md.

Rails

# Gemfile
gem "sprockets"
gem "sprockets-es6"

require "sprockets/es6"

欲了解更多信息，请参阅 TannerRogalsky/sprockets-es6 项目。

Sails

就是它了！

欲了解更多信息，请参阅 artificialio/sails-hook-babel 项目。

AVA

AVA 通过使用 Babel 6 内置支持 ES2015, 所以您可以立即使用 ES2015 语法编写测试。

AVA 默认的 Babel 配置包括 "es2015" 和 "stage-2" presets, 但是为了转译测试文件，你可以通过 AVA 中 package.json 配置的 "babel" 选项自定义任何 Babel 选项。

比如：

{
  "ava": {
    "babel": {
      "presets": [
        "es2015",
        "react"
      ]
    }
  }
}

或者你可以简单地从 .babelrc 或者 Babel’s package.json 配置 "inherit" Babel 的配置，使得测试文件和你源文件使用相同的配置：

{
  "ava": {
    "babel": "inherit"
  }
}

请注意，AVA 总是在转译你的插件时会添加一些自定义的 Babel 插件，请看标注。

欲了解更多信息，请参阅如何配置 Babel.

Jasmine

在你的 spec/support/jasmine.json 文件中作出如下变化：

{
  "helpers": [
    "../node_modules/babel-register/lib/node.js"
  ]
}

这个文件在你通过 jasmine init 命令建立一个项目生成。

欲了解更多信息，请参阅 piecioshka/test-jasmine-babel 项目。

Jest

在你的 package.json 文件中作出如下变化：

{
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    }
  }
}

欲了解更多信息，请参阅 babel/babel-jest 项目。

Karma

module.exports = function(config) {
  config.set({
    files: [
      "src/**/*.js",
      "test/**/*.js"
    ],
    preprocessors: {
      "src/**/*.js": ["babel"],
      "test/**/*.js": ["babel"]
    },
    "babelPreprocessor": {
      // options go here
    }
  });
};

欲了解更多信息，请参阅 babel/karma-babel-preprocessor 项目。

Lab

当使用 lab 运行测试时，三个自古转译器为 lab-babel:

lab -T node_modules/lab-babel

Mocha

Mocha 4

从 Mocha v4.0.0 开始，不推荐使用 --compilers. 请参阅进一步解释和解决办法。

在你的 package.json 文件中做如下变化：

{
  "scripts": {
    "test": "mocha --require babel-register"
  }
}

有些特性需要一个 polyfill:

npm install --save-dev babel-polyfill

{
  "scripts": {
    "test": "mocha --require babel-polyfill --require babel-register"
  }
}

Mocha 3

{
  "scripts": {
    "test": "mocha --compilers js:babel-register"
  }
}

通过 polyfill:

{
  "scripts": {
    "test": "mocha --require babel-polyfill --compilers js:babel-register"
  }
}

Connect

var babelMiddleware = require("babel-connect");

app.use(babelMiddleware({
  options: {
    // 转译文件使用到的选项
  },
  src: "assets",
  dest: "cache"
}));

app.use(connect.static("cache"));

欲了解更多信息，请参阅 babel/babel-connect 项目。

Nodemon

在你的 package.json 文件做出如下改动：

{
  "scripts": {
    "babel-node": "babel-node --presets=/*a*/ --ignore='foo|bar|baz'"
  }
}

然后通过以下命令调用你的脚本：

nodemon --exec npm run babel-node -- path/to/script.js

参数警告

使用 babel-node 调用 nodemon 时如果忘记使用双短划线，可能会导致错误地分析参数。使用npm-scripts 来防止这一点。如果您选择跳过使用 npm-scripts 脚本，它可以表示为：

nodemon --exec babel-node --presets=es2015 --ignore='foo\|bar\|baz' -- path/to/script.js

C# / .NET

var babel = ReactEnvironment.Current.Babel;
// 转译一个文件
// 如果你也想要 source map, 那么可以使用 `TransformFileWithSourceMap`.
var result = babel.TransformFile("foo.js");
// 转译一段代码
var result = babel.Transform("class Foo { }");

Node

require("babel-core").transform("code", options);

关于 Babel 的完整 API 文档请查阅使用文档。

Ruby

require 'babel/transpiler'
Babel::Transpiler.transform File.read("foo.es6")

欲了解更多信息，请参阅 babel/ruby-babel-transpiler 项目。

Pug

现在你可以在你的 pug 模板中使用 ES6, 如下所示：

script
  :babel
    console.log("Hello World !!!");
    class Person {
      constructor(name) {
        this.name = name;
      }
      sayName(){
        console.log(`Hello, my name is ${this.name}`);
      }
    }
    var person = new Person("Apoxx");
    person.sayName();

欲了解更多信息，请参阅 jstransformers/jstransformer-babel 项目。

WebStorm

在 首选项 - 工具 - 文件观察 中，单击 + 按钮并从列表中选择 Babel 文件观察。

指定 Babel 可执行的文件路径，然后单击确定。

默认情况下，所有带有 .js 扩展名的文件都会在更改后自动与 Babel 一起编译。生成的 ES5 文件和 source maps 将保存在原始文件旁。

最后，在 语言和框架 - JavaScript - JavaScript 语言版本中，选择 ECMAScript 6.

欲了解更多信息，请参阅 WebStorm 博客中的博文。

Node Inspector

babel-node-debug path/to/script.js

或者使用这个命令：

bode-debug path/to/script.js

欲了解更多信息，请参阅 crabdude/babel-node-debug 项目。

4 创建 `.babelrc` 配置文件

非常棒！虽然已经配置好了 Babel ，但并没有让它真正生效。在项目的根目录中创建一个 .babelrc 文件并启用一些插件。

首先，你可以使用转换 ES2015+ 的 env preset 。

npm install babel-preset-env --save-dev

为了让 preset 生效，你需要像下面这样定义你的 .babelrc 文件：

{
  "presets": ["env"]
}

注意: 因为 npm 2.x 下载依赖的关系，在使用 npm 2.x 运行 Babel 6.x 的项目时，可能会引起性能问题。你可以通过切换到 npm 3.x 或在 npm 2.x 上使用 dedupe 选项来解决这个问题。查看 npm 版本你可以运行如下命令:

npm --version

1 选择你的工具 (尝试 CLI)

原型

Babel 内置插件

构建系统

框架

测试框架

公用

编程语言 APIs

模板引擎

编辑器和 IDEs

调试工具

2 安装

在浏览器中

CLI

Require hook

Broccoli

Browserify

Brunch

Duo

Gobble

Grunt

Gulp

jspm

Make

MSBuild

RequireJS

Rollup

Sprockets

Webpack

Webpack 1

Fly

Start

Ember

Meteor

Rails

Sails

AVA

Jasmine

Jest

Karma

Lab

Mocha

Connect

Nodemon

C# / .NET

Node

Ruby

Pug

WebStorm

Node Inspector

3 使用

在浏览器中

使用 babel-standalone

CLI

Require hook

不适合在库中使用

不适合用于生产环境下

Broccoli

Browserify

通过 CLI 使用

通过 Node API 使用

传递选项

Node API

package.json

Brunch

Duo

通过 CLI

通过 Node API

Gobble

Grunt

Gulp

和 source maps 一起使用

jspm

Make

MSBuild

RequireJS

Rollup

Sprockets

Webpack

4 创建 `.babelrc` 配置文件