javascript编译器：Babel快速入门

本文主要翻译自babel官网

Babel是一个javascript编译器，能将最新的javascript语法编译成能在浏览器中执行的javascript代码。

安装

1.babel cli

安装cli后可以在命令行执行babel指令
安装命令：

$ npm install -g babel-cli

基础使用命令：

$ babel script.js

执行完这条命令后会在终端原样输出script.js的内容，并没有做其他工作，这是因为没有配置babel的编译参数.

babel cli命令可以附带很多参数，常用的参数如下：

输出文件(–out-file 或者 -o), 可以指定编译后输出的文件名和路径，如果选择编译的是一个文件夹，则将文件夹里面的所有js文件编译生成一个单独的js目标文件

$ babel script.js --out-file script-compiled.js
$ babel src --out-file script-compiled.js

监听(–watch 或者 -w), 可以指定每当源文件发生变化时，自动编译更新输出文件

$ babel script.js --watch --out-file script-compiled.js

Source Maps（–source-maps 或者 -s）, 可以指定在编译的同时生成Souce Maps, 如果要生成内联的Source Maps,则使用 –source-maps inline 参数

$ babel script.js --out-file script-compiled.js --source-maps

执行完这条命令会在生成编译文件的同时生成一个map文件，**用来存放存放源码和编译后代码的文件、行号、列号和变量名的映射关系，调试的时候就可以根据这个map文件将编译文件映射到原始文件中对应的代码行

输出目录(–out-dir 或者 -d)，可以设置编译某个文件夹下的所有js文件到目标文件夹

$ babel src --out-dir lib

忽略文件(–ignore),可以选择忽略某些文件，编译器将选择跳过编译这些文件，不产生这些文件的输出

$ babel src --out-dir lib --ignore spec.js,test.js

*拷贝文件(–copy-files),可以选择拷贝某些文件，编译器将会跳过编译这些文件，但是会拷贝这些文件到目标文件夹中

$ babel src --out-dir lib --copy-files

设置插件(–plugins),可以设置编译时使用的插件

$ babel script.js --out-file script-compiled.js --plugins=transform-runtime,transform-es2015-modules-amd

使用预设配置(–presets),使用预设配置其实也是配置插件的一种方式，相当于系统已经配置好了一些插件库，直接引用系统的设置满足一些编译需求

$ babel script.js --out-file script-compiled.js --presets=es2015,react

无视.babelrc 配置文件编译(–no-babelrc),设置此参数后命令行编译将无视当前文件夹下.babelrc配置文件的设置(不使用此选项情况下使用babel cli命令还是会读取当前文件夹下.babelrc配置文件的编译设置)

$ babel --no-babelrc script.js --out-file script-compiled.js --presets=es2015,react

以上就是babel cli常用的参数设置

2.babel node

babel提供了一个REPL(交互式解释器环境),就像python的交互式解释器一样，进入babel-node REPL后可以直接运行代码，运行文件
在命令行输入

$ babel-node

即可进入babel-node REPL，进入REPL后输入

$ .exit

即可退出REPL
babel-node 可以用来快捷方便的测试一些代码

$ babel-node -e "class Test { }"
$ babel-node test

// 保留输入历史
$ rlwrap babel-node

2.配置文件.babelrc

项目中最常使用babel的方式应该是使用配置文件配置编译，可以编写.babelrc文件配置，或者在项目的package.json里面配置

.babelrc文件配置

{
  "plugins": ["transform-react-jsx"],
  "ignore": [
    "foo.js",
    "bar/**/*.js"
  ]
}

package.json文件配置

{
  "name": "my-package",
  "version": "1.0.0",
  "babel": {
    // my babel config here
  }
}

可以通过设置env参数来指定不同的环境使用不同的配置

{
  "env": {
    "production": {
      "plugins": ["transform-react-constant-elements"]
    }
  }
}

配置好不同的环境后，在运行babel-cli之前设置环境参数就可以使用相应的环境配置

BABEL_ENV=production YOUR_COMMAND_HERE

// 或者单独先起一行
export NODE_ENV=production
YOUR_COMMAND_HERE

3.babel核心函数

有时候需要调用babel的核心库里的函数来进行转码编译，引用核心库代码如下：

var babel = require("babel-core");
import { transform } from "babel-core";
import * as babel from "babel-core";

以下常用函数将会使用.babelrc或者package.json里的babel设置

babel.transform(code: string, options?: Object)

babel.transform(code, options) // => { code, map, ast }

var result = babel.transform("code();", options);
result.code;
result.map;
result.ast;

babel.transformFile(filename: string, options?: Object, callback: Function)

// 异步版
babel.transformFile(filename, options, callback)

babel.transformFile("filename.js", options, function (err, result) {
  result; // => { code, map, ast }
});

babel.transformFileSync(filename: string, options?: Object)

// 同步版
babel.transformFileSync(filename, options) // => { code, map, ast }

babel.transformFileSync("filename.js", options).code;

babel.transformFileSync(“filename.js”, options).code;

const sourceCode = "if (true) return;";
const parsedAst = babylon.parse(sourceCode, { allowReturnOutsideFunction: true });
const { code, map, ast } = babel.transformFromAst(parsedAst, sourceCode, options);