Assistant Root Path Import Assistant

Question

In real life, because I need to import a helper or component, I have this problem

import approxPerDay from '../../../utils/approxPerDay.js'
import otherstuff from '../components/otherstuff'

and in another file it could be import approxPerDay from '../utils/approxPerDay.js'

It is very complicated and time consuming; it is a relative path. Is there any npm or helper that can solve this problem?

Answer 1

It depends on your module. For Webpack 2you can do something like this:

module.exports = {
    ...

    resolve: {
        modules: [
            'node_modules',
            path.resolve(__dirname + '/src')
        ],
        alias: {
            src: path.resolve(__dirname + '/src')
        }
    },

    ...
}

same for Webpack 1:

module.exports = {
    ...

    resolve: {
        root: [
            path.resolve(__dirname  + '/src')
        ],
        alias: {
            src: path.resolve(__dirname  + '/src')
        }
    },

    ...
}

What you can use srcas a native path as follows:

import approxPerDay from 'src/utils/approxPerDay.js'
import otherstuff from '../components/otherstuff'