为什么在使用 "@babel/preset-env" 和 "@babel/preset-typescript" 的设置中需要 "@babel/plugin-proposal-optional-chaining"?

14

我有一个项目使用Typescript和@babel/preset-env。 使用Webpack打包时出现以下错误和配置:

如果我取消注释行,强制包括@babel/plugin-proposal-optional-chaining,则编译可以正常工作。 如果我将Safari,Edge或IE 11添加到目标字符串中,它也可以正常工作。

为什么会这样呢?

ERROR in ./src/bla.ts 58:23
Module parse failed: Unexpected token (58:23)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
>       if (foo?.bar === undefined) {
// webpack.config

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: [path.join(__dirname, "src", "index.ts")],
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Test",
    }),
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css",
    }),
  ],
  resolve: {
    extensions: [".ts", ".js"],
    alias: {
      lib: path.join(__dirname, "src", "lib"),
    },
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              esModule: true,
            },
          },
          "css-loader",
        ],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ["file-loader"],
      },
      {
        test: /\.(ts|js)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              [
                "@babel/preset-env",
                {
                  modules: false,
                  corejs: 3,
                  useBuiltIns: "usage",
                  include: [
                    // "@babel/plugin-proposal-optional-chaining", // parsing fails on optional operator without this
                  ],
                  targets: "last 2 Chrome versions, last 2 Firefox versions",
                },
              ],
              "@babel/preset-typescript",
            ],
          },
        },
      },
    ],
  },
};
1个回答

19
在Webpack 4中,JS解析器不支持可选链操作符。使用targets:"last 2 Chrome versions, last 2 Firefox versions"选项时,babel-loader不会对代码进行转换(因为这些版本已经支持可选链操作符),所以Webpack无法解析它。像你提到的那样更改targets选项,其效果相当于手动包含@babel/plugin-proposal-optional-chaining,即babel-loader在Webpack解析之前转换代码。 相关问题请参考:https://github.com/webpack/webpack/issues/10227 根据该问题,Webpack 5将采用更新的解析器来解决此问题。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接