import export 用法解析

回想起当年 看到 

import myImport from '@/api/paiExportTest.js';  

import *  as myImport from '@/api/paiExportTest.js';  

之类的引入犯晕的时候，今天再次总结一下各种 import方式，加深记忆，楼座备忘。

闲话少叙 直接上码。

首先 创建被引入的 文件 paiExportTest.js ，代码如下：

 

 

export default function export0() {

console.log('export0')

}

 

export function export1() {

console.log('export1')

}

 

export function export2() {

console.log('export2')

}

console.log('啥也没干，就是执行了一遍')

 

下面 开始 使用import 进行各种引入：

1、import myImport from '@/api/paiExportTest.js';

当被引入文件中 含有export default（默认对象）的时候 通过上面方式引入默认对象。

注意 此时  myImport  就是 

export default function export0() {

console.log('export0')

}

直接 执行 myImport();   等就是 执行 export0

特别注意 当引入 默认对象的时候 如果 被引入文件 没有定义默认对象，将会报错。

 

2、import * as myAllImoprt from '@/api/paiExportTest.js';

引入paiExportTest.js的所有export的对象（不包含default对象）

调用方法如下

myAllImoprt.export1();

myAllImoprt.export2();

myAllImoprt是引入的集合

3、import myImport, * as myAllImoprt from '@/api/paiExportTest.js';

此处比较容易理解，myImport是引入的default 对象 ， myAllImoprt 是引入除default以外的集合。

4、import {export1, export2} from '@/api/paiExportTest.js';

逐个引入对象，需要注意引入名和被引入的对象名要相同且 不能引入difault对象。

引入后直接执行方法名就可以

export1();

export2();

5、import {export1 as e1, export2 as e2} from '@/api/paiExportTest.js';

逐个引入并重命名

e1();

e2();

6、import  myImport， {export1 as e1, export2 as e2} from '@/api/paiExportTest.js';

这个也比较好理解，引入default 对象  和 逐个引入其他对象 并且重命名

7、

import('@/api/paiExportTest.js')

.then((module) => {

module.export1()

module.export2()

});

此方法 很类似 import * as myAllImoprt from '@/api/paiExportTest.js';  但是 他是异步执行的

异步引入，注意module.export0()会报错，因为 export0 是 default 。 default 定义的 不可以这样引入使用。 

8、既然可以异步执行 ，那么 如下也可以的：

let module = await import('@/api/paiExportTest.js');

这个不用过多解释。同步执行异步方法。

9、import '@/api/paiExportTest.js';

'啥也没干，就是执行了一遍'