在不同文件夹中动态导入答案

【问题标题】：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);
}

【问题讨论】：

标签： reactjs webpack ecmascript-2017

【解决方案1】：

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

例如 import claases from '/src';

并使用它链接

app = classes.myfile

【讨论】：

谢谢，但src 是一个文件夹...每个类都在自己的文件中。或者我错过了什么！？
src 在某种意义上你必须使用 style.css 之类的文件