1 | # babel-plugin-module-resolver
|
2 | [![Maintenance Status][status-image]][status-url] [![NPM version][npm-image]][npm-url] [![Build Status Linux][circleci-image]][circleci-url] [![Build Status Windows][appveyor-image]][appveyor-url] [![Coverage Status][coverage-image]][coverage-url]
|
3 |
|
4 | A [Babel](http://babeljs.io) 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.
|
5 |
|
6 | ## Description
|
7 |
|
8 | 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.
|
9 |
|
10 | ```js
|
11 | // Use this:
|
12 | import MyUtilFn from 'utils/MyUtilFn';
|
13 | // Instead of that:
|
14 | import MyUtilFn from '../../../../utils/MyUtilFn';
|
15 |
|
16 | // And it also work with require calls
|
17 | // Use this:
|
18 | const MyUtilFn = require('utils/MyUtilFn');
|
19 | // Instead of that:
|
20 | const MyUtilFn = require('../../../../utils/MyUtilFn');
|
21 | ```
|
22 |
|
23 | ## Getting started
|
24 |
|
25 | Install the plugin
|
26 |
|
27 | ```
|
28 | npm install --save-dev babel-plugin-module-resolver
|
29 | ```
|
30 | or
|
31 | ```
|
32 | yarn add --dev babel-plugin-module-resolver
|
33 | ```
|
34 |
|
35 | Specify the plugin in your `.babelrc` with the custom root or alias. Here's an example:
|
36 | ```json
|
37 | {
|
38 | "plugins": [
|
39 | ["module-resolver", {
|
40 | "root": ["./src"],
|
41 | "alias": {
|
42 | "test": "./test",
|
43 | "underscore": "lodash"
|
44 | }
|
45 | }]
|
46 | ]
|
47 | }
|
48 | ```
|
49 |
|
50 | **.babelrc.js version**
|
51 | Specify the plugin in your `.babelrc.js` file with the custom root or alias. Here's an example:
|
52 | ```
|
53 |
|
54 | const plugins = [
|
55 | [
|
56 | require.resolve('babel-plugin-module-resolver'),
|
57 | {
|
58 | root: ["./src/"],
|
59 | alias: {
|
60 | "test": "./test"
|
61 | }
|
62 | }
|
63 |
|
64 | ]
|
65 |
|
66 | ];
|
67 |
|
68 | ```
|
69 | Good example: // https://gist.github.com/nodkz/41e189ff22325a27fe6a5ca81df2cb91
|
70 |
|
71 |
|
72 | ## Documentation
|
73 |
|
74 | babel-plugin-module-resolver can be configured and controlled easily, check the [documentation](DOCS.md) for more details
|
75 |
|
76 | Are you a plugin author (e.g. IDE integration)? We have [documented the exposed functions](DOCS.md#for-plugin-authors) for use in your plugins!
|
77 |
|
78 | ## ESLint plugin
|
79 |
|
80 | If you're using ESLint, you should use [eslint-plugin-import][eslint-plugin-import], and [eslint-import-resolver-babel-module][eslint-import-resolver-babel-module] to remove falsy unresolved modules. If you want to have warnings when aliased modules are being imported by their relative paths, you can use [eslint-plugin-module-resolver](https://github.com/HeroProtagonist/eslint-plugin-module-resolver).
|
81 |
|
82 | ## Editors autocompletion
|
83 |
|
84 | - Atom: Uses [atom-autocomplete-modules][atom-autocomplete-modules] and enable the `babel-plugin-module-resolver` option.
|
85 | - VS Code: Configure the [path mapping](https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping) in `jsconfig.json` (`tsconfig.json` for TypeScript), e.g.:
|
86 |
|
87 | ```js
|
88 | {
|
89 | "compilerOptions": {
|
90 | "baseUrl": ".",
|
91 | "paths": {
|
92 | "*": ["src/*"],
|
93 | "test/*": ["test/*"],
|
94 | "underscore": ["lodash"]
|
95 | }
|
96 | }
|
97 | }
|
98 | ```
|
99 |
|
100 | - IntelliJ/WebStorm: You can mark your module directories as "resources root" e.g if you have `../../../utils/MyUtilFn` you can mark
|
101 | `../../../utils` as "resources root". This has the problem that your alias also has to be named `utils`. The second option is to add
|
102 | a `webpack.config.js` to your project and use it under File->Settings->Languages&Frameworks->JavaScript->Webpack. This will trick webstorm
|
103 | into resolving the paths and you can use any alias you want e.g.:
|
104 |
|
105 | ```js
|
106 | var path = require('path');
|
107 |
|
108 | module.exports = {
|
109 | resolve: {
|
110 | extensions: ['.js', '.json', '.vue'],
|
111 | alias: {
|
112 | utils: path.resolve(__dirname, '../../../utils/MyUtilFn'),
|
113 | },
|
114 | },
|
115 | };
|
116 | ```
|
117 |
|
118 |
|
119 | ## License
|
120 |
|
121 | MIT, see [LICENSE.md](/LICENSE.md) for details.
|
122 |
|
123 | ## Who is using babel-plugin-module-resolver ?
|
124 |
|
125 | - Algolia: [InstantSearch.js](https://github.com/algolia/instantsearch.js)
|
126 | - Airbnb: [Lottie React Native](https://github.com/airbnb/lottie-react-native)
|
127 | - AppDirect
|
128 | - Callstack: [React Native Paper](https://github.com/callstack/react-native-paper)
|
129 | - Codility
|
130 | - Eleme: [Element](https://github.com/ElemeFE/element)
|
131 | - Expo: [Expo SDK](https://github.com/expo/expo/tree/master/packages/babel-preset-expo)
|
132 | - FormidableLabs: [Victory Native](https://github.com/FormidableLabs/victory-native)
|
133 | - OpenCollective: [OpenCollective](https://github.com/opencollective/frontend)
|
134 | - React Community: [React Native Maps](https://github.com/react-community/react-native-maps)
|
135 | - Uber: [Seer](https://github.com/uber-web/Seer), [react-vis](https://github.com/uber/react-vis)
|
136 | - Quasar Framework: [Quasar](https://github.com/quasarframework/quasar)
|
137 | - Vuetify.js [Vuetify](https://github.com/vuetifyjs/vuetify)
|
138 | - Zeit: [Next.js](https://github.com/zeit/next.js)
|
139 | - Zenika: [Immutadot](https://github.com/Zenika/immutadot)
|
140 |
|
141 | Are you also using it? Send a PR!
|
142 |
|
143 | [status-image]: https://img.shields.io/badge/status-maintained-brightgreen.svg
|
144 | [status-url]: https://github.com/tleunen/babel-plugin-module-resolver
|
145 |
|
146 | [npm-image]: https://img.shields.io/npm/v/babel-plugin-module-resolver.svg
|
147 | [npm-url]: https://www.npmjs.com/package/babel-plugin-module-resolver
|
148 |
|
149 | [circleci-image]: https://img.shields.io/circleci/project/tleunen/babel-plugin-module-resolver/master.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSItMTQyLjUgLTE0Mi41IDI4NSAyODUiPjxjaXJjbGUgcj0iMTQxLjciIGZpbGw9IiNERDQ4MTQiLz48ZyBpZD0iYSIgZmlsbD0iI0ZGRiI%2BPGNpcmNsZSBjeD0iLTk2LjQiIHI9IjE4LjkiLz48cGF0aCBkPSJNLTQ1LjYgNjguNGMtMTYuNi0xMS0yOS0yOC0zNC00Ny44IDYtNSA5LjgtMTIuMyA5LjgtMjAuNnMtMy44LTE1LjctOS44LTIwLjZjNS0xOS44IDE3LjQtMzYuNyAzNC00Ny44bDEzLjggMjMuMkMtNDYtMzUuMi01NS4zLTE4LjctNTUuMyAwYzAgMTguNyA5LjMgMzUuMiAyMy41IDQ1LjJ6Ii8%2BPC9nPjx1c2UgeGxpbms6aHJlZj0iI2EiIHRyYW5zZm9ybT0icm90YXRlKDEyMCkiLz48dXNlIHhsaW5rOmhyZWY9IiNhIiB0cmFuc2Zvcm09InJvdGF0ZSgyNDApIi8%2BPC9zdmc%2B
|
150 | [circleci-url]: https://circleci.com/gh/tleunen/babel-plugin-module-resolver
|
151 |
|
152 | [appveyor-image]: https://img.shields.io/appveyor/ci/tleunen/babel-plugin-module-resolver/master.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjEyOCIgaGVpZ2h0PSIxMjgiIHZpZXdCb3g9IjAgMCAxMjggMTI4Ij48ZyBmaWxsPSIjMUJBMUUyIiB0cmFuc2Zvcm09InNjYWxlKDgpIj48cGF0aCBkPSJNMCAyLjI2NWw2LjUzOS0uODg4LjAwMyA2LjI4OC02LjUzNi4wMzd6Ii8%2BPHBhdGggZD0iTTYuNTM2IDguMzlsLjAwNSA2LjI5My02LjUzNi0uODk2di01LjQ0eiIvPjxwYXRoIGQ9Ik03LjMyOCAxLjI2MWw4LjY3LTEuMjYxdjcuNTg1bC04LjY3LjA2OXoiLz48cGF0aCBkPSJNMTYgOC40NDlsLS4wMDIgNy41NTEtOC42Ny0xLjIyLS4wMTItNi4zNDV6Ii8%2BPC9nPjwvc3ZnPg==
|
153 | [appveyor-url]: https://ci.appveyor.com/project/tleunen/babel-plugin-module-resolver
|
154 |
|
155 | [coverage-image]: https://codecov.io/gh/tleunen/babel-plugin-module-resolver/branch/master/graph/badge.svg
|
156 | [coverage-url]: https://codecov.io/gh/tleunen/babel-plugin-module-resolver
|
157 |
|
158 | [eslint-import-resolver-babel-module]: https://github.com/tleunen/eslint-import-resolver-babel-module
|
159 | [eslint-plugin-import]: https://github.com/benmosher/eslint-plugin-import
|
160 | [atom-autocomplete-modules]: https://github.com/nkt/atom-autocomplete-modules
|