webpack + babel-无法转换对象箭头功能 [英] webpack + babel - transpile object arrow functions doesn't work

问题描述

我正在尝试使用babel配置webpack(5)，使用babel-loader移植到ES5.不幸的是，输出不一致.基本上，它分为两个部分:

I'm trying to configure webpack (5) with babel, using babel-loader to transpile to ES5. Unfortunately, the output is not consistent. Basically, it's divided into two parts:

1. 一些polyfills:

1. Some polyfills:

我的代码:

如您所见，第一部分包含箭头功能，第二部分则不包含箭头功能.我试图将 @ babel/plugin-proposal-class-properties 和 @ babel/plugin-transform-arrow-functions 添加到我的 .babelrc 文件，但缺少 class-properties (启用调试).

As you can see, the first part contains arrow functions, and the second one not. I've tried to add @babel/plugin-proposal-class-properties and @babel/plugin-transform-arrow-functions to my .babelrc file, but the class-properties is missing (with debug enabled).

我必须承认，我不确定 class-properties 是问题所在，但是在Google上花费了数小时后，这是我的最佳选择，所以也许我错了问题.

I must admit, I'm not sure that the class-properties is the problem, but after spending hours on google it was my best shot, so maybe I'm wrong about the source of the problem.

webpack文件:

webpack file:

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中也遇到了类似的问题

i had a similar problem with webpack v5

引导程序中的箭头功能

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

i needed to change the config from webback and add:

目标:['es5']

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

Weback V5目标配置

这篇关于webpack + babel-无法转换对象箭头功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！