Bable的使用
摘要：
一、bable簡介
babel是一個工具鏈，用於將ES6+語法轉換為當前版本瀏覽器等環境相容的javascript程式碼。babel目前已經支援了最新版本的javascript語法，對於目前尚未被瀏覽器支援的語法，可以通過babel外掛支援。
二、配置檔案
Babel有兩種並行的配...
一、bable簡介
babel是一個工具鏈，用於將ES6+語法轉換為當前版本瀏覽器等環境相容的javascript程式碼。babel目前已經支援了最新版本的javascript語法，對於目前尚未被瀏覽器支援的語法，可以通過babel外掛支援。
二、配置檔案
Babel有兩種並行的配置檔案的方式，可以一起使用，也可以單獨使用。
- 專案範圍的配置
-
檔案相關配置
- .babelrc（和.babelrc.js）檔案
- package.json中"babel"關鍵字的部分
1. 專案範圍的配置
根目錄建立 babel.config.js 檔案。babel.config.js 的官方文件在這裡babel
2. 檔案相關配置
1）.babelrc（和.babelrc.js）檔案
在Babel執行編譯的過程中，會從專案的根目錄下的 .babelrc檔案中讀取配置。.babelrc是一個json格式的檔案。在.babelrc配置檔案中，主要是對預設(presets) 和 外掛(plugins) 進行配置。.babelrc配置檔案一般為如下：
{
"plugins": [
[
"transform-runtime",
{
"polyfill": false
}
]
],
"presets": [
[
"env",
{
"modules": false
}
],
"stage-2",
"react"
]
}
plugins該屬性是告訴babel要使用那些外掛，這些外掛可以控制如何轉換程式碼。
presets屬性告訴Babel要轉換的原始碼使用了哪些新的語法特性，presets是一組Plugins的集合。官方提供以下的規則集，你可以根據需要安裝。
# 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