如何用babel將ES6轉換

Babel 把用最新標準編寫的 JavaScript 代碼向下編譯成可以在今天隨處可用的版本。 這一過程叫做“源碼到源碼”編譯， 也被稱爲轉換編譯。

通俗的說，就是我們可以用ES6, ES7等來編寫代碼，Babel會把他們統統轉爲ES5。

• babel-core 調用Babel的API進行轉碼
• babel-loader 用來告訴webpack我想要對我的js代碼進行兼容性編譯，起到一個通知者角色
• babel-preset-env 用於解析 ES6
• babel-preset-react 用於解析 JSX
• babel-preset-stage-0 用於解析 ES7 提案

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react babel-preset-stage-0

創建.babelrc

//.babelrc
{
  "presets":["react","env","stage-0"]
}

{
   test:/(\.jsx|.js)$/,
   use:{
       loader:'babel-loader',
       options:{
  // babel-loader 將使用默認的緩存目錄node_modules/.cache/babel-loader,之後的 webpack 構建，將會嘗試讀取緩存，來避免在每次執行時，可能產生的、高性能消耗的 Babel 重新編譯過程
                    cacheDirectory:true
                  }
              },
        exclude:/node_modules/,
        include: path.join(__dirname, 'src')