如何縮短導入路徑

Question

我正在寫一個React-Redux應用程序。 我腦海中浮現出一個問題。 我經常不得不寫這樣的字符串：

import * as mainActions from '../../../main/actions/main-actions';
import {wysiwygComponent} from '../../../../components.jsx';

所以我有點討厭這些“ ../../ ..”。 有什么方法可以使組件具有全局名稱或路徑？

Answer 1

這是模塊裝載機派上用場的時候。

如果您使用Webpack 2.x，則可以像這樣修改路徑解析器配置

resolve: {
  modules: [
    path.resolve('./client'),
    path.resolve('./node_modules')
  ]
},

您在模塊中指定了許多目錄，這些目錄將

import Header from '../../components/Header';
import TransactionForm from '../TransactionForm';

成

import Header from 'components/Header';
import TransactionForm from 'TransactionForm';