问题描述
项目设置:
- Vuejs 3
- Webpack 4
- 通天塔
- TS
我们使用 vue-cli
创建了项目并将依赖项添加到库中。
然后我们导入了一个使用可选链的项目 (Vue Currency Input v2.0.0)。但是我们在执行 serve
脚本时遇到以下错误:
error in ./node_modules/vue-currency-input/dist/index.esm.js
Module parse Failed: Unexpected token (265:36)
You may need an appropriate loader to handle this file type,currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| getMinValue() {
| let min = this.toFloat(-Number.MAX_SAFE_INTEGER);
> if (this.options.valueRange?.min !== undefined) {
| min = Math.max(this.options.valueRange?.min,this.toFloat(-Number.MAX_SAFE_INTEGER));
| }
我读到 Webpack 4 默认不支持可选链。因此,我们为可选链接添加了 Babel 插件。这是我们的 babel.config.js
文件:
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],plugins: ["@babel/plugin-proposal-optional-chaining"],};
(但是,如果我是对的,这个插件现在默认在 babel-preset
中启用。所以这个修改可能没用 ^^)
我不明白的一件事是我们可以在 .vue
文件中使用可选链接。
解决方法
我可以使用 public string Name{get;set;}
解决这个问题,但对我来说,让 Webpack 使用 Babel 插件的唯一方法是通过 vue 中的 Webpack 选项推送 babel-loader 配置。 config.js。这是一个最小的 vue.config.js:
@babel/plugin-proposal-optional-chaining
令人惊讶的是,我不需要安装 const path = require('path');
module.exports = {
chainWebpack: config => {
config.module
.rule('supportChaining')
.test(/\.js$/)
.include
.add(path.resolve('node_modules/PROBLEM_MODULE'))
.end()
.use('babel-loader')
.loader('babel-loader')
.tap(options => ({ ...options,plugins : ['@babel/plugin-proposal-optional-chaining']
}))
.end()
}
};
和 NPM。我用@vue/cli 4.5.13 搭建的应用程序进行了通过/不通过测试,在我的情况下没有打字稿。我导入了导致我悲伤的 NPM 模块(@vime/vue-next 5.0.31 BTW),运行 @babel/plugin-proposal-optional-chaining
脚本并在包含可选链接的行上得到 serve
错误。然后我将上面的 vue.config.js 放入项目根目录并再次运行 Unexpected token
脚本,这次没有错误。
我的观点是,这个问题似乎可以在不严重污染开发环境的情况下解决。
Vue 论坛否认这个问题,声称 Vue 3 支持可选链。然而,显然不是在节点模块中。 atflick 于 2021 年 2 月 26 日在 this thread 发布的帖子帮了大忙。
,我遇到了类似的问题。我正在使用 nuxt,但我的 .babelrc
文件如下所示,并且对我有用。
{
"presets": [
["@babel/preset-env"]
],"plugins":[
["@babel/plugin-transform-runtime",{
"regenerator": true
}
]
],"env": {
"test": {
"plugins": [
["transform-regenerator",{
"regenerator": true
}],"@babel/plugin-transform-runtime"
],"presets": [
["@babel/preset-env",{
"useBuiltIns": false
}]
]
}
}
}
,
我设法通过将这些行添加到 package.json
来修复解决方案:
...
"scripts": {
"preinstall": "npx npm-force-resolutions",...
},"resolutions": {
"acorn": "8.0.1"
},...