reactjs动态导入与恒定路径变量答案

【问题标题】：reactjs dynamic import with constant path variablereactjs动态导入与恒定路径变量
【发布时间】：2017-12-31 11:32:39
【问题描述】：

我在使用 reactjs 动态导入时遇到了一个奇怪的问题。假设我有一个名为ComponentA 的组件，它的路径类似于myComponents/ComponentA。现在，当我像下面的代码一样动态导入它时，它会运行良好：

Promise.all(
        [
            import('myComponents/ComponentA'),
            // other imports
        ]
    ).then(....);

但是如果我在一个常量变量中定义我的组件路径，如下所示：

//before definition of my current component
const PATH = 'myComponents/ComponentA';
.
.
.
// some where in my component class
Promise.all(
    [
        import(PATH),
        // other imports
    ]
).then(....);

它会给我这样的错误：

错误：找不到模块“myComponents/ComponentA”。

有时，如果我只是在我的PATH 变量中添加一个空字符串，就可以解决问题，而有时却不能。

//before definition of my current component
const PATH = 'myComponents/ComponentA';
.
.
.
// some where in my component class
Promise.all(
    [
       import(''+PATH), // some times by adding empty string, problem would be solved
       // other imports
    ]
 ).then(....);

任何关于正在发生的事情的想法将不胜感激。

【问题讨论】：

使模块路径相对。
你有办法解决这个问题吗？
@MikeK，这是很久以前的事了，我没有找到解决方案。我记得我找到了实现主要目标的方法。不幸的是，因为它已经有很长一段时间了，现在我正在使用 vuejs，我不记得任何关于它的事情:(。

标签： javascript reactjs webpack dynamic-import

【解决方案1】：

您至少必须有一个初始文字文件夹字符串（无变量）来限制可以加载哪些模块，因为它将捆绑所有可能的文件。

这是 webpack 的一个限制。详情见https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import

真的很遗憾它除了文字之外不识别const。

【讨论】：

【解决方案2】：

也许试试这个新的 ES6 语法：

const PATH = 'myComponents/ComponentA';
Promise.all(
    [
       import(`${PATH}`), // try pass it like this
       // other imports
    ]
 ).then(....);

【讨论】：

你试过反引号了吗？我们可以尝试使用这样的空间 import(' ${PATH}') （${PATH} 周围的反引号不能在评论中这样做）
对不起，我迟到了，但这也没有用:(。