react項目實踐——（3）babel

1. babel

Babel是一個廣泛使用的轉碼器，可以將ES6代碼轉為ES5代碼，從而在現有環境執行。

（1）安裝

npm install --save-dev babel-core babel-eslint babel-loader babel-polyfill

 

babel-core ：如果某些代碼需要調用Babel的API進行轉碼，就要使用babel-core模塊。

babel-eslint ：允許使用ESLint來檢查所有有效的Babel代碼。

安裝后，修改.eslintrc：

{
  "parser": "babel-eslint",
  "rules": {
    "strict": 0
  }
}

babel-loader：允許使用Babel和webpack轉換JavaScript文件。

安裝后，將babel-loader添加到模塊列表中，修改webpack.config.js，添加：

    module: {
        rules: [
            {
                test: /\.jsx?$/,
                loader: require.resolve('babel-loader'),
                exclude: /node-modules/
            }
        ]
    }

babel-polyfill ：Babel默認只轉換新的JavaScript句法（syntax），而不轉換新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（比如Object.assign）都不會轉碼。

舉例來說，ES6在Array對象上新增了Array.from方法。Babel就不會轉碼這個方法。如果想讓這個方法運行，必須使用babel-polyfill，為當前環境提供一個墊片。

安裝后，腳本頭部引入：

import 'babel-polyfill';// 或者require('babel-polyfill');

（2）配置

修改webpack.config.js ：

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: require.resolve('babel-loader'),
        exclude: /node-modules/
      }
    ]
  }
};

完成后，運行 npm start ，可成功打開瀏覽器，並無編譯錯誤。

若編譯時報錯

這是因為babel-core和babel-loader版本不匹配造成的，可運行

 npm install --save-dev @babel/core @babel/cli 

重新安裝babel-core7.x，或修改package.json內容，修改為匹配的版本號，

然后運行 npm i 重新安裝。