🌜
🌞
babel-plugin-import

babel-plugin-import

v1.13.5

Component modular import plugin for babel.

npm install babel-plugin-import

README

babel-plugin-import

Modular import plugin for babel, compatible with antd, antd-mobile, lodash, material-ui, and so on.

NPM version Build Status


Why babel-plugin-import

Where to add babel-plugin-import

Example

{ "libraryName": "antd" }

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

      ↓ ↓ ↓ ↓ ↓ ↓

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

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

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 }

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

npm install babel-plugin-import --save-dev

Via .babelrc or babel-loader.

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

options

options can be object.

{
  "libraryName": "antd",
  "style": true,   // or 'css'
}
{
  "libraryName": "lodash",
  "libraryDirectory": "",
  "camel2DashComponentName": false,  // default: true
}
{
  "libraryName": "@material-ui/core",
  "libraryDirectory": "components",  // default: lib
  "camel2DashComponentName": false,  // default: true
}

options can be an array. It's not available in [email protected]+

For Example:

[
  {
    "libraryName": "antd",
    "libraryDirectory": "lib",   // default: lib
    "style": true
  },
  {
    "libraryName": "antd-mobile"
  },
]

Options can't be an array in [email protected]+, but you can add plugins with name to support multiple dependencies.

For Example:

// .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, 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.

