Webpack 无法编译 ts 3.7 (Optional Chaining, Nullish Coalescing)答案

【问题标题】：Webpack cant compile ts 3.7 (Optional Chaining, Nullish Coalescing)Webpack 无法编译 ts 3.7 (Optional Chaining, Nullish Coalescing)
【发布时间】：2020-03-07 20:06:45
【问题描述】：

我尝试使用typescript 3.7 功能，例如可选链接、空值合并。但是webpack 在转换时给了我一个错误。

app: Module parse failed: Unexpected token (50:40)
app: File was processed with these loaders:
app:  * ../../../node_modules/ts-loader/index.js
app: You may need an additional loader to handle the result of these loaders.
app: | export const Layout = (props) => {
app: |     const regionsResults = useQuery(regionsQuery, { fetchPolicy: 'cache-first' });
app: >     const regions = regionsResults.data?.regions ?? [];
app: |     const userItem = useQuery(usersProfileQuery, { fetchPolicy: 'cache-first' });
app: |     const handleOnClick = (selected) => props.history.push(selected.key);
``

【问题讨论】：

您可以发布您的packages.json 文件吗？

标签： typescript webpack ts-loader

【解决方案1】：

我在tsconfig.json 文件中将目标：esnext 更改为 es2018。现在可以了。

Webpack 问题供参考：https://github.com/webpack/webpack/issues/10227

【讨论】：

这对我不起作用。 Webpack 仍然失败并出现同样的错误。
如果您使用 "foo".matchAll(/o+/g) 则不起作用，因为它是 ES2020 功能。
这很荒谬，但它确实有效！我什至不知道是怎么... 可选 channing 仅在 ES2020 之后才带给我们。 ES2018 和 ES2019 都可以正常工作，顺便说一句 ES2020 仍然崩溃。
那么是Webpack无法解析ES2020代码的问题吗？太糟糕了。
在 tsconfig.json 我添加了 "target: "ES2019" " 其中没有目标属性。这成功了。

【解决方案2】：

根据您用于转换代码的加载器，有几个可用选项

对于 ts-loader，您需要确保来自 typescript 的输出可以被 Webpack 理解。这可以通过在tsconfig.json 中将target 设置为ES2018 来实现。

对于 babel-loader，您需要确保 babel 加载

@babel/plugin-proposal-nullish-coalescing-operator
@babel/plugin-proposal-optional-chaining

插件。请注意，如果您使用preset-env，它可能会或可能不会加载这些插件，具体取决于您的targets 或browserlist（即，如果目标环境支持这些语言功能，则不会加载），在在这种情况下，保证它们包含的唯一方法是在babel.config.js 的plugins 数组中手动指定它们，

  plugins: [
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-proposal-optional-chaining',
  ],

【讨论】：

是否有参考说明 ECMAScript Webpack 可以解析哪些版本？ IE。哪里说 Webpack 可以解析 ES2018 但不能解析 ES2020？
Webpack 使用acorn 作为它的解析器（package.json），它决定了可以理解的语言特性

【解决方案3】：

如果您使用的是 vs code，可能您应该更改本地 typescript 版本 vs code 使用。

What TypeScript version is Visual Studio Code using? How to update it?

【讨论】：