Vue-Electron项目集成mssql遇Unexpected Token编译错误求助

问题描述 #

在Vue-Electron项目中通过npm安装mssql后，运行项目出现编译失败，报错核心信息为：

• connection-pool.js中??运算符无法解析
• request.js中?.运算符无法解析
  webpack提示缺少对应loader处理这些语法。

解决方案 #

方案1：配置babel转译mssql包 #

1. 安装必要的babel插件：

npm install @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator --save-dev

2. 修改项目根目录的vue.config.js（适用于使用vue-cli-plugin-electron-builder的项目）：

module.exports = {
  pluginOptions: {
    electronBuilder: {
      // 指定让babel转译mssql包
      transpileDependencies: ['mssql']
    }
  },
  chainWebpack: config => {
    config.module
      .rule('js')
      .include.add(/node_modules\/mssql/)
      .end()
      .use('babel-loader')
      .loader('babel-loader')
      .options({
        plugins: [
          '@babel/plugin-proposal-optional-chaining',
          '@babel/plugin-proposal-nullish-coalescing-operator'
        ]
      })
  }
}

方案2：降级mssql版本 #

如果不想修改配置，可以安装不依赖ES2020新语法的旧版本mssql：

npm uninstall mssql && npm install mssql@7.3.0 --save

原因说明 #

最新版mssql使用了ES2020新增的可选链（?.）和空值合并运算符（??），而Vue-Electron默认的webpack配置不会转译node_modules目录下的代码，导致这些语法无法被现有loader解析，从而触发编译错误。

内容的提问来源于stack exchange，提问作者Christian