Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/paveldymkov/babel-plugin-auto-import
https://github.com/paveldymkov/babel-plugin-auto-import
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/paveldymkov/babel-plugin-auto-import
- Owner: PavelDymkov
- Created: 2017-04-26T09:36:12.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-02T16:56:29.000Z (almost 2 years ago)
- Last Synced: 2024-12-03T07:48:39.797Z (about 1 month ago)
- Language: JavaScript
- Size: 441 KB
- Stars: 41
- Watchers: 2
- Forks: 6
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# babel-plugin-auto-import
Convert global variables to import statements
- [Using with Create React App](#using-with-create-react-app)
## Examples
### Example 1
**.babelrc**
```json
{
"plugins": [[
"auto-import", {
"declarations": [
{ "default": "React", "path": "react" }
]
}
]]
}
```
**In**
```javascript
React.createElement("div", null, []);
```
**Out**
```javascript
import React from "react";
React.createElement("div", null, []);
```
### Example 2
**.babelrc**
```json
{
"plugins": [[
"auto-import", {
"declarations": [
{ "default": "React", "members": ["Component"], "path": "react" }
]
}
]]
}
```
**In**
```javascript
class MyComponent extends Component { }
```
**Out**
```javascript
import { Component } from "react";
class MyComponent extends Component { }
```
### Example 3
Suitable for polyfilling browser built-ins (eg. `window.fetch`)
**.babelrc**
```json
{
"plugins": [[
"auto-import", {
"declarations": [
{ "anonymous": ["fetch"], "path": "whatwg-fetch" }
]
}
]]
}
```
**In**
```javascript
fetch("http://example.com/qwe");
```
**Out**
```javascript
import "whatwg-fetch";
fetch("http://example.com/qwe");
```
### Example 4
Generate import path by filename. [name] will be replaced to processed filename.
**.babelrc**
```json
{
"plugins": [[
"auto-import", {
"declarations": [
{ "default": "styles", "path": "./[name].css" }
]
}
]]
}
```
**In**
``` component-name.js ```
```javascript
// ...
// ...
```
**Out**
```javascript
import styles from "./component-name.css";
// ...
// ...
```
You can process filename by "nameReplacePattern" and "nameReplaceString" options. It's processing like this:
```javascript
"basename.js".replace(new RegExp(nameReplacePattern), nameReplaceString); // == [name]
```
By default
```javascript
nameReplacePattern == "\\.js$";
nameReplaceString == "";
```
**.babelrc**
```json
{
"plugins": [[
"auto-import", {
"declarations": [
{
"default": "styles", "path": "./[name].css",
"nameReplacePattern": "\.component\.js$", "nameReplaceString": ".styles"
}
]
}
]]
}
```
**In**
``` name.component.js ```
```javascript
// ...
// ...
```
**Out**
```javascript
import styles from "./name.styles.css";
// ...
// ...
```
## Using with Create React App
If you don't want to eject your project, you can use [react-app-rewired](https://github.com/timarney/react-app-rewired) and
[customize-cra](https://github.com/arackaf/customize-cra).
[Follow the instructions](https://github.com/timarney/react-app-rewired#how-to-rewire-your-create-react-app-project).
**config-overrides.js**
```javascript
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(),
);
```