webpack + babel - 转换对象箭头函数不起作用

Question

我正在尝试使用 babel 配置 webpack (5)，使用 babel-loader 转换为 ES5。不幸的是，输出不一致。基本上，它分为两部分：

一些 polyfill：
我的代码：

如您所见，第一部分包含箭头函数，第二部分则没有。我尝试将 @babel/plugin-proposal-class-properties 和 @babel/plugin-transform-arrow-functions 添加到我的 .babelrc 文件中，但是缺少 class-properties（启用调试）。

我必须承认，我不确定 class-properties 是不是问题所在，但在 google 上花了几个小时后，这是我最好的镜头，所以也许我对来源的看法是错误的的问题。

webpack 文件：

export default {
  entry: './src/index.js',
  mode: 'production',
  output: {
    path: path.resolve(__dirname, '..', '..', 'dist'),
    filename: 'bundle.prod.js'
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
}

.babelrc 文件:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "corejs": {
          "version": 3
        },
        "useBuiltIns": "usage",
        "debug": true
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-arrow-functions"
  ]
}

节点依赖：

"@babel/core": "7.11.6",
"@babel/plugin-proposal-class-properties": "7.10.4",
"@babel/plugin-transform-arrow-functions": "7.10.4",
"@babel/preset-env": "7.11.5",
"@babel/register": "7.11.5",
"babel-loader": "8.1.0",
"core-js": "3.6.5",
"webpack": "5.0.0",
"webpack-cli": "4.0.0",
"webpack-merge": "5.2.0"

Answer 1

我在 webpack v5 中遇到了类似的问题

Arrow Function in Bootstrap

我需要从 webpack 更改配置并添加：

目标：['es5']

        module: {
            rules: [.....]
        },
        resolve: {
            extensions: [".ts", ".tsx", ".js"]
        },
        target: ['es5']

Weback V5 target config

Answer 2

为了 babel-preset-env 和 webpack 5 一起玩，你需要按照这里的文档：

https://webpack.js.org/migrate/5/#need-to-support-an-older-browser-like-ie-11

您最好将 target 设置为 browserslist 或删除目标让 webpack 自动为您设置浏览器列表。

browserslist 由 babel-preset-env 使用，请在此处查看相关文档：https://babeljs.io/docs/en/babel-preset-env#browserslist-integration

webpack + babel - 转换对象箭头函数不起作用

webpack + babel - transpile object arrow functions doesn't work

webpack

babeljs

arrow-functions

babel-loader