Skip to content

Lets you use #Paths instead of '../../../lib/helper.js' it becomes just '#/lib/helper.js'

Notifications You must be signed in to change notification settings

miketamis/babel-plugin-hash-resolve

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 

Repository files navigation

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.

Why I like this method:

About

Lets you use #Paths instead of '../../../lib/helper.js' it becomes just '#/lib/helper.js'

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published