babel-plugin-auto-import
Convert global variables to import statements
Examples
Example 1
.babelrc
In
React;
Out
; React;
Example 2
.babelrc
In
Out
;
Example 3
Suitable for polyfilling browser built-ins (eg. window.fetch
)
.babelrc
In
;
Out
; ;
Example 4
Generate import path by filename. [name] will be replaced to processed filename.
.babelrc
In
component-name.js
// ...<input className=stylesclassName />// ...
Out
;// ...<input className=stylesclassName />// ...
You can process filename by "nameReplacePattern" and "nameReplaceString" options. It's processing like this:
"basename.js"; // == [name]
By default
nameReplacePattern == "\\.js$";nameReplaceString == "";
.babelrc
In
name.component.js
// ...<input className=stylesclassName />// ...
Out
;// ...<input className=stylesclassName />// ...
Using with Create React App
If you don't want to eject your project, you can use react-app-rewired and customize-cra.
config-overrides.js
const override addBabelPlugins disableEsLint = ; const autoImportPluginOptions = "declarations": "default": "React" members: "Component" "path": "react" ; moduleexports = ;