如何缩短导入路径

Question

我现在正在编写React-Redux应用程序。我脑子里出现了一个问题。我经常要编写如下字符串：

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

所以我有点厌恶这些＆＃34; ../../.."。有没有办法让组件具有全局名称或路径？

Answer 1

这是module loaders派上用场的时候。

如果您使用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';

参考：No Relative Path