🌜
🌞
@ovos-media/babel-plugin-import

@ovos-media/babel-plugin-import

v1.13.2

Fork of the component modular import plugin for babel.

npm install @ovos-media/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.2
By chencheng (δΊ‘θ°¦) β€’ Published on September 16, 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 September 11, 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

General

License
MIT
Typescript Types
None found
Tree-shakeable
No

Popularity

GitHub Stargazers
3,003
Community Interest
3,197
Number of Forks
405

Maintenance

Commits
10/219/2205
Last Commit
Open Issues
111
Closed Issues
239
Open Pull Requests
11
Closed Pull Requests
163

Versions

Versions Released
10/219/2201
Latest Version Released
Sep 16, 2020
Current Tags
latest1.13.2

Contributors

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