import属于编译时加载,和Node的require的运行时加载不同,所以import语句是最先执行的,因此下列写法会报错
var x = 2;
if(x == 2){
import {name} from "./name"
}
export和import的基本用法
//moudleTest.js
let i = 1;
let j = 2;
export {i, j}
//main.js
import {i, j} from './moudleTest.js'
console.log(i); // 1
console.log(j); // 2
//和上面等效的另外一种写法是:
//moudleTest.js
let i = 1;
let j = 2;
export {i};
export {j};
//main.js
import {i} from './moudleTest.js'
import {j} from './moudleTest.js'
console.log(i); // 1
console.log(j); // 2
export 有一种情况要注意:
用export导出之后被声明的变量,这个变量的值为undefined
//moduleTest.js
let i = 1;
export {i, j};
let j = 2;
//main.js
import {i} from './moduleTest';
import {j} from './moduleTest'
console.log({
i : i,
j : j
})
输出结果:
export default: 当使用者不想知道导出文件中变量的具体名字时,可以使用默认导出的方式
//moduleTest.js
let i = 1;
export default i;
// main.js
import im from './moduleTest.js'
console.log(im); // im是随便取的,值为1
import *: 当你想导出导出文件里的全部导出变量时,你可以用这种方式导出
要注意的是,这种方式导出的是一个对象,导出量是它的属性
例子:
//moduleTest.js
let i = 1;
export default i;
export function each(obj, iterator, context) {
// ···
}
//main.js
import * as im from './moduleTest.js'
console.log(im);
结果:
这里我们要特别关注的是默认导出的结果,我们发现默认导出的属性名是default,所以说默认导出的实质就是将变量的值赋给default,然后以default为接口导出,导入时,可以以任意名称导入