鉴于babel7的文档实在是看不懂= =
我也很不理解为什么读那个文档查API会这么累。
实在是对于babel初学者太不友好了,网络上目前的资料还大多都是些babel6的教程。
以上3行就是我要写这篇文章的原因。
记录一些真的比较简单的,实用的babel7教程。

0.babel是什么?

js的代码转换器,可以让写好的js在不同版本直接切换。(本质上是为了迎合旧版本浏览器)

1.babel7如何安装?

注意,这里有写是babel7。因为babel7和babel6的以打不同,就是安装babel的名字和以前不一样了。[3]
这里统一使用@babel的命名空间,所有babel7都是这样的统一格式,不是这个格式的都是babel6或更早的版本。
(PS:文档上面的安装setup仍旧是babel6的安装,都已经release过去一个月了= =)[6]

npm install --save-dev @babel/core  
npm install --save-dev @babel/cli  
npm install --save-dev @babel/preset-env  
npm install --save-dev @babel/env
npm install --save-dev @babel/polyfill 

不用Promise或者WeakMap的话不用安装polyfill。
不选择浏览器的话env也不用。
(preset-env也可以选择浏览器,不过不能使用stage-x)
还有@babel/cli只是@babel/core的cli工具,不安装@babel/core不能用。

2.babel7的原理

和编译器一样,input输入文件,编译器babel,和输出文件output。
新的babel7不再区分babel-preset-es201x,统一使用@babel/preset-env识别。[7]

3.如何使用babel-cli?

哦,说错了,应该是@babel/cli

心路历程:真心没找到使用说明(因为看不懂)。npx babel --help看到的都是心酸的…说preset需要[],谁能想到这个是[[]]啊… 在.babelrc里面输入如下内容。

{
  presets = [
    ["@babel/preset-env"]
  ]
}

或者这样的内容

{
  presets = [
    ["@babel/env", {targets: {ie:"6"}}]
  ]
}

然后,在terminal输入这样的内容。

npx babel input.js

恭喜你,已经成功了。
官方文档有写在babel.config.js的设定格式。大同小异。
babel.config.js的话是这样子的。

const presets = [/*你上面写的*/];
module.exports = {presets};

PS: 官方推荐babel.config.js[5]

顺便,如何想使用pollyfit,那么在preset的{}里面加上这么一行就行。[4]

useBuiltIns:"usage"

4. 测试

事实上做好了上一步,就已经可以实现自动化管理了。(写点小脚本,一键)

echo "var a = () => \'candywater\'" > test.js
npx babel test.js

5. 结语

说实话这个蛮花时间的。
尤其是我阅读它的文档,比如看到@babel/preset-env把过去的babel-preset-es2015,babel-preset-es2016,babel-es2017等等整合到了一起这一句。
我当时在想的是这个有点过分了吧,我还以为这个只是把es6的js代码转换到es5,啊结果它还能把es5转换到es6???[7]

我当时花了好大力气,想弄明白怎么选择input的格式,怎么选择output的格式。
然后我转头去做其他事情,回过头来才弄明白,这些好像都是input的格式….所以它才会把babel-preset-es201x整合到了一起,这样的确方便了许多,说得通。

6. 今后的课题

如何在webpack中作为loader使用babel。
看起来似乎webpack中作为loader有三种方式,

  1. configuration
  2. inline
  3. cli 如果1.的方法太麻烦,就只好用3.cli这种方式了,笑。

[1]How do I get Babel 6 to compile to ES5 javascript?
[2]Nearing the 7.0 Release
[3]Babel 7 リリースプレビュー
[4]babel 7.0.0 Guides Usage Guide
[5]babel 7.0.0 Configure Babel
[6]Babel 6 setup(目前仍旧是babel6的setup)
[7]Upgrade to Babel7
[8]webpack4 loaders


Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)