如何在Node.js（Webpack）项目中使用@microsoft/signalR并解决构建报错？

问题描述 #

基于Node.js（Webpack 4.47）开发POC应用时，使用Microsoft SignalR遇到以下问题：

• 通过<head>标签引入SignalR CDN脚本可正常运行
• 安装@microsoft/signalR模块后，用ES6 import方式编写连接代码：

  import { HubConnectionBuilder, HttpTransportType, LogLevel } from '@microsoft/signalr'
  const connection = new HubConnectionBuilder().withUrl('xxxx',{ transport: HttpTransportType.LongPolling}).build(); 
  

  浏览器运行时抛出构建错误：

  Module build failed (from ./node_modules/babel-loader/lib/index.js)
  SyntaxError: .../node_modules/@microsoft/signalR/dist/esm/FetchHttpClient.js: Unexpected token
  报错位置为对象展开语法处：

  headers: {
    X-Requested-With: 'XMLHttpRequest',
    ...request.headers,
    ^
  },
  

当前Webpack Loader配置：

module: {
  rules: [
     {
       test: /\.js$/,
       use: [{
         loader: 'babel-loader',
         options: {
            preset: ['env'],
            plugins: [require('bable-plugin-syntax-dynamix-import')]
         }
       }]
     }
  ]
}

原因分析 #

报错源于两点：

1. Babel配置存在拼写错误，且缺少处理对象展开语法的插件
2. Webpack默认不转译node_modules目录下的代码，而@microsoft/signalR的ES模块代码包含未转译的ES6+语法

解决步骤 #

1. 修正Babel配置拼写错误 #

配置中有两处低级拼写错误，先修正：

• preset → presets（复数形式）
• bable-plugin-syntax-dynamix-import → babel-plugin-syntax-dynamic-import（修正拼写错误：bable→babel、dynamix→dynamic）

2. 配置Babel转译@microsoft/signalR模块 #

修改Webpack规则，让Babel处理@microsoft/signalR的代码，同时添加对象展开语法插件：

module: {
  rules: [
     {
       test: /\.js$/,
       // 排除node_modules，但特例包含@microsoft/signalR
       exclude: /node_modules(?!\/@microsoft\/signalR)/,
       use: [{
         loader: 'babel-loader',
         options: {
            // 建议使用新版@babel/preset-env替代旧版babel-preset-env
            presets: ['@babel/preset-env'],
            plugins: [
              '@babel/plugin-proposal-object-rest-spread',
              'babel-plugin-syntax-dynamic-import'
            ]
         }
       }]
     }
  ]
}

3. 安装必要的Babel依赖 #

如果之前使用旧版Babel包，需替换为新版@babel系列依赖：

# 卸载旧依赖（如有）
npm uninstall babel-preset-env babel-plugin-syntax-dynamic-import
# 安装新版依赖
npm install @babel/core @babel/preset-env @babel/plugin-proposal-object-rest-spread babel-loader babel-plugin-syntax-dynamic-import --save-dev

4. 验证修复 #

执行构建命令（如npm run build或npm start），确认构建错误消失，SignalR连接功能正常。

内容的提问来源于stack exchange，提问作者P.K.