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");