ES6模块import细节

ES6引入外部模块分两种情况：

1.导入外部的变量或函数等；

import {firstName, lastName, year} from './profile';

2.导入外部的模块，并立即执行

import './test'
//执行test.js，但不导入任何变量

第2种情况就不用讲了，就是执行从头到尾执行引入的js文件，当然，会忽略js文件里export。

下面详细讲第1种情况。

两个js文件,counter.js与my.js

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

// my.js
console.log('111111');
export var a = 'aaaaaaa';
console.log('222222');

运行的结果是什么呢？

好，下面来问题了，咱们把console.log(a)这句去掉，看看运行结果

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

咦，只输出这一句了？我们明明引入了my模块了，为何模块里的代码没有执行呢。

这要从ES6模块加载的实质谈起。在阮一峰的ES6入门一书里讲到：ES6模块的运行机制与CommonJS不一样，它遇到模块加载命令import时，不会去执行模块，而是只生成一个动态的只读引用。等到真的需要用到时，再到模块里面去取值，换句话说，ES6的输入有点像Unix系统的“符号连接”，原始值变了，import输入的值也会跟着变。

可是按照上面说的，那有console.log(a)的时候，应该是输出3333，1111，2222的顺序，而不是1111,2222,333的顺序呀。我猜测是上面讲的不细致的原因，应该分为编译时和运行时来说。ES6的这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，在编译的时候，发现了后面有使用到a的地方，就在运行时遇到import的地方直接执行了模块的代码。当然只是自己的猜测。

有一点别忘了：模块内部的变量不向外暴露的话，外界是无法使用这些内部变量的。所有有时候会看到，这个模块引用了一个vue.js，另外一个模块也要引用vue.js，这是因为vue.js内部很多东西没有暴露，所以都需要引用。

更详细的ES6知识，可参考：
http://caibaojian.com/es6/module.html