Package Exports

babel-plugin-auto-import

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (babel-plugin-auto-import) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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" }
      ]
    }
  ]]
}

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" }
      ]
    }
  ]]
}

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" }
      ]
    }
  ]]
}

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" }
      ]
    }
  ]]
}

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"
        }
      ]
    }
  ]]
}

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(),
);