JavaScript - babel-preset-env не передает функции стрелки для IE11

Question

Я с трудом пытаюсь настроить Babel для передачи кода, понятного IE11, в частности, функций стрелок.Запуск npx webpack --mode=development с моей конфигурацией не преобразует функции стрелок в моем коде: в выражении eval() в сгенерированном коде я вижу, что все экземпляры не преобразованы.

В отличие от консоливывод указан в в этом вопросе , в моей статье нет упоминаний о «Использовании целей» или «Использование предустановок».Является ли это чем-то, связанным с использованием npx webpack, а не npm run build, я не знаю.

Вот вавилонская часть моего package.json:

{
  // name, version etc. snipped
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-transform-async-to-generator": "^7.1.0",
    "@babel/plugin-transform-es2015-arrow-functions": "^6.22.0",
    "@babel/plugin-transform-es2015-modules-commonjs": "^6.26.2",
    "@babel/preset-env": "^7.1.0",
    "ajv": "^6.5.4",
    "copy-webpack-plugin": "^4.5.2",
    "eslint-plugin-jest": "^21.24.1",
    "jest": "^23.6.0",
    "jest-dom": "^2.0.4",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2"
  },
  "babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "ie": "11"
          }
        }
      ]
    ],
    "env": {
      "development": {
        "plugins": [
          "transform-es2015-arrow-functions",
          "transform-es2015-modules-commonjs"
        ]
      },
      "test": {
        "plugins": [
          "transform-es2015-arrow-functions",
          "transform-es2015-modules-commonjs"
        ]
      }
    }
  }
}

My webpack.config.jsвыглядит так:

const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");

module.exports = {
    entry: "./src/thing.js",
    optimization: {
        minimize: false
    },
    output: {
        filename: "thing.js",
        path: path.resolve(__dirname, "dist")
    },
    plugins: [
        new CopyWebpackPlugin([
            // snipped
        ])
    ]
};

Я пришел к этому моменту, прочитав другие вопросы о конфигурации Babel и документах babel-preset-env , а также очень скудном babel-plugin-transform-es2015-arrow-functions docs .Ответы на на этот очень похожий вопрос (нет принятого ответа) вообще не упоминают этот плагин, и каждый предлагает использовать полизаполнение, которое, похоже, предполагает загрузку библиотеки в вашем реальном коде, а не на данном этапе?

Я очень новичок в работе с Webpack в целом и не понимаю, в чем разница между "env" (что упоминается во многих вопросах) и "@babel/preset-env".Или действительно то, что первое подразумевает в целом;если вы нажмете "env" в навигации по документам, вы попадете на страницу для @babel/preset-env.

Что я делаю не так?

Answer 1

В дополнение к ответу loganfsmyth, который решил эту проблему, я хочу отметить, что для всех других начинающих читателей это облегчило мне жизнь, переместив конфигурацию Babel из package.json в .babelrc.

Я также обнаружил, что нужные мне плагины, такие как упомянутый выше, babel-plugin-transform-es2015-arrow-functions, имеют более новые версии с другой схемой именования - для этого примера @babel/plugin-transform-arrow-functions.Страницы документации для старых версий не упоминают об этом.

module часть моего webpack.config.js теперь выглядит следующим образом:

module: {
    rules: [
        {
            test: /\.m?js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: ["@babel/preset-env"],
                    plugins: [
                        require("@babel/plugin-transform-async-to-generator"),
                        require("@babel/plugin-transform-arrow-functions"),
                        require("@babel/plugin-transform-modules-commonjs")
                    ]
                }
            }
        }
    ]
}

My .babelrc выглядит следующим образом:

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "ie": "11"
                },
                "useBuiltIns": "entry"
            }
        ]
    ],
    "plugins": [
        "@babel/transform-async-to-generator",
        "@babel/transform-arrow-functions",
        "@babel/transform-modules-commonjs"
    ],
    "env": {
        "development": {},
        "test": {},
        "production": {}
    }
}

Answer 2

У меня была такая же проблема.Оказалось, что не весь мой код имел функции стрелок, а только одну библиотеку.Я вошел в свой встроенный пакет и искал код с функциями стрелок (=>).Затем я искал и копировал некоторые уникальные имена вокруг него и сумел найти его источник во всех файлах в node_modules.В моем случае оказалось, что код с функциями стрелок был получен из polyfill с именем unfetch.Я не уверен, почему он не был передан плагином, но я переключил его на "whatwg-fetch", и он работал просто отлично - в связке больше нет функций стрелок.Вы можете попробовать ту же технику, чтобы выяснить, что вызывает ее в вашем случае.

Answer 3

Babel сама по себе является библиотекой преобразований, но сама по себе она не будет интегрирована в какой-либо конкретный инструментарий.Чтобы использовать Babel с Webpack, вам нужно установить пакет babel-loader и настроить его в конфигурации Webpack, используя что-то вроде

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