babel-plugin-import-custom

customized for iview, and keep the original function unchanged.

主要改动点：

• import iView from 'iview'，在参数load设置成'auto'后，可自动把iview所有组件按照按需引入的方式全部引入，见下例

• import { Circle, Table } from 'iview'，在参数load设置成'auto'后，可自动将两个组件按Vue.component方式引入，见下例

• 当libraryName为iview时，style设置成css或true，不能按需引入样式，只能全量引入

打包大小对比图(都引入了vue及相关loader、template-loader)

| 全量引入 | 按需引入(Button, Table) | 按需引入(Button) | 按需引入全部组件 | | -------- | :----: | :----: | :----: | | 634 KiB | 169 KiB | 73.4 KiB | 501 KiB |

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

Why babel-plugin-import-custom

• English Instruction
• 中文说明

Where to add babel-plugin-import-custom

• babelrc
• babel-loader

Example

{ "libraryName": "iview", "load": 'auto', "style": 'css' }

import { Circle, Table } from 'iview';

      ↓ ↓ ↓ ↓ ↓ ↓
      
import _Table from "iview/src/components/table";
import _Circle from "iview/src/components/circle";
Vue.component("iCircle", _Circle);
Vue.component("iTable", _Table);
Vue.component("Table", _Table);
import "iview/dist/styles/iview.css";

{ "libraryName": "iview", "load": 'auto', "style": true }

import { Circle, Table } from 'iview';

      ↓ ↓ ↓ ↓ ↓ ↓
      
import _Table from "iview/src/components/table";
import _Circle from "iview/src/components/circle";
Vue.component("iCircle", _Circle);
Vue.component("iTable", _Table);
Vue.component("Table", _Table);
import "iview/src/styles/index.less";

{ "libraryName": "iview", "load": 'auto', "style": true }

import iView from 'iview';

      ↓ ↓ ↓ ↓ ↓ ↓
      
// 引入全量的组件
import _Table from "iview/src/components/table";
import _Circle from "iview/src/components/circle";
// ...
import Switch from "iview/src/components/switch";
Vue.component("iCircle", _Circle);
Vue.component("iTable", _Table);
Vue.component("Table", _Table);
// ... 
Vue.component("iSwitch", Switch);
import "iview/src/styles/index.less";

{ "libraryName": "iview", "style": true }

import iView from 'iview'
Vue.use(iView)

      ↓ ↓ ↓ ↓ ↓ ↓
      
import iView from 'iview'
Vue.use(iView)
import "iview/src/styles/index.less";

{ "libraryName": "iview", "style": true }

import { Circle, Table } from 'iview'
Vue.component('iCircle', Circle)

      ↓ ↓ ↓ ↓ ↓ ↓
      
import _Circle from "iview/src/components/circle";
import "iview/src/styles/index.less";\nVue.component(\'iCircle\', _Circle);'

{ "libraryName": "iview", "style": true }

import { Circle, Table } from 'iview'

      ↓ ↓ ↓ ↓ ↓ ↓
      
import "iview/src/styles/index.less";

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

当libraryName为iview时，style设置成css或true，不能按需引入样式，只能全量引入

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-custom --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 babel@7+

For Example:

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

// .babelrc
"plugins": [
  ["import", { "libraryName": "antd", "libraryDirectory": "lib"}, "ant"],
  ["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-custom 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`;
      }
    }
]

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) => {
        if (name === 'TimePicker'){
          return 'antd/lib/custom-time-picker';
        }
        return `antd/lib/${name}`;
      }
    }
]

So this result is:

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

transformToDefaultImport

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

Note

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