Babel 转码器
Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而在老版本的浏览器执行。这意味着可以用 ES6 的方式编写程序,又不用担心现有环境是否支持。
// 转码前 input.map(item => item + 1); // 转码后 input.map(function(item) { return item + 1; });
上面的原始代码用了箭头函数,Babel 将其转为普通函数,就能在不支持箭头函数的 JavaScript 环境执行了。
在项目目录中安装 Babel的命令。
$ npm install --save-dev @babel/core
配置文件 .babelrc
Babel 的配置文件是.babelrc
,存放在项目的根目录下。使用 Babel 的第一步,就是配置这个文件。
该文件用来设置转码规则和插件,基本格式如下。
{ "presets": [], "plugins": [] }
presets
字段设定转码规则,官方提供以下的规则集,可以根据需要安装。
# 最新转码规则 $ npm install --save-dev @babel/preset-env # react 转码规则 $ npm install --save-dev @babel/preset-react
然后,将这些规则加入.babelrc
。
{ "presets": [ "@babel/env", "@babel/preset-react" ], "plugins": [] }
注意,以下所有 Babel 工具和模块的使用,都必须先写好.babelrc
。
浏览器环境
Babel 也可以用于浏览器环境,使用@babel/standalone模块提供的浏览器版本,将其插入网页。
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> // Your ES6 code </script>
注意,网页实时将 ES6 代码转为 ES5,对性能会有影响。生产环境需要加载已经转码完成的脚本。
Babel 提供一个REPL 在线编译器,可以在线将 ES6 代码转为 ES5 代码。转换后的代码,可以直接作为 ES5 代码插入网页运行。
参考