如何配置webpack+single-spa使同组织作用域下部分包为external其余内置

根因说明 #

你遇到的问题是single-spa官方提供的webpack配置模板webpack-config-single-spa-react-ts默认会将你传入的orgName对应的所有@<orgName>/*范围的包全部标记为external，你自己新增的externals配置默认是和原有配置数组合并，并不是覆盖，所以即使你没写@ORGANIZATION/compilingTool也会被默认规则匹配为外部依赖。

解决方案 #

修改你的webpack.config.js，先清除默认的组织级externals规则，再自定义精确的external匹配逻辑，代码示例如下：

const { merge }  = require("webpack-merge");
const singleSpaDefaults = require("webpack-config-single-spa-react-ts");
const { readFileSync } = require('fs')
const path = require('path')
const dotenv = require('dotenv').config( {
  path: path.join(__dirname, '.env')
} );

module.exports = (webpackConfigEnv, argv) => {
  const defaultConfig = singleSpaDefaults({
    orgName: "ORGANIZATION",
    projectName: "SOME-MICRO-FRONTEND",
    webpackConfigEnv,
    argv,
  });

  // 清除single-spa默认添加的全组织包external规则
  defaultConfig.externals = defaultConfig.externals.filter(externalRule => {
    // 过滤掉匹配@ORGANIZATION/开头所有包的规则
    if (typeof externalRule === 'string' && externalRule === '@ORGANIZATION/') return false
    if (externalRule instanceof RegExp && externalRule.test('@ORGANIZATION/any')) return false
    return true
  })

  return merge(defaultConfig, {
    externals: [
      "react", 
      "react-dom",
      // 仅列明确需要设为external的组织内包
      "@ORGANIZATION/auth",
      // 自定义匹配函数兜底，确保其他组织内包不会被误标记为external
      ({ request }, callback) => {
        // 所有@ORGANIZATION/开头的未列名包都正常打包
        if (request.startsWith('@ORGANIZATION/')) {
          return callback()
        }
        callback()
      }
    ],
    devServer: {
      port: 5400,
      https: {
        key: readFileSync( path.resolve(__dirname, path.join(process.env.CERT_PATH, process.env.CERT_KEY_FILE_NAME))),
        cert: readFileSync(path.resolve(__dirname, path.join(process.env.CERT_PATH, process.env.CERT_FILE_NAME)))
      }
    },
  });
};

验证方式 #

重新执行构建后，查看控制台输出的模块列表，@ORGANIZATION/compilingTool不会再出现在external "@ORGANIZATION/分类下，会被正常打包到你的项目产物中。该方案不需要修改任何业务代码的引入路径，也不会影响TS类型提示。

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