babel-plugin-module-resolver

    4.1.0 • Public • Published

    babel-plugin-module-resolver

    Maintenance Status NPM version Build Status Linux Build Status Windows Coverage Status

    A Babel 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.

    Description

    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.

    // Use this:
    import MyUtilFn from 'utils/MyUtilFn';
    // Instead of that:
    import MyUtilFn from '../../../../utils/MyUtilFn';
    
    // And it also work with require calls
    // Use this:
    const MyUtilFn = require('utils/MyUtilFn');
    // Instead of that:
    const MyUtilFn = require('../../../../utils/MyUtilFn');

    Getting started

    Install the plugin

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

    or

    $ yarn add --dev babel-plugin-module-resolver
    

    Specify the plugin in your .babelrc with the custom root or alias. Here's an example:

    {
      "plugins": [
        ["module-resolver", {
          "root": ["./src"],
          "alias": {
            "test": "./test",
            "underscore": "lodash"
          }
        }]
      ]
    }

    .babelrc.js version Specify the plugin in your .babelrc.js file with the custom root or alias. Here's an example:

    
    const plugins = [
      [
        require.resolve('babel-plugin-module-resolver'),
        {
          root: ["./src/"],
          alias: {
            "test": "./test"
          }
        }
    
      ]
    
    ];
    
    

    Good example: // https://gist.github.com/nodkz/41e189ff22325a27fe6a5ca81df2cb91

    Documentation

    babel-plugin-module-resolver can be configured and controlled easily, check the documentation for more details

    Are you a plugin author (e.g. IDE integration)? We have documented the exposed functions for use in your plugins!

    ESLint plugin

    If you're using ESLint, you should use eslint-plugin-import, and 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.

    Editors autocompletion

    {
      "compilerOptions": {
        "baseUrl": ".",
        "paths": {
          "*": ["src/*"],
          "test/*": ["test/*"],
          "underscore": ["lodash"]
        }
      }
    }
    • IntelliJ/WebStorm: You can mark your module directories as "resources root" e.g if you have ../../../utils/MyUtilFn you can mark ../../../utils as "resources root". This has the problem that your alias also has to be named utils. The second option is to add a webpack.config.js to your project and use it under File->Settings->Languages&Frameworks->JavaScript->Webpack. This will trick webstorm into resolving the paths and you can use any alias you want e.g.:
    var path = require('path');
    
    module.exports = {
      resolve: {
        extensions: ['.js', '.json', '.vue'],
        alias: {
          utils: path.resolve(__dirname, '../../../utils/MyUtilFn'),
        },
      },
    };

    License

    MIT, see LICENSE.md for details.

    Who is using babel-plugin-module-resolver ?

    Are you also using it? Send a PR!

    Install

    npm i babel-plugin-module-resolver

    DownloadsWeekly Downloads

    1,657,905

    Version

    4.1.0

    License

    MIT

    Unpacked Size

    40.1 kB

    Total Files

    13

    Last publish

    Collaborators

    • tleunen
    • fatfisz