当我使用可选链并将 browserslistrc 设置为 Electron 12.0.2 时无法构建 Vue 项目

Question

当我使用可选链并在 .browserslistrc 中设置 Electron 12.0.2 时，项目将无法构建。

 in ./src/views/reader/reader.ts

Module parse failed: Unexpected token (15:29)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/ts-loader/index.js
 * ./node_modules/eslint-loader/index.js
You may need an additional loader to handle the result of these loaders.
|     if (imgElement.length > 0) {
|         console.log('imgElement', imgElement);
>         return imgElement[0]?.classList;
|     }
|     return null;

 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/ts-loader??ref--13-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/views/reader/reader-container.vue?vue&type=script&lang=ts&setup=true 4:0-43 121:12-27
 @ ./src/views/reader/reader-container.vue?vue&type=script&lang=ts&setup=true
 @ ./src/views/reader/reader-container.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/ts-loader??ref--13-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/reader.vue?vue&type=script&lang=ts
 @ ./src/reader.vue?vue&type=script&lang=ts
 @ ./src/reader.vue
 @ ./src/reader-main.ts
 @ multi (webpack)-dev-server/client?http://192.168.1.3:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/reader-main.ts

在reader.ts

export function getImgFromPoint(container: HTMLDivElement, selector: string) {
  const imgElement = document
    .elementsFromPoint(container.getBoundingClientRect().width / 2, 100)
    .filter((e) => {
      return e.matches(selector);
    });
  if (imgElement.length > 0) {
    console.log('imgElement', imgElement);
    return imgElement[0]?.classList;
  }
  return null;
}

当我将.browserslistrc设置为

时

> 1%
last 2 versions
not dead

项目可以构建成功。

我认为某些加载程序无法解析 ?. 语法，因此构建失败。当我将 .browserslistrc 设置为

> 1%
last 2 versions
not dead

我认为 babel 会转译 ?.，因此加载程序可以处理它。当我将 .browserslistrc 设置为 Electron 12.0.2 时，babel 不会转译它，而 Electron 12.0.2 支持它。在更改 .browserslistrc 构建项目之前，您需要删除 node_modules/.cache 文件夹。否则更改不会生效。

有人知道哪个加载器导致解析失败吗？我该如何解决？

谢谢！

Answer 1

问题不是由任何加载器引起的，而是由 Webpack 直接引起的 4.x（issue - Webpack 使用旧版本的 Acorn 库（用于解析代码），它不适用于可选的链接或空合并语法）

如果您不使用 Vue CLI，您可以升级到 Webpack 5 来解决这个问题。如果您使用的是 Vue CLI，则“手动”升级到 Webpack 5 不是一种选择。您必须 upgrade 到 Vue CLI 5（目前处于测试阶段）

如果你想（或不得不）继续使用 Webpack 4，你有两个选择：

配置 Babel 以使用 @babel/plugin-proposal-optional-chaining 和 @babel/plugin-proposal-nullish-coalescing-operator 插件

// babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
  plugins: [
    '@babel/plugin-proposal-nullish-coalescing-operator', 
    '@babel/plugin-proposal-optional-chaining'
  ],
}

如果您使用的是 TypeScript，请不要升级到版本 3.8 或将编译器选项 target 设置为 es2019

当我使用可选链并将 browserslistrc 设置为 Electron 12.0.2 时无法构建 Vue 项目

Failed to build Vue project when I use optional chain and set browserslistrc to Electron 12.0.2

javascript

ecmascript-6

webpack

vue.js

babeljs