你必须了解有关Babel 6的6件事

本文翻译自The Six Things You Need To Know About Babel 6

从去年开始,Babel成为了一个将ES2015JSX转换为无趣古老的javascript语言的标配转换工具。但是一夜之间,Babel 6 改变了这一切。原先的Babel组件已经被取缔了,执行babel不再起作用。同时,原先版本的说明文档也已经消失不见了。

别担心!为了让你快速上手,我将列出新版本中的6个最重要的变化。如果需要更多的帮助,可以查看The Complete Guide to ES6 with Babel 6。在这篇文章中将详细介绍Babel 6的细节,包括CLIWebpackMochaGulp

1. 原先的Babel包将不再可用,取而代之的是诸多的包

  • babel-cli,包含了Babel的相关命令行界面;
  • babel-core,包含了Node APIrequire钩子;
  • babel-pollfill,俗称垫片,可以创在一个完全适合ES2015运行的环境。

为了避免出现冲突,需要确保从package.json中移除所有原始版本的Babel包,包括babelbabel-core等,然后使用npm uninstall卸载。

2. 任何一个简单的转换都是一个插件,包括ES2015JSX

所以,原先的命令将不在起任何作用,需要安装相应的功能插件后才能生效。实际上,ES2015包括大概20个插件,你并不需要一个一个的去安装。

3. Babel 6增加了预处理或者插件集

Babel 5中,预先增加了babel-preset-es2015babel-preset-react两个插件。而在Babel 6中,我们需要自行安装。
npm install babel-preset-es2015 babel-preset-react --save-dev

即使安装了预处理插件,你仍然需要告诉Babel去使用此插件。

4. .babelrc是必须的

由于Babel默认不再使用ES2015React转换,那么使用require钩子的gulpfile.babel.jsMocha将无法使用。你需要在项目目录增加.babelrc文件来解决此问题。

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

5. Stage 0 是一个单独的预处理,而不是一个选项

以前,你可以通过传递参数--stage 0Babel来使得ES7的相关特性能够使用,比如async / await。但是现在,你需要安装babel-preset-stage-0才能使用了。

6. --external-helpers参数的相关功能也变成了一个插件。

为了避免重复引入Babelhelper函数,我们需要单独安装和使用babel-plugin-transform-runtime插件,然后将babel-runtime包加入到你的代码中(即使你已经使用了垫片代码)。

你可能感兴趣的:(你必须了解有关Babel 6的6件事)