Question

问题：有没有办法告诉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);

无法解析 'FS' 在 '/ SOME_PATH / node_modules /需要-DIR'

Answer 1

这里有两个选择。

我个人没有使用此功能，但您可以使用指定here的node配置值。

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模块。

Answer 2

感谢Francisco Mateo's有关填充require-dir的其他链接，我了解了webpack添加到require的{{3}}。

这允许我在我的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());

Webpack在构建期间使用节点'fs'模块，因此浏览器获得函数

2 个答案: