咨询无网络环境下SingleSpa微前端独立开发模式的依赖替换方案

一、替换index.html中的CDN资源引用 #

把所有CDN加载的脚本和import-map中的依赖地址，替换为本地node_modules内的对应文件路径：

1. 替换脚本引用 #

将原来的CDN脚本标签：

<script src="https://cdn.jsdelivr.net/npm/systemjs/dist/system.js"></script>
<script src="https://cdn.jsdelivr.net/npm/import-map-overrides/dist/import-map-overrides.js"></script>
<!-- 其他CDN脚本如fetch.umd.js、polyfill.min.js等 -->

替换为本地路径：

<script src="/node_modules/systemjs/dist/system.js"></script>
<script src="/node_modules/import-map-overrides/dist/import-map-overrides.js"></script>
<script src="/node_modules/whatwg-fetch/dist/fetch.umd.js"></script>
<script src="/node_modules/core-js-bundle/minified/polyfill.min.js"></script>
<!-- 其余脚本同理，根据node_modules内的实际路径调整 -->

2. 修改import-map配置 #

将imports中的CDN依赖替换为本地路径：

"imports": {
  "single-spa": "/node_modules/single-spa/lib/system/single-spa.dev.js",
  "@corp/myapp": "/corp-myapp.js"
}

二、配置Webpack Dev Server暴露node_modules目录 #

Webpack Dev Server默认不会对外暴露node_modules，需要在webpack.config.js中配置静态资源目录，让服务器能响应本地依赖的请求：

Webpack 5 配置 #

const path = require('path');

module.exports = {
  // ...其他webpack配置
  devServer: {
    static: [
      {
        directory: path.join(__dirname, 'node_modules'),
        publicPath: '/node_modules'
      },
      {
        directory: path.join(__dirname, 'public'), // 你的项目静态资源目录
        publicPath: '/'
      }
    ],
    port: 8080, // 自定义端口
    hot: true
  }
};

Webpack 4 配置 #

const path = require('path');

module.exports = {
  // ...其他webpack配置
  devServer: {
    contentBase: [
      path.join(__dirname, 'node_modules'),
      path.join(__dirname, 'public')
    ],
    port: 8080,
    hot: true
  }
};

三、配置Webpack externals避免重复打包（推荐） #

在webpack.config.js中添加externals配置，告诉Webpack这些依赖由外部环境提供，不需要打包进项目bundle：

module.exports = {
  // ...其他配置
  externals: {
    'single-spa': 'single-spa',
    // 若项目依赖react、react-dom等，也可添加进来
    // 'react': 'React',
    // 'react-dom': 'ReactDOM'
  }
};

四、验证配置效果 #

启动Webpack Dev Server后，打开浏览器控制台的网络面板，确认所有依赖资源均从http://localhost:8080/node_modules/路径加载，无CDN请求即可。若出现404错误，检查：

• node_modules内是否存在对应依赖包
• 脚本路径是否与实际文件位置匹配
• Webpack Dev Server的静态目录配置是否正确

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