前言

此內容是個人學習筆記,以便日後翻閱。非教程,如有錯誤還請指出

Webpack 將es6、es7語法降級為es5

需要通過 babel JavaScript編譯器。

安裝: npm i babel-loader、@babel/core、@babel/preset-env

plugins:
@babel/plugin-proposal-decorators --save-dev
@babel/plugin-proposal-class-properties --save-dev
@babel/transform-runtime: 它允許重新使用Babel註入的幫助程序代碼來保存代碼大小 --save-dev
@babel/runtime 這個要安裝依賴到生產環境, 避免編譯輸出之間的重復 --save

如果你使用更高級的 ES6語法, 如 裝飾器 @autobind、類的修飾,方法的修飾,使用新的寫法定義類的屬性
都配置在 loader: ‘@bable-loader‘的options中

class N {
  name = qiqingfu;
  @autobind
  sayName() {
    console.log(this.name)
  }
}

const n = N()
n.name // qiqingfu
let { sayName } = n
sayName() // 1  修飾器@autobind  強制調用此函數以使其始終引用類實例

webpack配置:

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: ‘babel-loader‘,
            // babel-loader的一些配置選項
            options: {
              presets: [
                ‘@babel/preset-env‘   // 將es6轉換為 es5
              ],
              plugins: [
                ["@babel/plugin-proposal-decorators", { "legacy": true }],
                ["@babel/plugin-proposal-class-properties", { "loose" : true }]
                ["@babel/transform-runtime"]
              ]
            }
          }
        ]
      },
      {
        // eslint
        test: /\.js$/,
      }
    ]
  }
}
 

可以配置多個loader,下面 /.js$/可以再配置 eslint, loader的執行順序是自左向右,自下到上。所以需要先

ESLint

可組裝的 JavaScript和JSX檢查工具, 提供一個插件化的 JavaScript 代碼檢查工具。

Babel

Babel是一個工具鏈, 主要用於在舊的瀏覽器或環境中將 ECMAScript 2015+代碼轉換為向後兼容版本的。

• Plugins
• Presets

Plugins: 代碼轉換以插件的形式出現, 插件是小型的 JavaScript 程序, 它指示 Babel 如果對代碼進行轉換。

Presets: 如果想要轉換代碼中還有其它 ES2015+ 功能。可以使用 preset來代替預先設定的一組插件,
而不是逐一添加我們要想的插件。

筆記地址

Webpack學習筆記三 ES6+語法降級為ES5