mirror of
https://github.com/jbranchaud/til
synced 2026-01-03 15:18:01 +00:00
41 lines
977 B
Markdown
41 lines
977 B
Markdown
# Better Module Imports With Aliases
|
|
|
|
Depending on how your JavaScript project is structured, you can end up with
|
|
import statements that look like this:
|
|
|
|
```javascript
|
|
import SomeComponent from 'app/assets/javascripts/components/SomeComponent.jsx';
|
|
```
|
|
|
|
or this:
|
|
|
|
```javascript
|
|
import SomeComponent from '../components/SomeComponent.jsx';
|
|
```
|
|
|
|
The first is simply too long and the second is both ugly and brittle to
|
|
changes in file location. This can all be _resolved_ with a
|
|
[Webpack](https://webpack.github.io/) alias.
|
|
|
|
```javascript
|
|
// webpack.config.js
|
|
resolve: {
|
|
alias: {
|
|
components: "app/assets/javascripts/components",
|
|
},
|
|
},
|
|
```
|
|
|
|
Webpack will use this `alias` when resolving module imports like the
|
|
following updated example:
|
|
|
|
```javascript
|
|
import SomeComponent from 'components/SomeComponent.jsx';
|
|
```
|
|
|
|
See the
|
|
[`resolve.alias`](https://webpack.github.io/docs/configuration.html#resolve-alias)
|
|
section of the Webpack docs for more details.
|
|
|
|
h/t Vidal Ekechukwu
|