ES6學習 Babel 配置

原文鏈接:http://es6.ruanyifeng.com/
源碼地址:https://github.com/NalvyBoo/nodesES6/

Babel配置

配置文件 .babelrc

使用Bable的第一步,在項目根目錄下新建并配置文件 .babelrc
window 環境下,命名 .babelrc. 生成配置文件
該文件來設置轉碼規則和插件,基本格式如下

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

preset 字段設定轉碼規則,可以根據需要安裝

# 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

將這些規則加入 .babelrc

{
    "presets": [
      "es2015",
      "react",
      "stage-2"
    ],
    "plugins": []
}

以下所有Babel工具和模塊的使用,都必須先寫好 .babelrc

全局安裝 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-cli

$ npm install --save-dev babel-cli

配置 package.json ,將 src文件夾 編譯到 js 文件夾

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

轉碼執行命令

$ npm run build

babel-bode

改寫 package.json

{
  "scripts": {
    "script-name": "babel-node script.js"
  }
}

上面代碼中,使用 babel-node 替代 node ,這樣 script.js 本身就不用做任何轉碼處理。


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容