es6模块命令

es6的模块命令分为export命令和import命令，其中export命令用于导出变量，import命令用于引入变量。

1.1

a文件：

export var name = "name";
export var age = 1;

以上a文件中使用export命令导出了name和age变量。下面，将在b文件中使用import命令进行引入

b文件:

import {name,age} from './a.js';

console.log(name) //name
console.log(age) //1

以上b文件中使用import命令引入变量，变量需要放在花括号当中，from关键字后面指定文件的路径。.js后缀可省略。

1.2 第二种更加常用的变量导出的写法

a文件：

var name = "name";
var age = 1;

export {name,age};

即使用花括号包装起要输入的变量。

1.3 使用as关键字重命名

export {name as myName,age as myName};

import {myName,myName} from './a.js';

如上所示，使用as关键字可以对导出的变量进行重命名，对于导入的变量，同样也可以使用as命令

export {name,age};

import {name aas name1,age as age1} from './a.js';

1.4 错误的变量导出方式：

var age = 1;
export age; 错误
export 1; 错误
export var age = 1; 正确
export {age}; 正确

function fn () {}
export fn; 错误
export function fn () {} 正确
export {fn} 正确

1.5 模块导出的变量具有动态性

a文件：

var name = "name";
export {name};
setTimeout(() => name = "age", 1000);

b文件：

import {name} from './a.js';
console.log(name) //name
setTimeout(() => console.log(name),1500) //age

上面代码中，a文件中的变量在导出后被修改了，而b文件中依然能够获取到改变后的值。

1.6 变量导出的位置

变量的导出应该在模块的顶层作用域中。

var name = "name";

function fn () {
	export {name} //错误
}

fn()

如上在函数内导出变量，将报错。

1.7 变量提升效果

console.log(name) //name
import {name} from './a.js';

以上代码不会报错。因为import会最先被执行。

1.8、使用*字符引入变量。

使用*字符可以将模块中所有导出的变量导入到指定的变量中。

a文件:

var name = "name";
var age = "age";
var sex = "sex";
export {name,age,sex}

b文件：

import * as varibles from './a.js';

console.log(varibles.name) //name
console.log(varibles.age) //age
console.log(varibles.sex) //sex

需要注意的是，不可对varibles进行修改，否则将报错，如下：

varibles.name = 1; 错误

1.9、export default命令

export default命令与export命令一样用于导出变量。不同的是，export可以使用多次。在导入变量的时候,需要知道输入的变量名称才能进导入，而export default只能使用一次，在导入变量的时候，用户不需要知道模块内部导出的变量名称。

a文件：

var name = "name";
export default name;

b文件：

import varibles from './a.js';
console.log(varibles) //name

可见，export default在导出变量的时候，不需要像export一样使用花括号。在引入变量的时候也一样。
export default命令最大的好处就是不需要知道模块内部导出的变量名是什么，可以直接使用自己定义的变量名。这样就不需要麻烦地去查看文件中导出的变量名了。

需要注意的是，export default后面不能跟声明变量的语句，因为export default命令实质上是输出了一个叫default的变量,然后允许你在引入的时候为这个变量取任意名称。

export default var name = 1; //错误
export default 1; 正确

var name = 1;
export default name; //正确

2.0 同时引入一个模块中使用export default和export导出的变量。

a文件：

var name = "name";
var age = 1;
export default name;
export {age};

b文件：

import varibles, {age} from './a.js';
console.log(age) //1
console.log(varibles) //name

2.1 import和export的复合写法

export {name,age} from 'xxx';

上面的写法等同于：

import {name,age} from 'xxx';

export {name, age};

2.2 整体输出

export * from 'xxx';

2.3 默认接口

export {default} from 'xxx';

2.4 具名接口改为默认接口

export {name as default} from 'xxx';

等同于：

import {name} from 'xxx';
export default name;

2.5 import不可动态加载模块

var path = './' + fileName;
import xxx from path; 错误！

if (true) {
  import xxx from 'xxx' 错误！
}

function fn () {
  import xxx from xxxx; 错误！
}

执行上面的代码都将报错，因为引擎处理import语句是在编译时，而不是在代码执行的时候，所以这些import语句都毫无意义，会直接报错。如果需要使用动态加载，可以考虑使用node的require方法。而目前有一个提案，提案提供了import()方法让es6的模块功能实现动态加载。

猜你喜欢