2

我正在将 reactjs.net 与 Webpack 一起使用，并且我正在尝试加载与我的 index.js 位于同一文件夹/子文件夹中的所有组件

//Components/index.js
var fs = require('fs');
var path = require('path');
var process = require("process");
var directory = __dirname;

function addFile(file, path, exports) {
  if (!file.endsWith(".jsx")) return exports;
  exports[file.substring(0,file.length-4)] = require(path);
  return exports;
}
function addFolder(dir, exports) {
    fs.readdir(dir, function (err, files) {
        if (err) {
            console.error("Could not list the directory.", err);
            process.exit(1);
        }

        files.forEach(function (file, index) {
            var currentPath = path.join(dir, file);
                fs.stat(dir, function (error, stat) {
                    if (error) {
                        console.error("Error stating file.", error);
                        return;
                    }
                    if (stat.isFile())
                        exports = addFile(file, currentPath, exports);
                    else if (stat.isDirectory())
                        exports = addFolder(currentPath, exports);

                });
            });
            return exports;
        });
    }
module.exports = addFolder(directory, {});

然后需要 index.js，如下所示：

//Content/client.js
var Components = require('expose-loader?Components!./../Components');

自然地，Webpack 只是将整个 addFolder 函数打包到输出中，这当然不会在客户端工作。显然我想在 index.js 中执行代码，所以现在我很好奇如何在不手动声明的情况下加载我的所有组件并将它们全局公开在 Components 对象中，同时使用文件名作为标识符。

4

0 回答 0