Webpack 无法编译 ts 3.7（可选链接、空值合并）

Question

我尝试使用 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);
``

Answer 1

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

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

Answer 2

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

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

Answer 3

根据您用来转换代码的加载程序，有多种选择

对于ts-loader，您需要确保 Webpack 可以理解 typescript 的输出。这可以通过在 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',
  ],

Webpack 无法编译 ts 3.7（可选链接、空值合并）

Webpack cant compile ts 3.7 (Optional Chaining, Nullish Coalescing)

typescript

webpack

ts-loader