Webpack 在构建时使用 node 'fs' 模块，因此浏览器获取函数的结果

Posted 2023-03-08

【中文标题】Webpack 在构建时使用 node \'fs\' 模块，因此浏览器获取函数的结果

【英文标题】：Webpack use node 'fs' module during buildtime so browser gets the result of functionWebpack 在构建时使用 node 'fs' 模块，因此浏览器获取函数的结果

【发布时间】：2018-01-01 05:52:18

【问题描述】：

问题：有没有办法告诉 webpack 告诉像 fs 这样的内置模块在构建期间执行，以便浏览器得到这个函数的结果，而不是函数调用本身？

我的情况：

目前我正在使用 webpack 为浏览器开发一个应用程序。我正在尝试在我的文件中使用节点“fs”模块来要求来自其他目录的index.js 文件。例如：

plugins
├──plugin1
│   ├── index.js (simply exports an object)
│
├──plugin2
│  ├── index.js (simply exports an object)
|
├──plugin3
│  ├── index.js (simply exports an object)
|
|──index.js (want to require all index.js from each plugin directory here)

我收到一个 webpack 错误提示：Can't resolve 'fs' in somepath/node_modules/require-dir

我的文件 index.js 位于 `plugins/index.js'，它只是试图要求我的其他文件。

  //module from NPM which uses the 'fs' module ('im not explicity using it)
  const requireDir = require('require-dir');
  const allPlugins = requireDir('./plugins/'); 
  console.log(allPlugins); 

无法解析“/some_path/node_modules/require-dir”中的“fs”

【问题讨论】：

你能把你要导入的来源fs贴出来吗？

【参考方案1】：

这里有两个选择。

这个我个人没用过，不过你可以使用node配置值指定here。

node: fs: true, "mock", "empty", false

将fs 设置为上述任意值。

不要使用fs 模块。它是一个内置/原生模块，可能依赖也可能不依赖原生 V8/C++ 函数/库。请记住，webpack 通常会为 浏览器 捆绑资产。因此，您可以手动导入插件，而不是依赖插件，例如：

plugins/index.js

const plugin1 = require('./plugin1')
const plugin2 = require('./plugin2')

module.exports = 
  plugin1,
  plugin2

您也可以使用this 回答来填充require-dir 模块。

【讨论】：

感谢您将链接放到 polyfill require-dir 我在那里找到了我的解决方案 =)。每个文件的要求也有效，完全忘记了。

从 webpack 5 开始，第一个选项发生了变化，现在 resolve.fallback 属性用于填充节点库。 webpack.js.org/configuration/resolve/#resolvefallback

【参考方案2】：

感谢 Francisco Mateo's 关于 polyfilling require-dir 的附加链接，我了解了 webpack 添加到 require 的 context method。

这允许我在我的 plugins/index.js 文件中执行动态要求：

  //require all index.js files inside of /plugins directory        
  let context = require.context('.', true, /\index\.js/);
  const loadPlugins = function(ctx)
    let keys = context.keys();
    let values = keys.map(context);
    return values;
  
   //array of values from each index.js require
  console.log('loadPlugins', loadPlugins());