Improving your JavaScript codebase with one small change!
Are you on a quest to improve your JavaScript syntax?
Want to make your code more consistent?
Are you tired of ugly import patterns like this littering your codebase?
Import Homer from "../../../../../../Components/Simpsons/Homer"
Import {Marge} from "../../../../../../Components/Simpsons"
When you could have something easier to add and easier to read instead?
Import Homer from "@Simpsons/Homer"
Import {Marge} from "@Simpsons"
This is called Module Resolution/Mapping, and thankfully it’s pretty simple to set up! The examples below have links to the docs if you’re interested in understanding it further.
Getting started
Depending on your tools you may need different/specific configurations, but here are the basics:
Typescript, Next & Angular
File: tsconfig.json
(or whatever you use for your TS Config)
Typescript Docs: link
Next Docs: link
Angular Docs: link
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@Simpsons/*": ["/path/to/Components/Simpsons/*"]
}
}
}
Jest
File: .jest.config
Docs: link
moduleNameMapper: {
// existing module maps
"^@Simpsons/(.*)$": "<rootDir>/path/to/Components/Simpsons/$1"
}
Gatsby
Addon: gatsby-plugin-root-import
(npm)
File: gatsby-config.js
Docs: link
{
resolve: "gatsby-plugin-root-import",
options: {
"@Simpsons": '/path/to/Components/Simpsons'
}
}
Webpack
File: webpack.config.js
Docs: link
module.exports = {
resolve: {
alias: {
"@Simpsons": path.resolve(__dirname, "/path/to/Components/Simpsons"),
},
},
};
Storybook
Update:
Storybook has now included this in their documentation
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
module.exports = {
webpackFinal: async (config) => {
config.resolve.plugins = [
...(config.resolve.plugins || []),
new TsconfigPathsPlugin({
extensions: config.resolve.extensions,
}),
];
return config;
},
};
Before:
File: main.js
— NB: this is part of the Webpack config for Storybook and the docs are the same as above
Docs: link (for storybook and Webpack)
module.exports = {
webpackFinal: async (config, { configType }) => {
config.resolve.alias = {
...config.resolve.alias,
"@Simpsons": path.resolve(__dirname, "/path/to/Components/Simpsons"),
};
return config;
},
};
Your configs may need some tweaking from the above, but hopefully, this gets you going in the right direction!