使用babel編譯es6

安裝node、npm。

一、進入項目目錄，初始化目錄

npm -y init

二、安裝babel-cli

npm install --save-dev babel-cli

三、安裝babel轉換語法插件

npm install babel-preset-env --save-dev

　babel-preset-env 將根據你須要支持的環境，採用不一樣的轉換規則，默認的轉換規則是最新的es版本。注意：語法轉換隻轉換新的語法，相似箭頭函數這種語法，以下

//轉換前
var fuc = (arg) => console.log(arg)

//轉換後
var fuc = function(arg) {
     console.log(arg)
}

四、安裝transform-runtime插件

　對於新增的api，如map、set、symbol等，須要使用 transform-runtime 進行轉換。

npm install --save-dev babel-plugin-transform-runtime

五、babelp配置

　建立babel配置文件.babelrc，打開.babelrc，配置轉換規則

{
    "presets": [
        "env"
    ],
    "plugins": [
        "transform-runtime"
    ]
}

六、配置npm package.json

　打開package.json，在scripts中添加

 "build": "babel src -d dist"

　便可直接使用npm run build，命令將src目錄中的es6文件編譯到dist目錄中

測試

一、目錄結構

　　

　　其中src目錄下，print.js中咱們用es6語法和新api，編寫了一個函數

export default function(){
    return new Promise(function (resolve, reject) {
        setTimeout(() => {
            console.log('hello, es6');
            resolve('hello,es6');
        }, 3000);
    })
}

　　在index.js中調用這個print.js

import print from "./print.js";

print();

二、項目目錄下運行

 npm run build

　在dist目錄中會多出一個編譯轉換後的print.js和index.js文件，以下

打開index.js和print.js能夠看到轉換後的代碼

print.js

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _promise = require('babel-runtime/core-js/promise');

var _promise2 = _interopRequireDefault(_promise);

exports.default = function () {
    return new _promise2.default(function (resolve, reject) {
        setTimeout(function () {
            console.log('hello, es6');
            resolve('hello,es6');
        }, 3000);
    });
};

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

　　index.js

"use strict";

var _print = require("./print.js");

var _print2 = _interopRequireDefault(_print);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

(0, _print2.default)("hahaha");

　　測試運行：

node ./dist/index.js

　　運行結果　

　

 參考:

http://babeljs.io/docs/plugins/transform-runtime/

https://stackoverflow.com/questions/31781756/is-there-any-practical-difference-between-using-babel-runtime-and-the-babel-poly