javascript - 当我使用可选链并将 browserslistrc 设置为 Electron 12.0.2 时无法构建 Vue 项目
问题描述
当我使用可选链并Electron 12.0.2
在.browserslistrc中设置时,项目将无法构建。
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
,当 Electron 12.0.2 支持它时,babel 不会转换它。并且在更改之前构建项目之前.browserslistrc
,您需要 delnode_modules/.cache
文件夹。否则更改不会生效。
任何人都知道哪个加载程序导致解析失败,我该如何解决?
谢谢!
解决方案
问题不是由任何加载程序引起的,而是由 Webpack 4.x 直接引起的(问题- Webpack 使用旧版本的 Acorn 库(用于解析代码),它不适用于可选链接或空合并语法)
如果你不使用Vue CLI,你可以升级到 Webpack 5 来解决这个问题。如果您使用的是 Vue CLI,则不能“手动”升级到 Webpack 5。您必须升级到 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
推荐阅读
- python - 如何打印此列表中的第二个元素?
- java - 如何让注解向 Java 中的类添加其他注解?
- spring - Spring Jpa 规范无法在子类中定位属性
- php - 正确使用 in_array()
- python - 为什么 Biterm 主题模型 (BTM) 返回连贯性分数 -100?
- typescript - 打字稿按顺序排列多个承诺
- r - 为什么使用 Lapply 出现服务不可用错误?
- animation - 创建具有透明背景的 SVG 动画虚线
- c++ - new 可以给出除 bad_alloc 以外的异常
- python - 如何使用python从csv到xml的单个单元格中提取多个值