Question

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

与this question中引用的控制台输出不同，在我的文档中没有提及“使用目标”或“使用预设”。我不知道这与使用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"
        ]
      }
    }
  }
}

我的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 docs的其他问题得出的。 this very similar question的答案（没有被接受的答案）根本没有提到该插件，有人建议使用polyfill，这似乎涉及在您的实际代码中而不是在当前阶段加载库？

我对使用Webpack刚起步很陌生，不了解"env"（在很多问题中都提到了）和"@babel/preset-env"之间的区别。或者说前者实际上暗示了什么；如果您在文档导航中单击“ env”，它将带您到@babel/preset-env的页面。

我在做什么错了？

Answer 1

如果您使用的是 Webpack 5，则需要在 ouput.environment 配置中指定要转译的功能，如下所述：https://webpack.js.org/configuration/output/#outputenvironment。

output: {
  // ... other configs
  environment: {
    arrowFunction: false,
    bigIntLiteral: false,
    const: false,
    destructuring: false,
    dynamicImport: false,
    forOf: false,
    module: false,
  },
}

Answer 2

Babel本身是一个转换库，但它本身不会集成到任何特定工具中。要将Babel与Webpack一起使用，您将需要安装babel-loader软件包并在Webpack配置中使用类似以下内容的

queryset = Model1.objects.filter(field1='bar', model2s__field3='foo')

Answer 3

除了解决问题的loganfsmyth的答案外，我想指出的是，任何其他初学者阅读此书后，通过将Babel配置从package.json移到.babelrc，使自己的生活更轻松

我还发现我需要的插件（例如我上面提到的插件babel-plugin-transform-es2015-arrow-functions）具有较新的版本，具有不同的命名方案-例如，@babel/plugin-transform-arrow-functions。旧版本的文档页面没有提及。

我的module的{{1}}部分现在看起来像：

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") ] } } } ] }如下：

.babelrc

Answer 4

我有同样的问题。原来并不是我所有的代码都具有箭头功能，而是只有一个库。我进入了内置的包，并使用箭头功能（=>）搜索代码。然后，我搜索并复制了一些看起来独特的名称，并设法找到了它的来源，并在node_modules中的所有文件中搜索了它。以我为例，带有箭头功能的代码来自名为unfetch的提取polyfill。我不确定为什么插件没有翻译它，但我将其切换为“ whatwg-fetch”，并且效果很好-捆绑中不再包含箭头功能。您可以尝试使用相同的技术来发现导致这种情况的原因。

JavaScript-babel-preset-env不会为IE11转换箭头功能

4 个答案: