为什么我在使用“@babel/preset-env”和“@babel/preset-typescript”的设置中需要“@babel/plugin-proposal-optional-chaining”
Why do I need "@babel/plugin-proposal-optional-chaining" in my setup using "@babel/preset-env" and "@babel/preset-typescript"
我有一个使用 Typescript 和@babel/preset-env 的项目。与 Webpack 捆绑失败,出现此错误和以下配置。
如果我取消注释该行,强制包含 @babel/plugin-proposal-optional-chaining
,则编译工作。如果我将 Safari、Edge 或 IE 11 添加到 targets
字符串,它也会起作用。
这是为什么?
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",
],
},
},
},
],
},
};
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 将使用更新的解析器来解决此问题。
我有一个使用 Typescript 和@babel/preset-env 的项目。与 Webpack 捆绑失败,出现此错误和以下配置。
如果我取消注释该行,强制包含 @babel/plugin-proposal-optional-chaining
,则编译工作。如果我将 Safari、Edge 或 IE 11 添加到 targets
字符串,它也会起作用。
这是为什么?
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",
],
},
},
},
],
},
};
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 将使用更新的解析器来解决此问题。