[
  "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.

{
  "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:

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

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

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

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

[
  "import",
    {
      "libraryName": "antd",
      "customName": (name: string, file: object) => {
        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:

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:

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

The customName.js looks like this:

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

babel-plugin-import will not work properly if you add the library to the webpack config vendor.

Release Notes

1.13.5
By chencheng (云谦) • Published on April 14, 2022
1.13.4
By chencheng (云谦) • Published on April 11, 2022
  • chore: update build script 05c959b
  • feat(customStyleName): 完善customStyleName传参 (#603) 469c018
  • fix: newExpression arguments not be traverse issue (#597) d21264e

https://github.com/ant-design/babel-plugin-import/compare/v1.13.3...v1.13.4

1.13.3
By chencheng (云谦) • Published on November 24, 2020
1.13.3-beta.1
By chencheng (云谦) • Published on November 24, 2020
1.13.2
By chencheng (云谦) • Published on November 24, 2020
  • fix variable assignment supports comma expression, also fix istanbul conflicts (#549) 3ac277e

https://github.com/ant-design/babel-plugin-import/compare/v1.13.1...v1.13.2

1.13.1
By chencheng (云谦) • Published on October 10, 2020
  • feat: add switch and switchCase treatment (#520) 917e8dc
  • chore(deps-dev): bump eslint from 7.9.0 to 7.10.0 (#522) 4a89311
  • chore(deps-dev): bump eslint-plugin-import from 2.20.2 to 2.22.1 (#523) d3c3bde
  • chore(deps-dev): bump prettier from 2.1.1 to 2.1.2 (#517) 61a46a8
  • chore(deps-dev): bump lint-staged from 10.3.0 to 10.4.0 (#518) 774b64a
  • chore(deps-dev): bump eslint from 7.1.0 to 7.9.0 (#516) 73ed061
  • chore(deps-dev): bump husky from 4.2.5 to 4.3.0 (#515) cca51bd
  • chore(deps-dev): bump @babel/core from 7.8.4 to 7.11.6 (#513) 8b0828e
  • chore(deps-dev): bump lint-staged from 10.2.13 to 10.3.0 (#514) 731f2d0
  • chore(deps-dev): bump lint-staged from 10.2.11 to 10.2.13 (#511) a0ceb95
  • chore(deps-dev): bump prettier from 2.0.5 to 2.1.1 (#512) a419e16
  • Update README.md (#510) 8096fdf
  • chore(deps): [security] bump lodash from 4.17.15 to 4.17.19 (#491) 0c2eabe
  • chore(deps-dev): bump lint-staged from 10.2.8 to 10.2.11 (#469) f39e711
  • chore: use Prettier format (#458) 5cb2349
  • customName 参数添加透传 File 对象 (#413) 39afe42
  • chore(deps): bump @babel/helper-module-imports from 7.7.4 to 7.8.3 (#410) 667e85e
  • chore(deps-dev): bump np from 5.2.1 to 6.2.0 (#418) 9f5825d
  • chore(deps): [security] bump acorn from 5.7.3 to 5.7.4 (#425) 55dd22d
  • Merge pull request #414 from ant-design/dependabot/npm_and_yarn/babel/core-7.8.4 7300eba
  • Merge pull request #415 from ant-design/dependabot/npm_and_yarn/babel/runtime-7.8.4 30cfcbc
  • chore(deps): bump @babel/runtime from 7.7.7 to 7.8.4 3b386d4
  • chore(deps-dev): bump @babel/core from 7.7.7 to 7.8.4 6b5e0c9
  • Merge pull request #412 from Jeff-Tian/patch-1 654e3b1
  • fix: typo d63dea6
  • Merge pull request #339 from ant-design/dependabot/npm_and_yarn/umi-tools-0.4.0 53cb98b
  • Bump umi-tools from 0.1.4 to 0.4.0 ae74c70
  • Merge pull request #385 from ant-design/dependabot/npm_and_yarn/babel/preset-react-7.7.4 b94b3a9
  • Merge pull request #386 from ant-design/dependabot/npm_and_yarn/babel/helper-module-imports-7.7.4 fbba486
  • Merge pull request #398 from ant-design/dependabot/npm_and_yarn/eslint-6.8.0 b1bf749
  • Merge pull request #401 from ant-design/dependabot/npm_and_yarn/handlebars-4.6.0 9a1614b
  • [Security] Bump handlebars from 4.0.12 to 4.6.0 4d28c84
  • Merge pull request #400 from ant-design/dependabot/npm_and_yarn/babel-preset-umi-1.8.2 c146a35
  • Bump babel-preset-umi from 1.6.1 to 1.8.2 4e36f25
  • Bump eslint from 6.7.2 to 6.8.0 58a97d7
  • Merge pull request #396 from ant-design/dependabot/npm_and_yarn/babel/core-7.7.7 802f65f
  • Merge pull request #397 from ant-design/dependabot/npm_and_yarn/babel/runtime-7.7.7 b630173
  • Bump @babel/runtime from 7.7.6 to 7.7.7 d6b4a6f
  • Bump @babel/core from 7.7.5 to 7.7.7 cacc2a2
  • Bump @babel/helper-module-imports from 7.0.0 to 7.7.4 f141108
  • Merge pull request #394 from ant-design/dependabot/npm_and_yarn/babel/runtime-7.7.6 6bcf829
  • Merge pull request #395 from ant-design/dependabot/npm_and_yarn/babel/core-7.7.5 70b347a
  • Merge pull request #393 from ant-design/dependabot/npm_and_yarn/eslint-6.7.2 5491ec0
  • Bump @babel/core from 7.6.0 to 7.7.5 c2e6592
  • Bump @babel/runtime from 7.6.0 to 7.7.6 96e5d9f
  • Bump eslint from 4.18.2 to 6.7.2 0991ccb
  • Merge pull request #392 from ant-design/dependabot/npm_and_yarn/eslint-4.18.2 082dd16
  • Bump eslint from 2.13.1 to 4.18.2 c1bbafd
  • Merge pull request #387 from ant-design/dependabot/npm_and_yarn/coveralls-3.0.9 6531599
  • Bump coveralls from 3.0.6 to 3.0.9 19c42a9
  • Merge pull request #389 from ant-design/dependabot/npm_and_yarn/np-5.2.1 9e83c59
  • Bump np from 5.0.3 to 5.2.1 c9e1db6
  • Bump @babel/preset-react from 7.0.0 to 7.7.4 40575ed

https://github.com/ant-design/babel-plugin-import/compare/v1.13.0...v1.13.1

1.13.0
By chencheng (云谦) • Published on November 25, 2019
  • add styleLibraryDirectory option, fixes #381 (#382) 36cb5e4
  • Merge pull request #359 from shaodahong/patch-1 8efa514
  • docs: update webpack config vendor link 1fc962a

https://github.com/ant-design/babel-plugin-import/compare/v1.12.2...v1.13.0

1.12.2
By chencheng (云谦) • Published on September 23, 2019
1.12.1
By chencheng (云谦) • Published on August 28, 2019
  • chore: publish with np 2306f14
  • fix: Fixes #256, generate import with path transformed from imported (#345) 0bec7e9

https://github.com/ant-design/babel-plugin-import/compare/1.12.0...v1.12.1

1.10.0
By chencheng (云谦) • Published on October 17, 2018
  • Add Option to Keep Named Imports, #277

General

License
MIT
Typescript Types
None found
Tree-shakeable
No

Popularity

GitHub Stargazers
3,004
Community Interest
3,214
Number of Forks
405

Maintenance

Commits
11/2110/2205
Last Commit
Apr 14, 2022
Open Issues
112
Closed Issues
239
Open Pull Requests
11
Closed Pull Requests
163

Versions

Versions Released
11/2110/2202
Latest Version Released
Current Tags
latest1.13.5
beta1.6.3-beta.1

Contributors

sorrycc
sorrycc
Commits: 85
yesmeck
yesmeck
Commits: 19
afc163
afc163
Commits: 13
yiminghe
yiminghe
Commits: 4
GeoffZhu
GeoffZhu
Commits: 3
simonguo
simonguo
Commits: 3
paranoidjk
paranoidjk
Commits: 3
yibuyisheng
yibuyisheng
Commits: 3
p2227
p2227
Commits: 3
cncolder
cncolder
Commits: 2
chhu1
chhu1
Commits: 2
jljsj33
jljsj33
Commits: 2
C-Rodg
C-Rodg
Commits: 2
kookxiang
kookxiang
Commits: 2
shaodahong
shaodahong
Commits: 2