Export & Import用法总结

欢迎关注个人公众号睿Talk，获取我最新的文章：

1、前言

最近在作React组件库升级的时候，发现之前这种旧的import方式不能用了：

import zent from 'zent';

const {Input, Notify} = zent;

要改为这种形式：

import {Input, Notify} from 'zent';

究其缘由，是组件库的export方式改变了。旧版本是这样export的：

const zent = {
    Input, 
    Notify,
    ...
};

export default zent;

而新版本是这样的：

export {
    Input, 
    Notify,
    ...
};

2、知识点

Export支持2种方式，一种是 Named export（新版组件库），另外一种是 Default export（旧版组件库）。

使用 Named export能够在import的时候指定子模块：

import {Input, Notify} from 'zent';

而使用Default export在import的时候只能引用模块总体：

import zent from 'zent';

后续使用子模块时再作解构：

const {Input, Notify} = zent;

另外，Named export 还有另一种形式：

export const getAllDepts = () => {...};

export const getCurDept = () => {...};

export const getHeadquarter = () => {...};

也能够在使用的时候指定须要的子模块：

import {getAllDepts, getCurDept} from 'util'

若是在 Name export 中也使用 export default：

export const getAllDepts = () => {...};

export const getCurDept = () => {...};

export const getHeadquarter = () => {...};

export default getCurDept;

当 import 时不指定子模块，就会默认加载 default 子模块。

3、设计原则：

当模块有多个独立功能，能够分拆使用的时候（如工具类模块），应使用 Named export 的方式。当模块只包含一个独立的总体（如React组件），则使用 Default export 的方式。