webpack + babel-无法转换对象的箭头功能

编程问答 2022-06-08

问题描述

我正在尝试使用babel配置webpack（5），使用babel-loader移植到ES5。 不幸的是，输出不一致。基本上分为两部分：

  1. 一些polyfills：

  2. 我的代码：

如您所见，第一部分包含箭头功能，第二部分则不包含箭头功能。 我尝试将@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"

解决方法

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

Arrow Function in Bootstrap

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

目标：['es5'] 

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

Weback V5 target config

arrow-functionsbabel-loaderbabeljswebpackwebpackwebpack