在不同文件夹中动态导入

Posted 2023-03-07

【中文标题】在不同文件夹中动态导入

【英文标题】：Dynamic import in different folder

【发布时间】：2019-01-01 04:34:09

【问题描述】：

我在动态导入一个类时遇到了一些麻烦。

我为这个项目使用别名：

config.resolve.alias = 
    App: path.resolve('./src/'),
    Reactive: path.resolve('./app/')

我想导入一个类列表：

const classes = 
    foo: 'App/Foo',
    bar: 'App/Bar'
;
let list = ;
for(var c in classes) 
    (async (k, v, list) => 
        const m = await import(`$v`);
        list[k] = new m.default();
    )(c, classes[c], list);

此脚本在app 中调用，所有导入的类都在src 中。

错误很简单：Cannot find module 'App/Foo'。

当我检查错误日志的最后一个条目时：

var map = 
    "./OtherClass1": [
        "./app/OtherClass1.js"
    ],
    "./OtherClass1.js": [
        "./app/OtherClass1.js"
    ],
    "./OtherClass2": [
        "./app/OtherClass2.js"
    ],
    "./OtherClass2.js": [
        "./app/OtherClass2.js"
    ]
;
function webpackAsyncContext(req) 
    var ids = map[req];
    if(!ids)
        return Promise.reject(new Error("Cannot find module '" + req + "'."));
    return Promise.all(ids.slice(1).map(__webpack_require__.e)).then(function() 
        return __webpack_require__(ids[0]);
    );
;
webpackAsyncContext.keys = function webpackAsyncContextKeys() 
    return Object.keys(map);
;
webpackAsyncContext.id = "./app lazy recursive ^.*$";
module.exports = webpackAsyncContext;

所以，错误是合法的，因为map 不包含src 中的Foo 和Bar 类，只有app 中的那些。

如何指定 Webpack 以递归方式签入这两个文件夹？

但是，当我测试它时，它工作正常：

for(var c in classes) 
    (async (k, v, list) => 
        const m = await import(`$"App/Foo"`);
        list[k] = new m.default();
    )(c, classes[c], list);

【参考方案1】：

使用 react import 导入您的文件并使用 file.classname 调用它们

例如 import claases from '/src';

并使用它链接

app = classes.myfile

【讨论】：

谢谢，但src 是一个文件夹...每个类都在自己的文件中。或者我错过了什么！？

src 在某种意义上你必须使用 style.css 之类的文件