es6學習---.babelrc文件

babel是用來進行轉碼的，在不支持es6的環境下，需要將es6的語法轉碼成es5的語法格式，就用到了babel。

.babelrc 文件的配置

在項目的根目錄下創建 .babelrc 文件

文件包括兩部分：

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

　　"presets"用來設定轉碼的規則；plugins是需要安裝的插件

規則：

#安裝最新的轉碼規則
$ npm install babel-preset-latest --save-dev

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

#不同階段的語法提案的轉碼規則（4選1）
$ 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 文件中

　　注意：該文件的編輯方式按照json文件的編輯習慣編輯。其中，不能使用 ' ' 代替 " "  。

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

 

命令行轉碼工具：babel-cli

一般的使用方法如下：

#安裝命令行工具到全局
$ npm install -g babel-cli

#安裝命令行工具到項目中
$ npm install --save-dev babel-cli

改寫package.json文件，將啟動 babel-cli 的命令進行封裝

#封裝命令，名稱隨意
"scripts": {
    ...
    "babelCli":"babel src -d lib"
  },

#安裝好之后自動添加
"devDependencies": {

　　...
　　"babel-cli": "^6.26.0",
　}

 

執行如下：

$ npm run babelCli

有關 babel-cli 的具體用法見阮老師的 ECMAScript6簡介

babel-node：提供一個REPL環境

REPL 是交互式解析器 可以看這里 或自行百度 node的REPL。

簡單的理解，就是提供可以在命令行進行一些運算。

babel-register：對文件自動轉碼

babel-register會對require引入的后綴為 ‘.js’, '.jsx' , '.es' , '.es6' 的文件進行轉碼。不需要再使用轉碼命令進行轉碼。

安裝：

$ npm install --save-dev babel-register

 

引用：

require("babel-register");
require("./App.js");

 

 注意：1.必須先引入babel-register 再引入文件。 2.引入的方式只能通過 require 的方式引入。3.只在生產環境生效

 babel-polyfill：提供轉換新API的插件

有一些新的API，babel不會進行轉化 --> Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（比如Object.assign）都不會轉碼.安裝了babel-polyfill之后就可以對這些新API進行轉化。

#安裝：
$ npm install --save-dev babel-polyfill

#使用
import('babel-polyfill');
require('babel-polyfill');