webpack4.0ベース(四)

babelを使用したES 6構文の処理
公式サイト:https://babeljs.io/
1.npm i -D babel-loader @babel/core @babel/preset-env#取付
babel-loaderおよび@babel/coreおよび@babel/preset-env

babel-loader:webpackとbabelの通信の橋渡しで、webpackとbabelを貫通させ、babel-loaderはjsの中のES 6文法をES 5文法

に変換しません.

@babel/core:babelのコア語法ライブラリであり、babelがjsコードの内容を識別し、

に変換することができる.

@babel/preset-env:ES 6構文をES 5構文に変換し、すべてのES 6構文をES 5構文に変換する翻訳

を含む
2.@babel/polyfill
@babel/polyfillの使用npm i -D @babel/polyfill#インストール@babel/polyfill import'@babel/polyfill'#エントリファイルindex.js第1行導入@babel/polyfill
index.js

require("@babel/polyfill")

上に配置すると、パッケージング後のファイルが特に大きいことがわかります.使用していないES 6構文もパッケージングされているため、エントリファイルindexを削除する操作が必要です.jsのimport'@babel/polyfill'npm install core-js regenerator-runtime -Dエントリファイルindex.jsにimport「regenerator-runtime/runtime」を追加します.
注意:npm install core-js regenerator-runtime-D//babel 7.4以降の互換ブラウザルールパッケージ.babel/polyfillは廃棄されました
https://babeljs.io/docs/en/babel-runtime-corejs2
構成:

// webpack.config.js
module.exports = {
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      options: {
        presets: [
          [
            '@babel/preset-env',
            {
              corejs: 3,
              useBuiltIns: 'usage',
              targets: { //    targets          ，                   
                chrome: '67'
              }
            }
          ]
        ]
      }
    }]
  }
}

3. $ yarn add @babel/runtime @babel/plugin-transform-runtime -D
ビジネスコードと書いてある場合は、上記の方法でpolyfillを使用してパッケージ化することができます.
開発コンポーネントまたはライブラリの場合、plugin-transform-runtime polyfillを使用するとグローバル環境が汚染され、plugin-transform-runtimeは閉パッケージの形式でコンポーネントの導入を支援します.
4. $ yarn add @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators
プラグイン処理ES 6/ES 7におけるCLASSの特殊な構文に基づく
ケース:
srcディレクトリindex.js

require("@babel/polyfill")

@log
class A {
    constructor() {
    }

    sum() {
        console.log("sum")
    }

    n = 10;
    static m = 20;

    static fun() {
        console.log("fun")
    }
}

function log(target) {
    target.decorator = true
}

A.fun()
new A().sum()

console.log(new A().n)
console.log(A.m)

console.log(A.decorator)

function sum() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(100)
        }, 1000)
    })
}

async function fn() {
    let n = await sum()
    console.log(n)
}

fn()

webpack.config.dev.js

module:{
	rules:[
				...
	            {
                test: /\.js$/i,
                use: [{
                    loader: "babel-loader",
                    options: {
                        //=>       （ES6->ES5）
                        presets: [
                            "@babel/preset-env"
                        ],
                        //=>      ES6/ES7 CLASS     
                        plugins: [
                            ["@babel/plugin-proposal-decorators", {
                                "legacy": true
                            }],
                            ["@babel/plugin-proposal-class-properties", {
                                "loose": true
                            }],
                            "@babel/plugin-transform-runtime"
                        ]
                    },

                }],
                //=>                 
                include: path.resolve(__dirname, 'src'),
                exclude: /node_modules/
            }
]
}