import() syntax in es2015

es2015中使用inport和export语法实现的模块体系时完全静态的，模块依赖关系在编译(是的，javscript也是会编译的)时就被决定了，运行时无法更改。这样的优点是可以在编译时进行静态分析，方便进行静态检查和优化。然而静态模块的不便之处似乎更加明显，我们无法动态的加载模块了。

比如在commonjs中，我们可以这样写：

1
2
3
4
5
6
7
8
9
10
11
12
13
let test;
let moduleName = "";

if (Math.random() > 0.5){
    moduleName = "./a.js";
}
else {
    moduleName = "./b.js";
}

test = require(moduleName);

console.log(test);

但是在使用es2015的import时是不行的，假如用import重写上面的代码的话，import是在编译阶段被处理的，此时无法知道if语句的条件成立与否，变量也都没有被创建，所以使用import上面的代码会直接在编译阶段报语法错误。所以import和export只能放在代码的最顶层，不能被代码块所包含。

但是动态加载模块有时还是很有用的，所以提出了import()。

因为node8版本还是不支持es2015的模块系统，所以用webpack来配合下。

1
2
3
4
5
6
7
8
9
setTimeout(() => {
    import("jquery").then($ => {
        console.log("jquery imported:", $);
    })
}, 1000);

console.log("jquery:", $);

export default index;

webpack的相关信息可以看文档

import()返回的是一个promise对象，所以和commonjs的require不同，import()是异步的。

其实一开始我还想了下为啥没有export()之类的东西…

相关链接