babel-plugin-auto-import

babel-plugin-auto-import

Convert global variables to import statements

• Using with Create React App

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} />
// ...

Using with Create React App

If you don't want to eject your project, you can use react-app-rewired and customize-cra.

Follow the instructions.

config-overrides.js

const { override, addBabelPlugins, disableEsLint } = require("customize-cra");

const autoImportPluginOptions = {
    "declarations": [
        { "default": "React", members: ["Component"], "path": "react" }
    ]
};


module.exports = override(
    ...addBabelPlugins([require("babel-plugin-auto-import"), autoImportPluginOptions]),
    disableEsLint(),
);