09月11, 2017

【译】关于Babel6的6个变化

原文链接:http://jamesknelson.com/the-six-things-you-need-to-know-about-babel-6/

近年来Babel已经成为一种将ES2015和JSX转化为传统JavaScript代码的必备工具。但是Babel6相对以前的版本改变巨大。以前的babel包已经废弃了,直接运行babel已经没办法将ES2015转化为ES5,以前的文档也下架了。

但是不要慌,为了让你跟上变化,我整理了6大重要的变化清单,如果你觉得还不够,可以参考我的文档ES6和Babel6完全指南手册,里面覆盖了大量的实践,还有CLI, Webpack, Mocha和 Gulp等知识点。

1.babel的npm包已经没用了。新的版本,babel被拆分为多个包:

  • babel-cli, 包括了babel命令行接口
  • babel-core, 包括了Node有关的API和require钩子
  • babel-polyfill, 可以建立一个完整的ES2015环境

为了防止意外的版本冲突,记得将从package.json文件中删除老版本的babel, babel-core,并执行npm uninstall来实现物理删除。

2.所有的转化(transform)现在都以插件的方式提供,包括ES2015和JSX。因此,默认是不带任何转化效果的,你需要手工安装对应的插件。而且转化ES2015需要20多个插件。还好不用手工一个个安装这些插件,Babel通过预设集(preset)来解决这个问题。

3.Babel6里面的预设集(preset)就是各种插件的组合。以前Babel5的功能在Babel6里面体现为两个预设集。

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

但是记得即使通过npm安装了预设集,也要需要设置Babel才能使用

4..babelrc现在是必须要了。因为Babel6默认不会启用ES2015和React转化,因此gulpfile.babel.js和mocha都没办法正常运行。只有在项目根目录下提供.babelrc文件才能解决这个问题。

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

5.Stage 0现在是独立的预设集(preset),不再是命令行选项。以前你是通过传递命令行参数 --stage 0给babel命令来启用ES7的转化。现在你需要安装和加载babel-preset-stage-0安装包。

6.以前的--external-helpers选项现在也变成插件了。为了防止重复引用Babel的helper,现在需要手工安装和加载babel-plugin-transform-runtime安装包,在你的代码中需要通过require引用babel-runtime包(即使你在使用babel-polyfill)

做到以上6点,你就可以开足马力,体验Babel6提供的包,插件,预设集和选项等特征了。 问题来了,Webpack里面怎么办?如果要通过命令行传递预设集(preset)怎么办?为了保持本文的简洁性,这部分内容请参考我的另外一篇文章 - ES6和Babel6完全指南手册 - 这篇文章覆盖了 CLI, Webpack, Gulp和 Mocha等内容。

技术日新月异,怎么样才能跟得上变化?

随着ES2015的标准化,对于Babel是否是JavaScript程序猿的必备工具已经没有争议了。但是如果要把整个JavaScript相关平台引入到每一个新的项目呢?JavaScript的生态环境的变化之快简直让人目不暇接。不过还好,不是说你一定要上所有的新东西。

对于大部分项目,开发人员经常关注的是扩展性问题。不过在没有遇到这个问题的时候,将精力放在最重要的工具上往往意味着更加高效。

本文链接:http://www.xiaojichao.com/post/the-six-things-you-need-to-know-about-babel-6.html

-- EOF --

Comments