React：从动态位置导入本地文件

Question

我正在使用 webpack、babel 和 react。

我在整个 react 项目中都有导入，看起来像

import Slideshow from './Slideshow.js'

我有多个使用完全相同的组件的 react 项目，因此我试图将我重用的标准组件移动到标准目录中，而不是同一文件的多个版本，例如

~/StandardComponents/Slideshow.js

为了减少目录更改时我必须编辑代码的位置数量，我想创建一个变量并像这样导入我的模块

const standard = '~/StandardComponents'
import Slideshow from standard + '/Slideshow.js'

---

看起来一个选项可能是setting my node_path within package.json?

我对此一无所知，但我尝试通过从

更改我的 package.json

"scripts": {
    "start": "webpack-dev-server --inline",
    "build": "webpack"
  }

"scripts": {
    "dev": "NODE_PATH=./:/Users/Sam/Documents/Projects_and_Code/Code_Projects/Standard",
    "start": "webpack-dev-server --inline",
    "build": "webpack"
  }

我查看的其他一些解决方案并没有真正为我提供足够的细节。 correct solution on this question 是

System.import('./utils/' + variableName).then(function(m) {
  console.log(m);
});

而且我真的不知道“then”是什么意思，也不知道 then 里面的函数以及为什么他们在那里有 console.log(m) （我猜 console.log(m) 只是一些基本代码的示例，但为什么呢？它的示例是什么？）

---

我非常喜欢一个解决方案，它只是在我的 webpack.config.js 或 package.json 中添加一些类似的东西

SearchOnPath: 'currentDir:~/Standards'

or

Standards = '~/Standards' 

Answer 1

您可以在 webpack 中配置 alias 以实现 https://webpack.js.org/configuration/resolve/。

例如

resolve: {
    alias: {
      StandardComponents: <path_to_your_standard_components>,
    }
  }

在你的代码中

import Slideshow from 'StandardComponents/Slideshow.js'