babel-plugin-webpack-alias

babel-plugin-webpack-alias

This Babel 6 plugin allows you to use webpack aliases and most of webpack resolve features in Babel.

This plugin is simply going to take the aliases defined in your webpack config and replace require paths. It is especially useful when you rely on webpack aliases to keep require paths nicer (and sometimes more consistent depending on your project configuration) but you can't use webpack in a context, for example for unit testing.

If you are having issues while making this plugin work, have a look at the examples folder. Play with them, mix your own config in, and feel free to open an issue!

Example

With the following webpack.config.js:

module.exports = {
    ...
    resolve: {
        alias: {
            'my-alias': path.join(__dirname, '/alias-folder/js/'),
            'library-name': './library-folder/folder'
        }
    }
    ...
};

A javascript file before compilation:

var MyModule = require('my-alias/src/lib/MyModule');
import MyImport from 'library-name/lib/import/MyImport';

will become:

var MyModule = require('../../alias-folder/js/lib/MyModule');
import MyImport from '../../library-folder/folder/lib/import/MyImport';

This is an example but the plugin will output the relative path depending on the position of the file and the alias folder.

See the examples folder for more configuration examples.

Installation

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

Add it as a plugin to your .babelrc file. You can optionally add a path to a config file, for example:

{
   "presets":[ "react", "es2015", "stage-0" ],
   "env": {
    "test": {
      "plugins": [
        [ "babel-plugin-webpack-alias", { "config": "./webpack.config.test.js" } ]
      ]
    }
  }
}

In this case, the plugin will only be run when NODE_ENV is set to test.

Supported resolve options

• resolve.alias: That is the reason why this plugin has been made, see above for examples and details.
• resolve.extensions: It will try to match extensions provided in the webpack configuration.

Options

• config(string): Path to your webpack config file.

  The plugin is going to look for a webpack.config.js file or a webpack.config.babel.js at the root, in case your webpack configuration file is in another location, you can use this option to provide an absolute or relative path to it. You can also use environment variable in this option, using lodash template, for example:

  {
     "presets":[ "react", "es2015", "stage-0" ],
     "env": {
      "test": {
        "plugins": [
          [ "babel-plugin-webpack-alias", {
              "config": "${PWD}/webpack.config.test.js"
            }
          ]
        ]
      }
    }
  }
  

  And run with:

  $ PWD=$(pwd) NODE_ENV=test ava
  

• findConfig(boolean): Will find the nearest webpack configuration file when set to true.

  It is possible to pass a findConfig option, and the plugin will attempt to find the nearest webpack configuration file within the project using find-up. For example:

  {
     "presets":[ "react", "es2015", "stage-0" ],
     "env": {
      "test": {
        "plugins": [
          [ "babel-plugin-webpack-alias", {
              "config": "webpack.config.test.js",
              "findConfig": true
            } ]
        ]
      }
    }
  }
  

• noOutputExtension(boolean): Don't append extension at the end of filenames even when a resolve.extensions webpack config is set.

  The normal behaviour of the resolve.extensions support is this one:

  var MyModule = require('my-alias/src/lib/MyComponent.jsx');
  // is converted to:
  var MyModule = require('../../alias-folder/js/lib/MyComponent.jsx');
  

  However in particular cases you'll compile MyComponent.jsx to a MyComponent.js file so the build alias won't be able to resolve the jsx file. In that case you can turn noOutputExtension on and get:

  var MyModule = require('my-alias/src/lib/MyComponent.jsx');
  // is converted to:
  var MyModule = require('../../alias-folder/js/lib/MyComponent');