导入具有可选链接的模块时出错

Question

项目设置：

• Vuejs 3
  • 网页包 4
  • 巴别塔
  • TS

我们使用创建了项目vue-cli并将依赖项添加到库中。

然后我们导入了一个使用可选链的项目（ VueCurrencyInputv2.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"],
};

（但是，如果我是对的，这个插件现在在 .so 中默认启用babel-preset。所以这个修改可能没用^^）

我不明白的一件事是我们可以在.vue文件中使用可选链接。

我创建了一个包含所有文件的沙盒：SandBox

我该如何解决这个错误？

Answer 1

我能够使用 解决这个问题@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()
    }
};

注意，将上面的“PROBLEM_MODULE”替换为出现问题的模块。

令人惊讶的是我不需要使用NPM安装@babel/plugin-proposal-optional-chaining。我使用 @vue/cli 4.5.13 搭建的应用程序进行了 go/no-go 测试，在我的例子中没有 typescript。我导入了导致我悲伤的 NPM 模块（@vime/vue-next 5.0.31 BTW），运行脚本并在包含可选链接的行上serve收到错误。Unexpected token然后，我将上面的vue.config.js插入项目根目录并serve再次运行脚本，这次没有错误。

我的观点是，这个问题似乎可以在不严重污染开发环境的情况下得到解决。

Vue 论坛否认这个问题，声称 Vue 3 支持可选链。然而，显然不在节点模块中。atflick 于 2021 年 2 月 26 日在该主题中发布的帖子提供了很大帮助。