如何让Shopware应用编译后的JavaScript正确包含Node模块？

1. 修改webpack配置，取消依赖的外部标记 #

Shopware默认会把socket.io-client（前端需用这个包，socket.io是服务端包）这类第三方依赖设为外部依赖，不会打包进你的应用dist文件。得调整应用的webpack配置，强制将其打包进自身资源：

• 找到应用内的Resources/app/storefront/build/webpack.config.js，修改externals配置，移除socket.io-client的外部依赖标记：

module.exports = () => ({
  externals: {
    // 删除原本类似 'socket.io-client': 'window.io' 的配置项
  },
  // 保留其他原有配置
});

如果原本没有externals项，直接跳过即可。

2. 代码中正确导入依赖 #

不要依赖全局变量，直接在业务代码里导入socket.io-client：

import { io } from 'socket.io-client';

// 示例使用代码
const socket = io('你的服务端地址');

3. 用应用专属的build命令打包 #

bin/build-storefront.sh是全局构建脚本，会把依赖合并到Shopware主JS文件中。要让依赖跟随你的应用分发，需在应用的package.json中添加单独的build命令：

{
  "scripts": {
    "build": "webpack --config Resources/app/storefront/build/webpack.config.js --mode production"
  }
}

之后运行npm run build，依赖就会被打包进你的应用dist文件夹内的JS文件里。

4. 确认资源注册配置正确 #

在应用的src/Resources/config/packages/storefront.yaml中，确保正确注册编译后的JS文件，让Shopware加载你应用自身的资源：

storefront:
  assets:
    js:
      - '@你的应用名称/storefront/dist/js/app.js'

关于类似NEXT-15942问题的说明 #

这类问题本质是Shopware默认将常见第三方依赖标记为外部依赖，导致应用无法携带自身的依赖版本。通过上述修改webpack配置和构建方式，可绕过这个默认行为，将所需依赖打包进应用自身的资源文件，无需依赖Shopware主应用的全局变量。

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