6

项目设置：

  • Vuejs 3
    • 网络包 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文件中使用可选链接。

我用所有文件创建了一个沙盒：沙盒

我该如何解决这个错误？

4

3 回答 3

6

我能够使用 克服这个问题@babel/plugin-proposal-optional-chaining，但对我来说，让 Webpack 使用 Babel 插件的唯一方法是通过 vue.config.js 中的 Webpack 选项推送 babel-loader配置。这是一个最小的vue.config.js：

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()
    }
};

Surprisingly I did not need to install @babel/plugin-proposal-optional-chaining with NPM. I did a go/no-go test with an app scaffolded with @vue/cli 4.5.13, in my case without typescript. I imported the NPM module that has been causing my grief (@vime/vue-next 5.0.31 BTW), ran the serve script and got the Unexpected token error on a line containing optional chaining. I then plunked the above vue.config.js into the project root and ran the serve script again, this time with no errors.

My point is it appears this problem can be addressed without polluting one's development environment very much.

The Vue forums are in denial about this problem, claiming Vue 3 supports optional chaining. Apparently not, however, in node modules. A post in this thread by atflick on 2/26/2021 was a big help.

于 2021-06-18T23:01:10.027 回答
0

我有一个类似的问题。我正在使用 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
        }]
      ]
    }
  }
}
于 2021-06-17T09:44:57.297 回答
0

我设法通过将这些行添加到package.json：

...
"scripts": {
   "preinstall": "npx npm-force-resolutions",
   ...
},
"resolutions": {
  "acorn": "8.0.1"
},
...
于 2021-06-17T15:19:13.803 回答