es6的import和export

前边我给大家说webpack的时候使用的a.js和demo.js比较简单内容分别是，a.js:

export var a='http://www.roadjava.com';

demo.js:

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

当时，只是为了验证webpack结合babel转码es6的问题，现在我来深入一点说说es6里面的import和export吧。

一、单独导出与导出多个

修改a.js:

var b='b';
export {b,b as bb};

上面表示导出两个，一个叫b变量，一个叫bb变量,导出多个的时候需要用{}括起来。

修改demo.js

import {b,bb} from './a.js'
console.log(b);
console.log(bb);

运行webpack：

查看test.html的输出：

二、到目前为止，用户在import的时候必须知道导出的变量名或者函数名是什么才可以使用导出的东西，这很操蛋，也很局限，可以使用export default来解决，使用了export default，在导入的时候随便赋予名字即可，如  import xxx from './a'

修改a.js:

const xinqing='惆怅';
export default xinqing;

前边我们如果想导出一个变量，需要export {xinqing}；如果写成export  xinqing，那么在import的文件中是无法识别的，但是加上了default就可以了.需要注意的是一个文件内最多只能有一个export default。千万要注意，export default的时候，变量不加{}.

修改demo.js:

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

随便起名字就可以使用a.js中导出的变量。

执行结果：

注意：在import的文件中，也不需要使用{}获取export default导出的变量、函数、对象

三、我们再来试试使用export default导出函数

a.js:

export default function (){
	return 3;
};

demo.js:

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

执行结果：

四、使用export default导出对象

a.js:

export default {  
	id:222,
	name:'zhao'
};

demo.js:

import obj from './a.js'
console.log(obj.id+":"+obj.name);

执行结果：