淺析babel

babel是目前es6轉es5的主流工具，有了babel咱們能夠在node端、瀏覽器端使用es6的語法；

在不一樣環境中使用babel

　　平常開發工做中，經常會在命令行模式下使用babel，或者在構建工具中使用babel

　　1.項目中使用babel,不借助構建工具  [局部安裝cli]

　　　　這裏不使用全局安裝babel-cli,緣由:不能在各個工程中使用不一樣版本的babel

            第一步: 在項目根目錄下建立package.json

　　　　第二步: 局部安裝babel-cli

sudo npm install babel-cli --save-dev

　　　　第三步: 局部安裝轉碼規則 以及 配置文件

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

　　　　在工程根目錄下建立.babelrc文件,並在文件中配置參數

 {
    "presets": [
      "es2015", //配置安裝的轉碼規則 es2015
      "react",
      "stage-2"
    ],
    "plugins": []
  }

　　　　第四步: 在package.json文件中修改配置  以及 執行命令

{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d dest" //-d表示轉碼整個文件夾
  },
}

　　　　在項目根目錄下執行  npm run bulid 即執行轉碼命令 參見 npm run 

npm run bulid

 

 　　2.命令行中使用babel  [全局安裝cli]

　　　　若是全局安裝babel命令行 babel-cli，在項目工程中就不須要使用配置package.json文件並執行npm run命令

　　　　全局安裝babel-cli就能夠在項目工程中直接使用babel命令

//第一步： 全局安裝babel-cli 
sudo npm install babel-cli -g 

//第二步： 在項目工程中局部安裝轉碼規則 以及 配置.babelrc文件
sudo npm install babel-preset-es2015 --save-dev

在項目工程根目錄下建立一個.babelrc文件，並配置規則，與局部安裝配置相同

//第三步： 在項目工程下使用babel命令
babel src -d dest 

 

　　3.構建工具中使用babel插件（以gulp爲例）

　　　　在構建工具grunt、gulp中使用babel的方法基本相同，這裏講解gulp中的使用；首先要安裝gulp封裝好的babel編譯器 gulp-babel 以及 轉碼規則 babel-preset-es2015;

sudo npm install gulp-babel babel-preset-es2015

　　　　安裝好babel編譯器和轉碼規則後，建立任務；

　　　　能夠參考gulp-babel文檔，具體以下：

const gulp = require('gulp');
const babel = require('gulp-babel');
 
gulp.task('default', () => {
    return gulp.src('src/app.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('dist'));
});

 

babel5 && babel6差別

　　

 (未完待續)

參考：

[1] babel入門教程

[2] babel5升級到babel6總結