Awesome
babel-plugin-hash-resolve
Sick of all those require('../../../something.js') We all are.
heres another differnet solution to that problem, I call it #paths
instead of
import React, { Component } from 'react'
import Container from '../../shared-components/Container'
import { colors, fillFields } from '../../shared-components/helpers'
import SearchBox from '../../shared-components/SearchBox'
it would be
import React, { Component } from 'react'
import Container from '#/shared-components/Container'
import { colors, fillFields } from '#/shared-components/helpers'
import SearchBox from '#/shared-components/SearchBox'
1. - How does it work:
It goes up the up the path, ie if the file is located src/components/SearchComponent/index.js
it would start by looking for
src/components/SearchComponent/shared-components/SearchBox -> ./
then:
src/components/shared-components/SearchBox -> ../
then:
src/shared-components/SearchBox -> ../../
which is where the file exists. and therefore the path will be ../../ when compiled.
How to install:
npm i --save babel-plugin-hash-resolve or yarn add babel-plugin-hash-resolve
// .babelrc
"plugins": [
"babel-plugin-hash-resolve"
]
if your using eslint you may need to turn these off:
'import/no-unresolved': 'off',
'import/extensions': 'off'
Other Options:
If you got a differnt solutions to this problem pull request and add it to this list.