阅读 741

在node环境中支持ES6代码

对于E6的一些特性,因为目前所有的引擎并没有完全支持,比如说E6模块规范用到的export / import语句。那么,为了在浏览器或者node环境中能够执行ES6的代码,需要将ES6按照一定的规则转码成ES5。Babel工具就是做这个事情的。
Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码。
Babel官网:babeljs.io/

这里介绍在node环境中支持ES6代码的过程:

  1. 安装babel-cli工具
  2. 配置.babelrc配置文件
  3. 通过babel-node命令终端执行js文件
  4. 配置packjson文件,通过npm script命令执行js文件

babel-cli工具

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

  • 全局安装
npm install --global babel-cli
复制代码
  • 项目中安装
 npm install --save-dev babel-cli
复制代码

或者在package.json文件中配置后执行npm install

{
  "devDependencies": {
      "babel-cli": "^6.0.0"
  }
}
复制代码

.babelrc配置文件

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

{
  "presets": [],
  "plugins": []
}
复制代码

presets字段用于设定转码规则。 这里让babel-cli使用babel-preset-es2015。

npm install babel-preset-es2015 --save
复制代码

改写.babelrc配置文件内容如下:

{
    "presets": [
        "es2015"
    ],
    "plugins": []
}
复制代码

babel-node命令

babel-node命令是babel-cli工具自带的一个命令,随babel-cli一起安装。它支持Node的REPL环境的所有功能,而且可以直接运行ES6代码。
测试ES6:如果babel-cli工具和.babelrc文件按照上述步骤配置好了,对于如下两个文件:

// export_demo.js
  export const str = "blablabla~"
  export function log(sth) { 
    return sth;
  }

复制代码
// import_demo.js
  import { str, log } from './export_demo'; 

  console.log(str)
  console.log(log("hahaha~"))
复制代码

在命令行下输入指令

babel-node import_demo.js

// 输出结果
// blablabla~
// hahaha~
复制代码

如果想使用npm script来执行命令, 改写package.json文件

{
  "scripts": {
    "babel": "babel-node import_demo.js"
  }
}
复制代码

命令行下输入如下指令就可以了

npm run babel 
复制代码

参考文档

{
  // ...
  //"devDependencies": {
  //  "babel-cli": "^6.0.0"
 // },
  "scripts": {
    "build": "babel src -d lib"
  },
}
复制代码

其他相关工具

es-checker

可以使用es-checker来检测当前Node.js对ES6的支持情况。 安装

 npm install -g es-checker
复制代码

使用

es-checker
复制代码

babel-register

  • 每当使用require加载.js、.jsx、.es和.es6后缀名的文件,就会先用Babel进行转码。
  • 使用时,必须首先加载babel-register。
  • 只会对require命令加载的文件转码,而不会对当前文件转码。 安装
 npm install --save-dev babel-register
复制代码

使用

 require("babel-register");
 require("./index.js");
复制代码

babel-core

 npm install babel-core --save
复制代码

使用

var es6Code = 'let x = n => n + 1';
var es5Code = require('babel-core')
   .transform(es6Code, {
     presets: ['es2015']
   })
   .code;
复制代码

babel-polyfill

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

举例来说,ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill。

 npm install --save babel-polyfill
复制代码

使用

 require('babel-polyfill')
复制代码

babel在线转换器

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

参考文档

www.ruanyifeng.com/blog/2016/0… www.kancloud.cn/digest/babe…