# @flatjs/babel-plugin-import

> Modular import plugin for babel, compatible with [antd](https://github.com/ant-design/ant-design), [antd-mobile](https://github.com/ant-design/ant-design-mobile), lodash, [material-ui](http://material-ui.com/), and so on.

Latest version **2.3.0** (published 2026-08-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @flatjs/babel-plugin-import
pnpm add @flatjs/babel-plugin-import
yarn add @flatjs/babel-plugin-import
bun add @flatjs/babel-plugin-import
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.3.0 |
| Published | 2026-08-18 |
| First published | 2024-04-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Node | >=18.0.0 |
| Dependencies | 12 |
| Unpacked size | 46.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tcsk2026, tianyingchun, shunqwang |

## Links

- npm: https://www.npmjs.com/package/@flatjs/babel-plugin-import
- npm.io page: https://npm.io/package/@flatjs/babel-plugin-import

## Dependencies (12)

- [klaw-sync](https://npm.io/package/klaw-sync.md) ^8.0.0
- [type-fest](https://npm.io/package/type-fest.md) ^5.7.0
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.28.4
- [resolve-dir](https://npm.io/package/resolve-dir.md) ^1.0.1
- [@babel/types](https://npm.io/package/@babel/types.md) ^7.28.4
- [@babel/parser](https://npm.io/package/@babel/parser.md) ^7.28.4
- [@armit/package](https://npm.io/package/@armit/package.md) ^0.3.1
- [@flatjs/common](https://npm.io/package/@flatjs/common.md) 2.3.0
- [resolve.exports](https://npm.io/package/resolve.exports.md) ^2.0.3
- [lodash.mergewith](https://npm.io/package/lodash.mergewith.md) ^4.6.2
- [@types/babel__core](https://npm.io/package/@types/babel__core.md) ^7.20.5
- [@babel/helper-module-imports](https://npm.io/package/@babel/helper-module-imports.md) ^7.27.1

## Recent versions

- 2.3.0 (latest) — 2026-08-18
- 2.3.0-next.0 (next) — 2026-08-03
- 2.2.10 — 2025-10-15
- 2.2.9 — 2025-07-03
- 2.2.9-next.4 — 2025-06-11
- 2.2.9-next.3 — 2025-06-10
- 2.2.9-next.2 — 2025-05-22
- 2.2.9-next.1 — 2025-05-13
- 2.2.9-next.0 — 2025-05-08
- 2.2.8 — 2025-04-22
- 2.2.7 — 2025-03-31
- 2.2.6 — 2025-03-24
- 2.2.6-next.0 — 2025-03-14
- 2.2.5 — 2025-03-06
- 2.2.4 — 2025-03-05
- … 23 more at https://npm.io/package/@flatjs/babel-plugin-import/versions

## README

# @flatjs/babel-plugin-import

Modular import plugin for babel, compatible with [antd](https://github.com/ant-design/ant-design), [antd-mobile](https://github.com/ant-design/ant-design-mobile), lodash, [material-ui](http://material-ui.com/), and so on.

## Where to add @flatjs/babel-plugin-import

- [babelrc](https://babeljs.io/docs/usage/babelrc/)
- [babel-loader](https://github.com/babel/babel-loader)

## Example

#### `{ "libraryName": "antd" }`

```javascript
import { Button } from 'antd';
ReactDOM.render(<Button>xxxx</Button>);

      ↓ ↓ ↓ ↓ ↓ ↓

var _button = require('antd/lib/button');
ReactDOM.render(<_button>xxxx</_button>);
```

#### `{ "libraryName": "antd", style: "css" }`

```javascript
import { Button } from 'antd';
ReactDOM.render(<Button>xxxx</Button>);

      ↓ ↓ ↓ ↓ ↓ ↓

var _button = require('antd/lib/button');
require('antd/lib/button/style/css');
ReactDOM.render(<_button>xxxx</_button>);
```

#### `{ "libraryName": "antd", style: true }`

```javascript
import { Button } from 'antd';
ReactDOM.render(<Button>xxxx</Button>);

      ↓ ↓ ↓ ↓ ↓ ↓

var _button = require('antd/lib/button');
require('antd/lib/button/style');
ReactDOM.render(<_button>xxxx</_button>);
```

Note : with `style: true` css source files are imported and optimizations can be done during compilation time. With `style: "css"`, pre bundled css files are imported as they are.

`style: true` can reduce the bundle size significantly, depending on your usage of the library.

## Usage

```bash
npm install @flatjs/babel-plugin-import --save-dev
```

Via `.babelrc` or babel-loader.

```js
{
  "plugins": [["import", options]]
}
```

### options

`options` can be object.

```javascript
{
  "libraryName": "antd",
  "style": true,   // or 'css'
}
```

```javascript
{
  "libraryName": "lodash",
  "libraryDirectory": "",
  "camel2DashComponentName": false,  // default: true
}
```

```javascript
{
  "libraryName": "@material-ui/core",
  "libraryDirectory": "components",  // default: lib
  "camel2DashComponentName": false,  // default: true
}
```

~`options` can be an array.
It's not available in babel@7+

For Example:

```javascript
[
  {
    libraryName: 'antd',
    libraryDirectory: 'lib', // default: lib
    style: true,
  },
  {
    libraryName: 'antd-mobile',
  },
];
```

`Options` can't be an array in babel@7+, but you can add plugins with name to support multiple dependencies.

For Example:

```javascrit
// .babelrc
"plugins": [
  ["import", { "libraryName": "antd", "libraryDirectory": "lib"}, "antd"],
  ["import", { "libraryName": "antd-mobile", "libraryDirectory": "lib"}, "antd-mobile"]
]
```

#### style

- `["import", { "libraryName": "antd" }]`: import js modularly
- `["import", { "libraryName": "antd", "style": true }]`: import js and css modularly (LESS/Sass source files)
- `["import", { "libraryName": "antd", "style": "css" }]`: import js and css modularly (css built files)

If option style is a `Function`, `@flatjs/babel-plugin-import` will auto import the file which filepath equal to the function return value. This is useful for the components library developers.

e.g.

- ``["import", { "libraryName": "antd", "style": (name) => `${name}/style/2x` }]``: import js and css modularly & css file path is `ComponentName/style/2x`

If a component has no style, you can use the `style` function to return a `false` and the style will be ignored.

e.g.

```js
[
  "import",
    {
      "libraryName": "antd",
      "style": (name: string, file: Object) => {
        if(name === 'antd/lib/utils'){
          return false;
        }
        return `${name}/style/2x`;
      }
    }
]
```

#### styleLibraryDirectory

- `["import", { "libraryName": "element-ui", "styleLibraryDirectory": "lib/theme-chalk" }]`: import js and css modularly

If `styleLibraryDirectory` is provided (default `null`), it will be used to form style file path,
`style` will be ignored then. e.g.

```javascript
{
  "libraryName": "element-ui",
  "styleLibraryDirectory": "lib/theme-chalk",
}

import { Button } from 'element-ui';

      ↓ ↓ ↓ ↓ ↓ ↓

var _button = require('element-ui/lib/button');
require('element-ui/lib/theme-chalk/button');
```

#### customName

We can use `customName` to customize import file path.

For example, the default behavior:

```typescript
import { TimePicker } from "antd"
↓ ↓ ↓ ↓ ↓ ↓
var _button = require('antd/lib/time-picker');
```

You can set `camel2DashComponentName` to `false` to disable transfer from camel to dash:

```typescript
import { TimePicker } from "antd"
↓ ↓ ↓ ↓ ↓ ↓
var _button = require('antd/lib/TimePicker');
```

And finally, you can use `customName` to customize each name parsing:

```js
[
  "import",
    {
      "libraryName": "antd",
      "customName": (name: string, file: object, absFilePath?: string) => {
        const filename = file.opts.filename;
        if (name === 'TimePicker'){
          return 'antd/lib/custom-time-picker';
        }
        if (filename.indexOf('/path/to/my/different.js') >= 0) {
          return 'antd/lib/custom-name';
        }
        return `antd/lib/${name}`;
      }
    }
]
```

So this result is:

```typescript
import { TimePicker } from "antd"
↓ ↓ ↓ ↓ ↓ ↓
var _button = require('antd/lib/custom-time-picker');
```

In some cases, the transformer may serialize the configuration object. If we set the `customName` to a function, it will lost after the serialization.

So we also support specifying the customName with a JavaScript source file path:

```js
[
  'import',
  {
    libraryName: 'antd',
    customName: require('path').resolve(__dirname, './customName.js'),
  },
];
```

The `customName.js` looks like this:

```js
module.exports = function customName(name) {
  return `antd/lib/${name}`;
};
```

#### customStyleName

`customStyleName` works exactly the same as customName, except that it deals with style file path.

#### transformToDefaultImport

Set this option to `false` if your module does not have a `default` export.

### Note

@flatjs/babel-plugin-import will not work properly if you add the library to the webpack config [vendor](https://webpack.js.org/concepts/entry-points/#separate-app-and-vendor-entries).

---
_Source: https://npm.io/package/@flatjs/babel-plugin-import · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._