关于Babel6你需要了解的六件事

在过去的一年中，Babel已经成为将ES2015和JSX转变成枯燥的旧JavaScript的前沿工具。但是看起来在一夜之间，Babel 6改变了一切。 babel包被弃用，运行的babel实际上并没有将ES2015转换成ES5，而且旧的文档基本上已经消失

但不要惊慌！为了让您迅速了解，我列出了六个最重要的变化的简要列表。如果你需要更多的帮助，我的ES6与Babel 6 完全指南将会引导你完成实际的细节;包括CLI，Webpack，Mocha和Gulp。

1. babel npm软件包不再存在。相反，babel 别被分成多个包：

• babel-cli, 其中包含babel命令行界面

• babel-core, 其中包含Node API并需要hook

• babel-polyfill, 当需要时，您可以使用完整的ES2015-ish环境

为避免意外冲突，请确保从package.json中删除任何以前的Babel包，如babel，babel-core等，然后使用npm将其卸载。

1. 现在每个转换都是一个插件，包括ES2015和JSX。这样的默认情况下不会发生任何事情 - 所以您需要安装正确的插件。实际上，ES2015包含大约_20_插件。你不想手动安装每一个，这就是Babel添加预设的原因。

3. Babel 6添加了预设或插件集合。它为Babel 5中默认提供的功能提供了两个预设：

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

But even after installing a preset, you need to tell Babel to use it.

1. .babelrc现在还不错。由于Babel默认不再使用ES2015和React转换，因此gulpfile.babel.js和mocha使用的require hook实际上不会做任何事情。通过在您的项目目录中创建一个.babelrc来解决这个问题：

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

2. Stage 0 现在是一个单独的预设，而不是一个选项。以前，你可以通过设置--stage 0到babel来启用ES7特性，如装饰器和async/await 。现在，您安装并加载babel-preset-stage-0软件包就可以了。

3. --external-helpers选项现在是一个插件。为避免重复包含Babel的辅助函数，现在需要安装并应用babel-plugin-transform-runtime软件包，然后在代码中需要babel-runtime软件包（是的，即使您使用的是polyfill ）。

现在你已经拥有它了，你现在可以加速Babel 6的packages, plugins, 预设和选项！但是Webpack呢？通过CLI传递预设值怎么样？我试图尽可能简洁地列出这个列表，为此，我把我的完全指南与Babel 6一起保存为一个独立的系列 - 包括CLI，Webpack，Gulp和Mocha。

阅读更多

• ES6与Babel的完整指南

• 学习Raw React

• Webpack变得简单：使用Autorefresh构建ES6 / LESS

相关项目

• See Babel and Webpack in action in the Unicorn Standard Starter Kit

译文出处