How to shorten import path

Question

I'm writing a React-Redux app now. And a question appeared in my mind. I often have to write such strings like:

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

So I'm kind of sick of these "../../..". Is there any way to make components having global names or paths?

Answer 1

This is when module loaders come in handy.

If you use Webpack 2.x, you can modify the Path Resolver Configuration like this

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

You specify a number of directories in modules which will turn

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

into

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

Reference : No Relative Path