_小生_

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

原文链接: jamesknelson.com

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

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

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

为避免意外冲突,请确保从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。

阅读更多

相关项目