Docusaurus 2运行npm start时解析msw开发依赖报错如何解决

核心原因 #

Docusaurus默认的webpack打包规则会扫描站点目录下所有非官方默认忽略的目录，只要目录中存在引用Node.js专属依赖的文件，就会触发webpack5不再内置Node核心模块polyfill的报错。你之前将__test__重命名为__tests__生效的原因是Docusaurus默认已将__tests__目录加入排除规则，无需额外配置。

方案1：配置官方忽略规则（最推荐） #

无需修改目录命名，直接在docusaurus.config.js中添加exclude配置，指定打包时需要跳过的测试相关路径即可，是官方原生支持的规范方案：

// docusaurus.config.js
module.exports = {
  // 其余原有配置保持不变
  exclude: [
    "**/__test__/**",
    "**/*.test.js",
    "**/*.spec.js",
    "**/*.test.tsx",
    "**/__mocks__/**"
  ]
};

方案2：通过官方钩子修改webpack配置 #

如果确实需要在站点业务代码中使用需要Node polyfill的依赖，不要直接修改node_modules下的配置文件，使用Docusaurus提供的configureWebpack钩子正规修改配置：
首先安装需要的依赖和忽略loader：

npm i ignore-loader stream-http https-browserify util -D

然后修改配置文件：

// docusaurus.config.js
module.exports = {
  // 其余原有配置保持不变
  configureWebpack: () => {
    return {
      resolve: {
        fallback: {
          // 不需要的模块直接设为false跳过
          util: false,
          // 需要polyfill的模块配置对应的包
          http: require.resolve("stream-http"),
          https: require.resolve("https-browserify")
          // 其余需要的polyfill按需添加即可
        }
      },
      module: {
        rules: [
          // 配置规则直接忽略测试文件的编译
          {
            test: /\.(test|spec)\.(js|ts|jsx|tsx)$/,
            use: "ignore-loader"
          }
        ]
      }
    };
  }
};

方案3：测试文件外置 #

如果测试代码不需要和站点源代码放在同一目录，可以直接将所有测试相关文件移动到Docusaurus站点目录之外，比如和website目录平级的test目录，Docusaurus打包时完全不会扫描到外部目录的文件，从根源避免问题。

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