搭建babel將es6轉es5環境

前言

babel 6與以前版本的區別：
以前版本只要安裝一個babel就能夠用了，因此以前的版本包含了一大堆的東西，這也致使了下載一堆沒必要要的東西。但在babel6中，將babel拆分紅兩個包：
babel-cli和babel-core。若是你想要在CLI(終端或REPL)使用babel就下載babel-cli，若是想要在node中使用就下載babel-core。
babel 6已結儘量的模塊化了，若是還用babel 6以前的方法轉換ES6，它會原樣輸出，並不會轉化，由於須要安裝插件。

Babel提供 babel-cli工具，用於命令行轉碼。如下摘自 阮一峯。

它的安裝命令以下。

$ npm install --global babel-cli

基本用法以下：

# 轉碼結果輸出到標準輸出
$ babel example.js

# 轉碼結果寫入一個文件
# --out-file 或 -o 參數指定輸出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整個目錄轉碼
# --out-dir 或 -d 參數指定輸出目錄
$ babel src --out-dir lib
# 或者
$ babel src -d lib

# -s 參數生成source map文件
$ babel src -d lib -s

上面代碼是在全局環境下，進行Babel轉碼。這意味着，若是項目要運行，全局環境必須有Babel，也就是說項目產生了對環境的依賴。另外一方面，這樣作也沒法支持不一樣項目使用不一樣版本的Babel。

一個解決辦法是將babel-cli安裝在項目之中。

$ npm install --save-dev babel-cli

而後改寫package.json

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

轉碼時執行：

npm run build

若是某些代碼須要調用Babel的API進行轉碼，就要使用 babel-core模塊。如下摘自阮一峯。

它的安裝命令以下。

$ npm install babel-core --save

而後，在項目中就能夠調用babel-core。

var babel = require('babel-core');

// 字符串轉碼
babel.transform('code();', options);
// => { code, map, ast }

// 文件轉碼（異步）
babel.transformFile('filename.js', options, function(err, result) {
  result; // => { code, map, ast }
});

// 文件轉碼（同步）
babel.transformFileSync('filename.js', options);
// => { code, map, ast }

// Babel AST轉碼
babel.transformFromAst(ast, code, options);
// => { code, map, ast }

例子：

var es6Code = 'let x = n => n + 1';
var es5Code = require('babel-core')
  .transform(es6Code, {
    presets: ['es2015']
  })
  .code;
// '"use strict";\n\nvar x = function x(n) {\n  return n + 1;\n};'

上面代碼中，transform方法的第一個參數是一個字符串，表示須要轉換的ES6代碼，第二個參數是轉換的配置對象。
**

Demo：1.工具（gulp）轉換法

項目目錄結構：

① 在項目中安裝 gulp執行：

npm install gulp --save-dev

② 安裝轉碼規則：

npm install --save-dev gulp-babel babel-preset-es2015

此時的package.josn文件：

③ 編寫gulpfile.js文件，文件內容以下所示：

var gulp = require("gulp");
var babel = require("gulp-babel");
gulp.task("default",function(){
    return gulp.src("js/a.js").pipe(babel({
        presets: ['es2015']
    }))
    .pipe(gulp.dest("lib"));
})

當咱們在當前項目目錄下運行

gulp

命令後，會發現本來在src文件夾中的a.js(按照ES6標準編寫的)文件已經被轉碼成ES5標準的a.js，並放在了lib文件夾裏面。

可能報錯和緣由

package.json文件不該該是空的。

若是你有空的包json文件，只需添加{}。

而後再試一次就行。
**

Demo：2.不使用工具

你得有.babelrc文件。Babel的配置文件是.babelrc，存放在項目的根目錄下。使用Babel的第一步，就是配置這個文件。
該文件用來設置轉碼規則和插件，基本格式以下。

# ES2015轉碼規則
$ npm install --save-dev babel-preset-es2015

# react轉碼規則
$ npm install --save-dev babel-preset-react

# ES7不一樣階段語法提案的轉碼規則（共有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

① 配置項目規則 以下：

② 選擇前言中的方法，安裝babel-cli包：

$ npm install --global babel-cli

③ 執行命令：

# 整個目錄轉碼
# --out-dir 或 -d 參數指定輸出目錄
$ babel js -d lib

以後，你會看到js文件夾下的.js文件，所有轉碼到lib文件夾下，檢查一下lib文件夾中的.js是否已經變爲es5了。