Babel 转码器

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模块提供的浏览器版本,将其插入网页。


注意,网页实时将 ES6 代码转为 ES5,对性能会有影响。生产环境需要加载已经转码完成的脚本。

Babel 提供一个REPL 在线编译器,可以在线将 ES6 代码转为 ES5 代码。转换后的代码,可以直接作为 ES5 代码插入网页运行。

参考

阮一峰的ES6教程

你可能感兴趣的:(javascript,前端)