今天閒來無事試着從頭構建一個前端項目，光 babel 就遇到不少問題，尤其是在 babel 升級到 7.X 版本之後，許多之前的配置都要發生一些變化，在這裏做一個踩坑總結
1. 6.X 版本配置方法
npm install babel-loader@7 babel-core babel-preset-react babel-preset-env babel-preset-stage-0 -D
下面是這些包的作用：
- babel-core Babel 的核心代碼
- babel-loader 解析 js 的 loader
- babel-preset-react 用於解析 jsx 語法
- babel-preset-env 取代之前的
babel-preset-es2015babel-preset-es2016等包，解析 ES6 等語法 - babel-preset-stage-0 同類的還有
stage-1、stage-2、stage-3，stage-0包含es7的解析內容，且同時包含 stage-1/2/3 的所有功能
這裏我指定了 babel-loader 的版本，因爲不指定版本，babel-loader 會下載 8.X 版本，會報 babel 版本的問題，如下圖(雖然我們已經下載了最新的，後面我會介紹 7.X 如何升級)
然後是原來的 .babelrc 文件的配置
{
"presets": [
"env",
"react",
"stage-0"
]
}
2. presets(預設) 與 plugins(插件) 差別
舉個例子， babel-preset-es2015 包含了 transform-es2015-arrow-functions(編譯箭頭函數)、transform-es2015-block-scoping(編譯 const、let)、transform-es2015-classes(編譯class)等幾十個插件
如果不使用 preset，如果想要用完整的 es6 語法，使用者可能需要自己配置幾十個 plugins。
3. plugins、presets 的編譯順序
plugins、presets 的編譯也許會有相同的功能或者有聯繫的功能，babel 是根據一定的順序進行編譯
- plugins 優先於 presets 編譯
- plugins 根據配置數組升序(自左向右)順序進行編譯
- presets 根據配置數組降序(自右向左)順序進行編譯
4. 一個很重要的問題
使用 babel 有一個非常需要注意的點，babel 只是轉譯新標準(es6、es7)引入的新語法，比如 ES6 的箭頭函數轉換爲 ES5 的函數、ES6 的 let、const 的轉換還有 React 的 JSX 語法等等。
不過對於Babel 默認只轉換新的 JavaScript語法，而不轉換新的 API 比如Iterator、Generator、Set、Maps、Promise 等等全局對象，以及一些定義在全局對象上的方法（比如Object.assign）都不會轉譯
不做特別的處理，可能會造成下面的錯誤(這是我使用 *、yield 的ES6語法時報的錯誤 )
新標準引入的新的原生對象、部分原生對象新增的原型方法，babel是不會轉譯的，需要額外進行處理