babel-plugin-module-resolverino
v1.0.0
Published
Module resolver plugin for Babel
Downloads
6
Maintainers
Readme
babel-plugin-module-resolverino
A Babel plugin to add a new resolver for your modules when compiling your code using Babel. This plugin allows you to add new "root" directories that contain your modules. It also allows you to setup a custom alias for directories, specific files, or even other npm modules.
Fork notice
This plugin is a fork of the awesome babel-plugin-module-resolver plugin. Without it there would be no resolverino.
The differences are mainly some additional features and bugfixes. The configuration that worked in babel-plugin-module-resolver should mostly work under babel-plugin-module-resolverino (small adjustments may be required).
Description
This plugin can simplify the require/import paths in your project. For example, instead of using complex relative paths like ../../../../utils/my-utils
, you can write utils/my-utils
. It will allow you to work faster since you won't need to calculate how many levels of directory you have to go up before accessing the file.
// Use this:
import MyUtilFn from 'utils/MyUtilFn';
// Instead of that:
import MyUtilFn from '../../../../utils/MyUtilFn';
// And it also work with require calls
// Use this:
const MyUtilFn = require('utils/MyUtilFn');
// Instead of that:
const MyUtilFn = require('../../../../utils/MyUtilFn');
Usage
Install the plugin
$ npm install --save-dev babel-plugin-module-resolverino
Specify the plugin in your .babelrc
with the custom root or alias. Here's an example:
{
"plugins": [
["module-resolver", {
"root": ["./src"],
"alias": {
"test": "./test",
"underscore": "lodash"
}
}]
]
}
Options
root
: Array of root directories. Specify the paths or a glob path (eg../src/**/components
)alias
: Map of alias. You can also alias node_modules dependencies, not just local files.extensions
: Array of extensions used in the resolver. Override the default extensions (['.js', '.jsx', '.es', '.es6']
).cwd
: By default, the working directory is the one used for the resolver, but you can override it for your project.- The custom value
babelrc
will make the plugin look for the closest babelrc configuration based on the file to parse.
- The custom value
Regular expression alias
It is possible to specify an alias using a regular expression. To do that, either start an alias with '^'
or end it with '$'
:
{
"plugins": [
["module-resolver", {
"alias": {
"^@namespace/foo-(.+)": "packages/\\1"
}
}]
]
}
Using the config from this example '@namespace/foo-bar'
will become 'packages/bar'
.
You can reference the n-th matched group with '\\n'
('\\0'
refers to the whole matched path).
To use the backslash character (\
) just escape it like so: '\\\\'
(double escape is needed because of JSON already using \
for escaping).
Usage with Flow
To allow Flow to find your modules, add configuration options
to .flowconfig
.
For example, a React component is located at src/components/Component.js
// Before
import '../../src/components/Component';
// After - Flow cannot find this now
import 'components/Component';
Instruct Flow where to resolve modules from:
# .flowconfig
[options]
module.system.node.resolve_dirname=node_modules
module.system.node.resolve_dirname=src
Be sure to add any sub-directories if you refer to files further down the directory tree:
// Located at src/store/actions
import 'actions/User'
module.system.node.resolve_dirname=src/store
More configuration options are located in the Flow documentation
Editors autocompletion
- IntelliJ/WebStorm: You can add custom resources root directories, make sure it matches what you have in this plugin.
License
MIT, see LICENSE.md for details.