当我使用可选链并将 browserslistrc 设置为 Electron 12.0.2 时无法构建 Vue 项目
Posted
技术标签:
【中文标题】当我使用可选链并将 browserslistrc 设置为 Electron 12.0.2 时无法构建 Vue 项目【英文标题】:Failed to build Vue project when I use optional chain and set browserslistrc to Electron 12.0.2 【发布时间】:2021-10-23 19:28:10 【问题描述】:当我使用可选链并在.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
,但当 Electron 12.0.2 支持时,babel 不会对其进行转译。
在您更改.browserslistrc
时构建项目之前,您需要删除node_modules/.cache
文件夹。否则更改不会生效。
有人知道是哪个加载器导致解析失败,我该如何解决?
谢谢!
【问题讨论】:
github.com/webpack/webpack/issues/10227 谢谢,虽然我还是不能解决这个问题,但至少我已经找到了原因。看来升级到 webpack5 可以解决这个问题。 问题中直接描述了解决方案...... 【参考方案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
【讨论】:
你说得对,但是好像解决不了我的问题,因为我用的框架。 如果我可以问为什么会这样? 一开始,好像vue-cli-plugin-electron-builder
我用来构建我的项目还不支持vue-cli-5。而且我没有使用 babel,因为我使用的是 Electron。而且我不想将target
更改为es2019。我宁愿放弃使用可选链。以上是关于当我使用可选链并将 browserslistrc 设置为 Electron 12.0.2 时无法构建 Vue 项目的主要内容,如果未能解决你的问题,请参考以下文章