babel-plugin-auto-import

babel-plugin-auto-import

Convert global variables to import statements

Examples

Example 1

.babelrc

{
  "plugins": [[
    "auto-import", {
      "declarations": [
        { "default": "React", "path": "react" }
      ]
    }
  ]]
}

In

React.createElement("div", null, []);

Out

import React from "react";

React.createElement("div", null, []);

Example 2

.babelrc

{
  "plugins": [[
    "auto-import", {
      "declarations": [
        { "default": "React", "members": ["Component"], "path": "react" }
      ]
    }
  ]]
}

In

class MyComponent extends Component { }

Out

import { Component } from "react";

class MyComponent extends Component { }

Example 3

Suitable for polyfilling browser built-ins (eg. window.fetch)

.babelrc

{
  "plugins": [[
    "auto-import", {
      "declarations": [
        { "anonymous": ["fetch"], "path": "whatwg-fetch" }
      ]
    }
  ]]
}

In

fetch("http://example.com/qwe");

Out

import "whatwg-fetch";

fetch("http://example.com/qwe");

Example 4

Generate import path by filename. [name] will be replaced to processed filename.

.babelrc

{
  "plugins": [[
    "auto-import", {
      "declarations": [
        { "default": "styles", "path": "./[name].css" }
      ]
    }
  ]]
}

In

component-name.js

// ...
<input className={styles.className} />
// ...

Out

import styles from "./component-name.css";
// ...
<input className={styles.className} />
// ...

You can process filename by "nameReplacePattern" and "nameReplaceString" options. It's processing like this:

"basename.js".replace(new RegExp(nameReplacePattern), nameReplaceString); // == [name]

By default

nameReplacePattern == "\.js$";
nameReplaceString == "";

.babelrc

{
  "plugins": [[
    "auto-import", {
      "declarations": [
        {
          "default": "styles", "path": "./[name].css",
          "nameReplacePattern": "\.component\.js$", "nameReplaceString": ".styles"
        }
      ]
    }
  ]]
}

In

name.component.js

// ...
<input className={styles.className} />
// ...

Out

import styles from "./name.styles.css";
// ...
<input className={styles.className} />
// ...