webpack функции стрелки объекта babel - transpile не работают

#webpack #babeljs #arrow-functions #babel-loader

#webpack #babeljs #функции со стрелками #babel-загрузчик

Вопрос:

Я пытаюсь настроить webpack (5) с помощью babel, используя babel-loader для переноса в ES5. К сожалению, вывод не согласован. По сути, он разделен на две части:

Некоторые полизаполнения:
Мой код:

Как вы можете видеть, первая часть содержит функции со стрелками, а вторая — нет. Я пытался добавить @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"

Ответ №1:

у меня была аналогичная проблема с webpack v5

Функция стрелки в начальной загрузке

мне нужно было изменить конфигурацию из webback и добавить:

цель: [‘es5’]

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

Целевая конфигурация Weback V5

1. для использования в среде браузера вы должны добавить target: ['web', 'es5']

2. tsconfig Файл, используемый этой сборкой Webpack, также должен быть "target": "ES5", в its compilerOptions .

3. Когда ссылаются на внешние библиотеки, как "external": {jquery: "jQuery"} вам также необходимо указать chunkFormat в выходных данных: "output": {..., "chunkFormat": "array-push"}

Ответ №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