Skip to content

Commit 9d168c6

Browse files
committed
docs: add path mapping section
1 parent 7f3bdc0 commit 9d168c6

File tree

1 file changed

+30
-0
lines changed

1 file changed

+30
-0
lines changed

docusaurus/docs/importing-a-component.md

+30
Original file line numberDiff line numberDiff line change
@@ -73,4 +73,34 @@ Now that you've configured your project to support absolute imports, if you want
7373
import Button from 'components/Button';
7474
```
7575

76+
### Path Mapping
77+
78+
If you require more fine-grained import paths you can set up extra path mappings. This enables you to create shorter import paths to file locations that may normally require long paths. Below is an example `jsconfig.json` showing how you could do this:
79+
80+
```json
81+
{
82+
"compilerOptions": {
83+
"baseUrl": "src",
84+
"paths": {
85+
"base/*": ["./components/base/*"],
86+
"pages/*": ["./components/pages/*"],
87+
"actions/*": ["./state/actions/*"]
88+
}
89+
},
90+
"include": ["src"]
91+
}
92+
```
93+
94+
> Even though `jsconfig.json` and `tsconfig.json` allow using multiple locations as "fallbacks", this feature is not currently available in `create-react-app`.
95+
96+
Setting up your `jsconfig.json` or `tsconfig.json` as above enables you to do imports like this:
97+
98+
```js
99+
import Button from 'components/Button';
100+
import MainPage from 'pages/Main';
101+
import addUser from 'actions/addUser';
102+
```
103+
104+
The import for `Button` still works as the `baseUrl` is still set as `src`. However, we now have more paths available to reach modules that may be quite a few folders deep in our project. This may be useful for bigger projects that have more elaborate filesystem layouts.
105+
76106
For more information on these configuration files, see the [jsconfig.json reference](https://code.visualstudio.com/docs/languages/jsconfig) and [tsconfig.json reference](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) documentation.

0 commit comments

Comments
 (0)