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

众成翻译 · 掘金 · · 2018-05-28 08:01

正文

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

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

babel npm软件包不再存在 。相反，babel 别被分成多个包：
- babel-cli , 其中包含babel命令行界面
- babel-core , 其中包含Node API并需要hook
- babel-polyfill , 当需要时，您可以使用完整的ES2015-ish环境

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

现在每个转换都是一个插件，包括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.

.babelrc现在还不错。 由于Babel默认不再使用ES2015和React转换，因此gulpfile.babel.js和 mocha 使用的require hook实际上不会做任何事情。通过在您的项目目录中创建一个.babelrc来解决这个问题：
```
{
  "presets": ["es2015", "react"]
}
```
Stage 0 现在是一个单独的预设，而不是一个选项。 以前，你可以通过设置--stage 0到babel来启用ES7特性，如装饰器和async/await 。现在，您安装并加载babel-preset-stage-0软件包就可以了。
--external-helpers选项现在是一个插件。 为避免重复包含Babel的辅助函数，现在需要安装并应用babel-plugin-transform-runtime软件包，然后在代码中需要babel-runtime软件包（是的，即使您使用的是polyfill ）。

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