ES6-babel转码器

babel是一个广为使用的ES6转码器，可以将ES6代码转为ES5实现，从而在浏览器或者其他环境运行。这意味着可以用es6的方式编写程序，而不用担心现有环境是否支持es6.

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

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

{
    "presets":[],
    "plugins":[]
}
presets 字段设定转码规则,官方提供以下的规则集,可以根据需要进行安装。

# 最新转码规则：

　　$ 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

1. 配置文件.babelrc

然后，将这些规则加入.babelrc中：

{
　　"preset":[
　　　　"latest",
　　　　"react",
　　　　"stage-2"
　　],
　　"plugins":[]
}

注意的是：要使用以下所有babel工具和模块，都必须先写好.babelrc

2.命令行转码 babel-cli

Babel提供babel-cli工具，用于命令行转码

(1) 全局安装：　　npm install --global babel-cli

在全局环境下进行babel转码。这意味着，如果项目要运行，全局环境中必须有Babel，也就是说项目对环境产生了依赖。另一方面，这样做也无法支持不同的醒目使用不同版本的Babel

基本用法：

// 转码结果输出
babel example.js

// 转码结果写入一个文件
babel example.js --out-file compiled.js
babel example.js -o compiled.js

// 整个目录转码
babel src --out-dir lib
babel src -d lib

// -s 参数生成source map文件
babel src -d lib -s

(2) 项目中安装babel-cli

安装：npm install --save-dev babel-cli

再改写package.json

{
　　...
　　"devDependencies":{
　　　　"babel-cli":"^6.0.0"
　　}
}

3 babel-node

babel-cli工具自带一个babel-node命令，提供一个支持ES6的REPL环境（交互式解析器）。可以直接运行ES6代码

babel-node 不用单独安装，而是随babel-cli一起安装，执行babel-node可以进入REPL环境

babel-node可以直接运行ES6脚本:

babel-node es6.js

babel-node也可以安装在项目中：npm install --save-dev babel-cli

然后改写package.json

{
　　"scripts":{
　　　　"secript-name":"babel-node script.js"　
　　}        
}
// 使用babel-node 替代node，这样script.js本身就不用了进行任何转码处理

4. babel-register

babel-register模块改写了require命令，为他加上了一个钩子。此后，每当使用require加载后缀为.js .jsx .es .es6的文件时，就会先用Babel进行转码。

安装： npm install --save-dev babel-register

require("./index.js")；

这样就不用了手动对index.js进行转码了。

注意：babel-register只会对require命令加载的文件进行转码，而不会对当前文件进行转码。另外由于它是实时转码，所以只适合在开发环境中使用。

5.babel-core

有些代码可能需要调用babel的API进行转码，就要用babel-core模块

安装： npm install babel-core --save

在项目中调用babel-core了：

var babel=require('babel-core')

关于配置对象options的内容，可以参考官方文档，地址是 babeljs.io/docs/usage/options/

6.babel-polyfill

Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，如Iterator,generator,Set,Maps,Proxy,Reflect,Symbol,Promise等全局对象，以及一些定义在全局对象上的方法（如Object.assign）都不会转码。

安装：npm install --save babel-polyfill

在头部引入

import "babel-polyfill"
// 或：
require("babel-polyfill")

Babel默认不转码的API非常多，详情见babel-plugin-transform-runtime模块的definitions.js(https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-runtime/src/runtime-corejs3-definitions.js)：

1. 配置文件.babelrc

2.命令行转码 babel-cli

3 babel-node

4. babel-register

5.babel-core

猜你喜欢