Babel Root Import
Babel plugin to add the opportunity to use import
and require
with root based paths.
Example
// Usually;const OtherExample = ; // With Babel-Root-Importer;const OtherExample = ;
Install
npm
npm install babel-plugin-root-import --save-dev
yarn
yarn add babel-plugin-root-import --dev
Use
Add a .babelrc
file and write:
"plugins": "babel-plugin-root-import"
or pass the plugin with the plugins-flag on CLI
babel-node myfile.js --plugins babel-plugin-root-import
Extras
Custom root-path-suffix
If you want a custom root because for example all your files are in the src/js folder you can define this in your .babelrc
file
"plugins": "babel-plugin-root-import" "rootPathSuffix": "src/js"
Custom root-path-prefix
If you don't like the ~
syntax you can just use your own symbol (for example a @
symbol or \
)
"plugins": "babel-plugin-root-import" "rootPathPrefix": "@" // Now you can use the plugin like:;
Multiple custom prefixes and suffixes
You can supply an array of the above. The plugin will try each prefix/suffix pair in the order they are defined.
"plugins": "babel-plugin-root-import" "rootPathPrefix": "~" // `~` is the default so you can remove this if you want "rootPathSuffix": "src/js" "rootPathPrefix": "@" "rootPathSuffix": "other-src/js" "rootPathPrefix": "#" "rootPathSuffix": "../../src/in/parent" // since we suport relative paths you can also go into a parent directory // Now you can use the plugin like:;const bar = ;
Don't let ESLint be confused
If you use eslint-plugin-import to validate imports it may be necessary to instruct ESLint to parse root imports. You can use eslint-import-resolver-babel-plugin-root-import
"import/resolver":
Don't let Flow be confused
If you use Facebook's Flow for type-checking it is necessary to instruct it on how to map your chosen prefix to the root directory. Add the following to your .flowconfig file, replacing ~
with your chosen prefix.
[options]
module.name_mapper='^~\/\(.*\)$' -> '<PROJECT_ROOT>/\1'
FYI
Webpack delivers a similar feature, if you just want to prevent end-less import strings you can also define aliases
in the resolve
module, at the moment it doesn't support custom/different symbols and multiple/custom suffixes.
READ MORE
Change Log
5.0.0 - 2017-02-10
4.1.5 - 2016-11-17
- Compile new version and release again
4.1.4 - 2016-11-15
- Improve support for relative paths (e.g. referencing parent folders via ../) (thanks to @Hizoul)
4.1.3 - 2016-09-14
- Support paths (thanks to @sivael)
4.1.0 - 2016-08-20
- Use relative paths instead of absolute ones (thanks to @nescalante)
4.0.0 - 2016-06-29
- Almost everything changed, thanks to @sheepsteak, @gingur, @olalonde
3.2.2 - 2016-02-20
- Fix custom suffix in path, missing
/
in generated paths
3.2.0 - 2016-02-19
- Support Windows-Filesystem
- Add possibility to configure a custom rootPath-Symbol (instead of
~
you can use whatever you like)
3.1.0 - 2015-12-01
- Add possibility config the custom root path
3.0.1 - 2015-11-30
- Updated plugin to new babel6 API
- Splitted tests and functions into two scopes with single tests
- Removed the "extra-root" param for the .babelrc since this is no yet supported in babel6
2.0.1 - 2015-11-15
Breaking Change to Babel 5
- Updated to Babel 6
- Added integration tests
1.0.1 - 2015-08-07
- Added / updated tests
- Implemented ESlint