為什么 babel 沒有使用 webpack 將 es6 轉換為 es5？

Question

我正在嘗試使用 moduler bundler webpack 中的 babel 在 es5 中轉換我的 es6 語法（導入和導出關鍵字、箭頭函數）文件。 我能夠做到這一點，但在捆綁包中我看到了幾個arrow function為什么？ babel 不能編譯那些嗎？

我喜歡這個

webpackconfig.js

 module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    },

.babelrc

{
    "presets": ["@babel/preset-env"],
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

package.json

"devDependencies": {
    "@babel/core": "^7.13.16",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/preset-env": "^7.13.15",
    "autoprefixer": "^10.2.5",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.2.2",
    "babel-preset-env": "^1.7.0",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "compression-webpack-plugin": "^7.1.2",

但我得到了從arrow function開始的捆綁包。 bundle.js

 (() => {
        "use strict";
        var t, e, a, n, u = (t = function () {
        enter code here
          ({
            init: function () {
                this.initComponents()
            }, initComponents: function () {
                Ut.init(), Pt.init()
            }
        }).init()
    })();

Answer 1

您看到的箭頭 function 是由webpack生成的，它根本不是來自babel 。 基本上webpack允許您通過設置target來配置以完全支持es5語法。

這是一個例子：

// webpack.config.js
module.exports = {
   // ...
  target: ['web', 'es5'],
}

或者，如果您想使用browserslist ，您可以簡單地設置為browserslist並通過package.json提供配置

// webpack.config.js
module.exports = {
   // ...
  target: ['browserslist'],
}

並指定配置：

// package.json
{
  // ...
  "browserslist": [
    "IE 11"
  ]
}