【babel】转码器的安装

[Kelichao]

一、配置文件.babelrc

这类形式的文件需要用编辑器生成与保存，其他保存格式很可能出错

{
  "presets": [],
  "plugins": []
}

• 然后添加转码规则

# 初始化package.json
$ npm init

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

• 规则下载完成后加入.babelrc

  {
    "presets": [
      "es2015",
      "react"
    ],
    "plugins": []
  }

• 注意，以下所有Babel工具和模块的使用，都必须先写好.babelrc。

二、命令行转码babel-cli

# 安装
$ npm install --save-dev babel-cli

• 完成后改写package.json(package需要在项目建立之初就初始化)

改写scripts添加build命令

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel",
    "mybuild": "babel main.js"
  },

• 执行npm的局部命令

# main.js是放在根目录的js文件
$ npm run build main.js

• 也可以执行把入口文件确定好的方式进行加载

# 效果跟上面的语句一样
$ npm run mybuild

• 输出

// main.js
"use strict";

require("./test.js");// 原本是import语句   import "./test.js"; 被替换了

// 在做这一步引入的时候会
var test = require("./test");

// 两者效果一样  var test = require("./test.js");
console.log(test);

---

以上是命令行的转码工具，接下来直接在内部转码es6语法

三、babel-register命令

$ npm install --save-dev babel-register

• 使用时必须首先加载babel-register

// import.js
require("babel-register");
require("./main.js");
console.log("成功执行了main.js中的import语法");

• 不需要手动进行转码，babel-register直接会在内部对文件进行包装(实时转码)