5.0.0 • Published 1 year ago

babel-plugin-module-resolver v5.0.0

Weekly downloads
1,692,868
License
MIT
Repository
github
Last release
1 year ago

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!

@shesha/reactjs@sprucelabs/heartwood-view-controllers@rpcbase/webpack-browser@pdasolucoes/rncomponents@modern-js/server-utils@haris523/expo-starter-template@fiuzagr/boot@applicaster/babel-preset-quick-brick@toptal/davinci-enginedesktop-support-tools@g7fe/g7-scripts@prestosports/prestosports-commons-uihu-alert-pageargos-did@s-isabella/scripts-backendsagasphere-cliautho-sdk-testauthoring-tool-sdkairtel-b2b-uisynthetik-uigintonicres-strap2mui-table-reactent-alert-pagebappo-scriptssphere-color-schemesfatmod-sca-react-components@arzyu/zeropack-babel-ts-reactbit-testce-webpack-tempamp-webpackpoc-shared-serverchayuan-front-builder@crtx-test/crtx-pcf-componentsbabel-preset-contourvariojs-toolbox@sitearcade/babel-preset-arcadefresh-ui-reactbabel-preset-react-native-web-expoenotarylog-client@rolo-chat/babel-preset-backend@rolo-chat/babel-preset-frontend@cfchase/interactive-landscapedemo-package-2kelex-clipops-app-sstvpops-kids-sstvpops-plus-webkelex-plugin-appvp-desktop@deity/falcon-scriptslaem-scraping-bundler@brudi/brudi-toolbox-react-nextcalc-of-pricegsmlg-scripts@njmaeff/sdk-babel-typescriptreadytest-testcafe@vitbokisch/eslint-config-import@faable/fservsfra-webpack-builder@antoniszisis/react-scriptss40-scriptsnodejs-toggles-module@darkobits/ts-unified@codewitchbella/scripts-backendcazetto-pawjs@cloudkite/next@julienpapini/react-scriptsbabel-preset-hirohzero-boothzero-boot-purehzero-front-runtimeconvene_perfomance_tool_breakout_playercal-scripts@ombori/grid-session-manager-reacttrezor-blockchain-link@avrora/avs@gravityforms/webpack-config@xr4z0r/react-scriptsconsole-core-components-uiconsole-core-magic-formconsole-core-portal-formconsole-core-portal-form-2console-core-portal-uiconsole-core-portal-ui-2console-core-portal-ui-mystiquegnextia-serverlesssherpa-portal-formsherpa-portal-uinetworkx@equinor/babel-preset-optrn-pdf-reader-offlinexueyan-typescript-cli@eaze/eaze-web-scriptsbabel-preset-rvreact-app-ssr-starterrewards-testuix-kit-reactcorbeappbabel-preset-qcolate
5.0.0

1 year ago

4.1.0

3 years ago

4.0.0

4 years ago

3.2.0

5 years ago

3.1.3

5 years ago

3.1.2

5 years ago

3.1.1

6 years ago

3.1.0

6 years ago

3.0.0

6 years ago

3.0.0-beta.5

7 years ago

3.0.0-beta.4

7 years ago

2.7.1

7 years ago

3.0.0-beta.3

7 years ago

3.0.0-beta.2

7 years ago

3.0.0-beta.0

7 years ago

2.7.0

7 years ago

2.6.2

7 years ago

2.6.1

7 years ago

2.6.0

7 years ago

2.5.0

7 years ago

2.4.0

7 years ago

2.3.0

7 years ago

3.0.0-beta.1

7 years ago

2.2.0

8 years ago

2.1.1

8 years ago

2.1.0

8 years ago

2.0.0

8 years ago

0.0.1

8 years ago