export和import 复合写法

1,011 阅读1分钟

如果在一个模块之中,先输入后输出同一个模块,import语句可以与export语句写在一起。

export { foo, bar } from 'my_module';

// 可以简单理解为
import { foo, bar } from 'my_module';
export { foo, bar };

上面代码中,exportimport语句可以结合在一起,写成一行。但需要注意的是,写成一行以后,foobar实际上并没有被导入当前模块,只是相当于对外转发了这两个接口,导致当前模块不能直接使用foobar

模块的接口改名和整体输出,也可以采用这种写法。

// 接口改名
export { foo as myFoo } from 'my_module';

// 整体输出
export * from 'my_module';

默认接口的写法如下。

export { default } from 'foo';

具名接口改为默认接口的写法如下。

export { es6 as default } from './someModule';

// 等同于
import { es6 } from './someModule';
export default es6;

同样地,默认接口也可以改名为具名接口。

该方式可以将多个组件合并到index.js中导出, 然后其他地方引入这些组件的时候,都统一从index.js中引入. 暂时发现,这么做的好处是,如果目录或组件重命名了,那只要将index.js改正确即可.不过如果使用的是webstorm貌似就没有这方面的优势了.

export { default as es6 } from './someModule';

// 等同于
import es6 from './someModule'
export { es6 }