Webpack 无法编译 TypeScript 3.7（包含可选链和空值合并）

Question

我尝试使用typescript 3.7的可选链和 nullish 合并等特性。但是在转译时，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);
``

- Edgaras Karka

---

你能否发布你的 packages.json 文件？ - Carlos Crespo

Answer 1

我在tsconfig.json文件中将目标更改为es2018，现在它可以正常工作了。

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

- Edgaras Karka

---

这对我没有用。Webpack仍然出现相同的错误。 - Alejandro Corredor

如果您使用的是 ES2020 功能，则无法使用 "foo".matchAll(/o+/g)。 - Jason Schilling

这很荒谬，但它确实有效！我甚至无法弄清楚它是如何做到的... 可选链自 ES2020 才为我们带来。ES2018 和 ES2019 都能正常工作，顺便说一句，ES2020 仍然会崩溃。 - Max Travis

在tsconfig.json中，我添加了“target: "ES2019"”，其中没有目标属性。这样就解决了问题。 - jrsmolley

我以为esnext总是针对最新的版本？看来不是这样。 - Miguel Stevens

Answer 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',
  ],

- aryzing

---

有没有参考资料说明 Webpack 可以解析哪些版本的 ECMAScript？也就是说，Webpack 可以解析 ES2018 但不能解析 ES2020，这在哪里有说明？ - Timmmm

Webpack 使用 acorn 作为其解析器 (package.json)，这决定了它所能理解的语言特性。 - aryzing

我正在使用 babel-loader。我正确地将这两个插件放在文件中，因为这些语法对我的文件有效。但是对于 node_modules 文件则失败了。 - addlistener

Answer 3

我在一个旧的Vue.js 2网页应用程序中遇到了相同的问题。

我必须做以下操作：

npm install --save-dev @babel/plugin-transform-nullish-coalescing-operator
npm install --save-dev @babel/plugin-transform-optional-chaining

并修改我的 babel.config.js：

module.exports = {
    presets: ["@vue/app"],
    plugins: ["@babel/plugin-transform-nullish-coalescing-operator", "@babel/plugin-transform-optional-chaining"],
};

请参见：

• https://babeljs.io/docs/babel-plugin-transform-nullish-coalescing-operator#installation
• https://babeljs.io/docs/babel-plugin-transform-optional-chaining#installation

- matteogll

Answer 4

如果您正在使用 VS Code，可能需要更改 VS Code 使用的本地 TypeScript 版本。 Visual Studio Code 使用哪个 TypeScript 版本？如何更新它？

- Alex Hyriavets