webpack 动态module加载器按要求

IT技术 javascript node.js webpack require webpack-2
2021-01-30 16:55:42

好的，我已经搜索了高低，但无法可靠地确定 webpack 是否可行。

https://github.com/webpack/webpack/tree/master/examples/require.context 似乎表明可以将字符串传递给函数并加载module...

但我的尝试不起作用：webpack.config.js

'use strict';
let webpack     = require('webpack'),
    jsonLoader  = require("json-loader"),
    path        = require("path"),
    fs          = require('fs'),
    nodeModules = {};

fs.readdirSync('node_modules')
    .filter(function(x) {
        return ['.bin'].indexOf(x) === -1;
    })
    .forEach(function(mod) {
        nodeModules[mod] = 'commonjs ' + mod;
    });


let PATHS = {
    app: __dirname + '/src'
};

module.exports = {
    context: PATHS.app,
    entry: {
        app: PATHS.app+'/server.js'
    },
    target: 'node',
    output: {
        path: PATHS.app,
        filename: '../build/server.js'
    },
    externals: nodeModules,
    performance: {
        hints: "warning"
    },
    plugins: [
        jsonLoader
    ],
    resolve: {
        modules: [
            './node_modules',
            path.resolve(__dirname),
            path.resolve(__dirname + "/src"),
            path.resolve('./config')
        ]
    },
    node: {
        fs: "empty"
    }
};

服务器.js

let _ = require('lodash');
let modules = [ "modules/test" ];

require( 'modules/test' )();

_.map( modules, function( module ){
    require( module );
});

modules/ 中的module名为 test.js

module.exports = () => {
    console.log('hello world');
};

但结果总是一样的...... pm2 日志只是说 hello world 静态需求......但对于同一module的动态加载

错误：找不到module“。”

我想要做的就是循环遍历module的路径数组，然后加载...

3个回答

您不能使用变量作为require. Webpack 需要知道在编译时捆绑哪些文件。由于它不进行程序流分析，因此无法知道您传递给函数的内容。在那种情况下它可能很明显，但是这可能会使用用户输入来决定需要哪个module，并且 webpack 不可能知道在编译时包含哪些module，因此 webpack 不允许这样做。

您发布的示例有点不同。您可以使用require连接的字符串。例如：

require(`./src/${moduleName}/test`);

webpack 需要在 bundle 中包含哪些module？变量moduleName可以是任何东西，因此在编译时不知道确切的module。相反，它包括可能与上述表达式匹配的所有module。假设目录结构如下：

src
├─ one
│   └─ test.js
├─ two
│   ├─ subdir
│   │   └─ test.js
│   └─ test.js
└─ three
    └─ test.js

所有这些test.js文件都将包含在包中，因为moduleName可能是one或嵌套的two/subdir.

更多详细信息请参见官方文档中的require 和表达式。

您不能循环遍历数组并导入数组的每个module，上述例外情况是通过连接字符串，但这会导致包含所有可能的module，通常应该避免。

有没有办法让 webpack 捆绑 package.json 中的每个module？（当然，除非需要其中之一，否则它不会全部加载到客户端浏览器上）
2021-03-26 16:55:42
如果在 Webpack 文档中清楚地解释了这一点就好了。
2021-03-28 16:55:42
非常感谢，感谢您澄清这一点，尤其是对根本原因的详细描述。对于我应该如何加载我的文件以按照一般做法进行显示，您有什么建议吗？我对 React 编程和任何一般的严肃编程都很陌生，所以对适合什么样的设计模式有一个粗略的想法会很棒，所以我可以进一步研究它们。谢谢你。
2021-03-29 16:55:42
2021-04-01 16:55:42
基本上起始路径不能是动态的！！例如，这仍然有效： require('./src/' + moduleName );。请阅读随附的require 和表达式文档。
2021-04-03 16:55:42

我在电子环境中遇到了这个问题。我的用例能够require在 IDE 之类的应用程序中动态创建文件。我想使用电子require，它基本上是一个 NodeJS 通用module加载器。经过一番折腾，我找到了一个使用 webpacknoParsemodule配置的解决方案。

首先创建一个将被 webpack 解析器忽略的module：

// file: native-require.js
// webpack replaces calls to `require()` from within a bundle. This module
// is not parsed by webpack and exports the real `require`
// NOTE: since the module is unparsed, do not use es6 exports
module.exports = require

在我的 webpack 配置中，在 下module，指示捆绑器不要解析此module：

{
  module: {
    noParse: /\/native-require.js$/,
  }
}

最后，在您想要访问原始需求的任何包中：

import nativeRequire from './native-require'
const someModule = nativeRequire('/some/module.js') // dynamic imports
这个解决方案对我来说效果很好，有一些调整： 1. 要访问，我必须使用：import nativeRequire = require('./native-require')。它抱怨该module没有默认导出。2. 要导出全局要求，在 native-require.js 中我必须使用：module.exports = require. 这是因为global.require对我来说是未定义的（Node 10.13，webpack 4.29）
2021-03-31 16:55:42

有点晚了......但是......因为你捆绑到target: 'node'，有一个动态需要module的解决方法，并绕过 “包括所有可能module的影响”。

解决方案来自：

在不解析或捆绑目标module的情况下在节点目标上使用动态需求 · 问题 #4175 · webpack/webpack

引自那条评论：

const requireFunc = typeof __webpack_require__ === "function" ? __non_webpack_require__ : require;
const foo = requireFunc(moduleName);

捆绑到：

const requireFunc = true ? require : require;
const foo = requireFunc(moduleName);
其它你可能感兴趣的问题
上一篇将 Hsl 转换为 rgb 和十六进制 下一篇如何使用 HTML/CSS 实现等高的 div（并排放置）？