webpack 中的 Shimming 模块

Posted 2023-03-04

【中文标题】webpack 中的 Shimming 模块

【英文标题】：Shimming module in webpack

【发布时间】：2020-06-19 16:56:09

【问题描述】：

我正在构建一个带有模块tiny-worker 的打字稿项目，作为依赖项的依赖项（不是直接依赖项）。 tiny-worker 使用节点的child_process，在浏览器中不存在。

我遵循 Webpack 的 shimming guide 并将以下内容添加到我的 webpack 配置中：

plugins: [
    new webpack.ProvidePlugin(
      'tiny-worker': 'Worker'
    )
  ],

但是，当我尝试运行 webpack 时，它仍然在 tiny-worker 中抱怨 child_process

ERROR in ./node_modules/tiny-worker/lib/index.js
Module not found: Error: Can't resolve 'child_process' in '/Users/aakilfernandes/projects/pollenium/rainlily/node_modules/tiny-worker/lib'
 @ ./node_modules/tiny-worker/lib/index.js 8:11-35
 @ ./node_modules/pollenium-anemone/node/src/classes/MissiveGenerator.js
 @ ./node_modules/pollenium-anemone/node/main.js
 @ ./src/globals/anemoneClient.ts
 @ ./src/classes/BopManager.ts
 @ ./src/classes/Market.tsx
 @ ./src/globals/markets.ts
 @ ./src/app.tsx
 @ ./src/index.ts
 @ multi @babel/polyfill ./src/index.ts

如何让 Webpack 使用 window.Worker 而不是 import Worker from 'tiny-worker'

【问题讨论】：

你为什么需要 tinyworker？ tinyworker 的全部意义在于提供浏览器已经原生支持的 Node 功能（即Worker），所以与其尝试为 shim for 提供 shim，不如尝试删除 shim？

@Mike'Pomax'Kamermans 我不想要小工人。 tiny-worker 是一个依赖的依赖。我不能在不分叉第一个依赖项的情况下删除它，我不想这样做。

所以，首先问问那些产生依赖的人。 SO 是你最后的手段，不是第一个问的地方，而且 Node 库都是开源的，几乎都在 github 上，这意味着他们有一个问题跟踪器来问这个问题。那里的人更有可能确切地知道您需要做什么。

【参考方案1】：

使用module-replace-webpack-plugin解决了这个问题

https://www.npmjs.com/package/module-replace-webpack-plugin

plugins: [
    new ModuleReplaceWebpackPlugin(
      modules: [
        test: /^tiny-worker$/,
        replace: './shims/Worker.js'
      ]
    )
  ]

并创建了 shims/Worker.js，它只是重新导出 window.Worker

export default window.Worker

【讨论】：

出于好奇，这里为什么需要？环境限制或奇怪的新用例？

@trebleCode 我不经常使用 webpack，所以也许我误解了一些东西。这不是一个常见的用例吗？依赖 X 在浏览器中不起作用，所以你将它与依赖 Y 交换？