JavaScript - babel-preset-env 不为 IE11 转译箭头函数 [英] JavaScript - babel-preset-env not transpiling arrow functions for IE11

问题描述

我很难将 Babel 配置为转译 IE11 可以理解的代码，特别是箭头函数.使用我的配置运行 npx webpack --mode=development 不会转换我代码中的箭头函数:在生成的代码的 eval() 语句中，我可以看到所有实例都未转换.

I'm having a hard time trying to configure Babel to transpile code that IE11 can understand, specifically arrow functions. Running npx webpack --mode=development with my configuration doesn't convert the arrow functions in my code: in the eval() statement in the generated code, I can see that all the instances have gone unconverted.

与这个问题中引用的控制台输出不同，没有提及在我的使用目标"或使用预设"中.我不知道这是否与使用 npx webpack 而不是 npm run build 有关系.

Unlike in the console output quoted in this question, there's no mention in mine of "Using targets" or "Using presets". Whether that's something to do with using npx webpack rather than npm run build I don't know.

这是我的 package.json 的 Babel 部分:

Here's the Babel part of my 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"
        ]
      }
    }
  }
}

我的 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 docs 以及非常简陋的 babel-plugin-transform-es2015-arrow-functions 文档.这个非常相似的问题的答案(不接受答案)根本不提及该插件，有人建议使用 polyfill，这似乎涉及在您的实际代码中而不是在此阶段加载库?

I arrived at this point from reading other questions here about Babel configurations, and the babel-preset-env docs and also the very skimpy babel-plugin-transform-es2015-arrow-functions docs. The answers to this very similar question (no accepted answer) don't mention that plugin at all, and one suggests using a polyfill, which seems to involve loading a library in your actual code rather than at this stage?

我对使用 Webpack 还是很陌生，不明白 "env"(在很多问题中都提到)和 "@ 之间的区别是什么babel/preset-env".或者真的是前者的一般含义；如果您在文档导航中单击env"，它会将您带到 @babel/preset-env 的页面.

I'm very new to working with Webpack in general and don't understand what the difference is between "env" (which gets mentioned in a lot of questions) and "@babel/preset-env". Or really what the former implies in general; if you click on "env" in the docs navigation, it takes you to the page for @babel/preset-env.

我做错了什么?

推荐答案

Babel 本身是一个转换库，但它本身不会集成到任何特定工具中.要在 Webpack 中使用 Babel，您需要安装 babel-loader 打包并在您的 Webpack 配置中使用类似

Babel itself is a transformation library, but on its own it will not integrate into any specific tooling. To use Babel with Webpack, you'll want to install the babel-loader package and configure it in your Webpack config using something along the lines of

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

这篇关于JavaScript - babel-preset-env 不为 IE11 转译箭头函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！