essay | tech | year-summary | about
日期：2018-09-16T00:00:00Z
鉴于babel7的文档实在是看不懂= =
我也很不理解为什么读那个文档查API会这么累。
实在是对于babel初学者太不友好了，网络上目前的资料还大多都是些babel6的教程。
以上3行就是我要写这篇文章的原因。
记录一些真的比较简单的，实用的babel7教程。
js的代码转换器，可以让写好的js在不同版本直接切换。(本质上是为了迎合旧版本浏览器)
注意，这里有写是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不能用。
和编译器一样，input输入文件，编译器babel，和输出文件output。
新的babel7不再区分babel-preset-es201x，统一使用@babel/preset-env识别。[7]
哦，说错了，应该是**@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"
事实上做好了上一步，就已经可以实现自动化管理了。（写点小脚本，一键）
echo "var a = () => \'candywater\'" > test.js
npx babel test.js
说实话这个蛮花时间的。
尤其是我阅读它的文档，比如看到@babel/preset-env把过去的babel-preset-es2015，babel-preset-es2016，babel-es2017等等整合到了一起这一句。
我当时在想的是这个有点过分了吧，我还以为这个只是把es6的js代码转换到es5，啊结果它还能把es5转换到es6？？？[7]
我当时花了好大力气，想弄明白怎么选择input的格式，怎么选择output的格式。
然后我转头去做其他事情，回过头来才弄明白，这些好像都是input的格式....所以它才会把babel-preset-es201x整合到了一起，这样的确方便了许多，说得通。
如何在webpack中作为loader使用babel。
看起来似乎webpack中作为loader有三种方式，
[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