ES6-Babel转码

ES6-Babel转码

欢迎访问我的博客,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~

ES6的笔记参考ECMAScript 6 入门

部署进度

这里使用阮一峰老师写的一个工具 ES-Checker用来检查各种运行环境对 ES6 的支持情况。访问ruanyf.github.io/es-checker,可以看到您的浏览器支持 ES6 的程度。运行下面的命令,可以查看你正在使用的 Node 环境对 ES6 的支持程度

1
2
3
4
5
6
7
$ npm install -g es-checker
$ es-checker
// 结果
=========================================
Passes 39 feature Detections
Your runtime supports 92% of ECMAScript 6
=========================================

Babel转码器

Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而在现有环境执行。这意味着,你可以用 ES6 的方式编写程序,又不用担心现有环境是否支持。下面是一个例子。

Babel转码8

例子:

1
2
3
4
5
6
7
// 转码前
input.map(item => item + 1);

// 转码后
input.map(function (item) {
return item + 1;
});

上面的原始代码用了箭头函数,Babel 将其转为普通函数,就能在不支持箭头函数的 JavaScript 环境执行了。

Babel的配置文件.babelrc

Babel 的配置文件是.babelrc,存放在项目的根目录下。使用 Babel 的第一步,就是配置这个文件。

该文件用来设置转码规则和插件,基本格式如下。

1
2
3
4
{
"presets": [],
"plugins": []
}

presets字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。

1
2
3
4
5
6
7
8
9
10
11
# 最新转码规则
$ npm install --save-dev babel-preset-latest

# react 转码规则
$ npm install --save-dev babel-preset-react

# 不同阶段语法提案的转码规则(共有4个阶段),选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

然后,将这些规则加入.babelrc

1
2
3
4
5
6
7
8
{
"presets": [
"latest",
"react",
"stage-2"
],
"plugins": []
}

注意,以下所有 Babel 工具和模块的使用,都必须先写好.babelrc

本来这里想详细总结下各种转码,然后发现阮一峰老师写的是真的详细,请参见ECMAScript 6 入门

本文标题:ES6-Babel转码

文章作者:王工头

发布时间:2018年12月29日 - 14:21:24

最后更新:2019年01月30日 - 01:52:25

原始链接:https://qqqww.com/ES6-Babel转码/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------本文结束感谢大佬们的阅读-------------