1. babel-plugin-module-alias
Babel plugin to rewrite the path in require() and ES6 import
babel-plugin-module-alias
Package: babel-plugin-module-alias
Created by: tleunen
Last modified: Mon, 13 Jun 2022 04:02:13 GMT
Version: 1.6.0
License: MIT
Downloads: 19,479
Repository: https://github.com/tleunen/babel-plugin-module-alias

Install

npm install babel-plugin-module-alias
yarn add babel-plugin-module-alias

babel-plugin-module-alias Build Status Coverage Status

A babel plugin to rewrite (map, alias, resolve) directories as different directories during the Babel process. It's particularly useful when you have files you don't want to use with relative paths (especially in big projects).

Description

Instead of using relative paths in your project, you'll be able to use an alias. Here an simple example:

 // Instead of using this;
import MyUtilFn from '../../../../utils/MyUtilFn';
// Use that:
import MyUtilFn from 'utils/MyUtilFn';

With this plugin, you'll be able to map files or directories to the path you want.

Note: It also work for require().

Note 2: You can use the npm: prefix in your plugin configuration to map a node module.

Usage

Install the plugin

$ npm install --save-dev babel babel-plugin-module-alias

Specify the plugin in your .babelrc with the custom mapping.

 {
  "plugins": [
    ["module-alias", [
      { "src": "./src/utils", "expose": "utils" },
      { "src": "./src/components", "expose": "awesome/components" },
      { "src": "npm:lodash", "expose": "underscore" }
    ]]
  ]
}

If you're using eslint-plugin-import, you should use eslint-import-resolver-babel-module-alias to avoid having false errors.

License

MIT, see LICENSE.md for details.

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin