babel-plugin-module-call-import v1.0.1

根据库命名空间的调用导入模块

根据一个库的命名空间的调用进行按需导入。

添加依赖:

npm i -D babel-plugin-module-call-import

它能将下面代码：

import utils from 'utils@'
utils.downloadFile('path/to/file')

转换为：

import _downloadFile from 'utils@/downloadFile'
_downloadFile('path/to/file')

或者将下面代码：

import * as Antd from 'antd';
ReactDOM.render(<Antd.Button>xxxx</Antd.Button>);

转换为：

import Button from 'antd/lib/button';
import('antd/lib/button');
ReactDOM.render(<Button>xxxx</Button>);

还支持将

import El from 'element-ui';

export default {
  name: 'TestComponent',
  components: {
    [El.ButtonGroup.name]: El.ButtonGroup,
    [El.Button.name]: El.Button,
  },
};

转换为

import ButtonGroup from 'element-ui/lib/button-group';
import Button from 'element-ui/lib/button';

export default {
  name: 'TestComponent',
  components: {
    [ButtonGroup.name]: ButtonGroup,
    [Button.name]: Button,
  },
};

选项

components

类型为：{ [componentId: string]: (libraryName: string, ...modules: string[]) => {source: string, extras: string[]} }。

库按需导入配置。

值为一个对象，每个键为库的id, 如antd, @component等，等源码中导入语句中的地址匹配库id时，就会开启按需导入。如：

import * as Ad from 'antd';
import Comp from '@component';

如果配置了antd, @component两个库的化，就会触发。

library对象的值为一个回调配置函数，函数传递的第一个参数为libraryName库名，其他参数都作为modules模块列表, 返回一个新导入的信息。

• componentName为导入的组件名，如import { Button } from 'antd';中libraryName会为antd;
• modules为库引用时的引用路径上的模块列表，如import * as Ad from 'antd'; Ad.a.b.c.d，那么modules会为['a', 'b', 'c', 'd'], 对模块列表生成动态的导入路径，可以控制那些是作为模块导入路径，那些是模块上的属性;
• 返回的一个新导入信息对象，对象的格式为：{source: string,extras: string[]}；
  • source为新导入语句的导入地址，如设置/path/to/file.js将会生成语句import moduleId from '/path/to/file.js'；
  • extras为额外导入地址，通常可用于UI组件库的其他资源导入，如样式资源。不配置或者配置为空不生成额外导入；