Question

我正在使用Webpack，Babel和React。

我在整个React项目中都导入了类似

的内容

import Slideshow from './Slideshow.js'

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

~/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'

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

1 个答案: