关于JS模块化时循环加载的那些事儿（二）
上一篇文章中介绍了ES6和CommonJS语法分别对于循环加载时的处理情况，本期介绍两种语法混合使用时对于循环加载的处理。
为什么能够同时使用两种语法呢？这样归功于babel插件：@babel/plugin-transform-modules-commonjs,在经过插件处理后我们可以同时使用两种语法而不会报错。
来看一个比上一期稍微复杂一点的例子。在a.js中同时使用了两种语法，ES6 import导入，CommonJS module.exports导出，同时构建了一个a->b->c->a的循环加载场景
1、a.js
//a.js es6 with commonjs
import * as b from './b'
console.log('a.js中的b:', b);
const sayHi = (name) => {
console.log('Hi,', name);
}
const callFunc = (name) => {
b.sayBye(name);
}
module.exports={
sayHi:sayHi,
callFunc:callFunc
}
2、b.js
//b.js es6
import * as c from './c'
console.log('b.js中的c:', c);
const sayBye = (name) => {
console.log('Bye,', name);
}
const callFunc = (name) => {
c.sayHello(name);
}
export {
sayBye,
callFunc
}
3、c.js
//c.js es6
import * as a from './a'
console.log('c.js中的a:', a);
const sayHello = (name) => {
console.log('Hello,', name);
}
const callFunc = (name) => {
a.sayHi(name);
}
export {
sayHello,
callFunc
}
4、main.js
//main.js es6
import * as a from './a.js'
import * as b from './b.js'
import * as c from './c.js'
const f = () => {
a.sayHi('zzx')
b.sayBye('zzx');
c.sayHello('zzx');
a.callFunc('zzx')
b.callFunc('zzx');
c.callFunc('zzx');
}
export { f }
5.TestImportExport.js
//TestImportExport.js es6
import React from 'react';
import * as testmodule from './test_ES6/main';
function TestImportExport() {
console.log(testmodule);
return (
<div>
<button onClick={ testmodule.f}>测试</button>
</div>
);
}
export default TestImportExport;
OK,现在来看一看控制台的输出
打开网页时：
打开网页时控制台的输出
从图中可以看到，c.js中记载进来的模块是一个带有default属性但是没有任何值的空对象，而b.js和a.js中加载进来的模块都是正常的。为什么呢？我们来看一看执行顺序就明白了。
首先是main.js加载a.js,执行a.js时发现加载了b.js又去执行b.js,执行b.js时发现加载了c.js又去执行c.js,此时a.js还没执行完，module.exports还未完成赋值，所以此时控制台输出的a是一个空对象，至于default属性的存在是因为使用了import语法导入经过了babel转换。执行完c后返回执行b再执行a，这就是我们看到的输出顺序。
再来看一看点击按钮后的控制台输出：
点击按钮后的控制台输出
从图中可以看到，在执行c中的callFunc时出现错误，因为a在加载时并没有真正的值，所以无法执行。
现在我们来修复一下这个问题：
对a.js做一下修改
//a.js es6
import * as b from './b'
console.log('a.js中的b:', b);
const sayHi = (name) => {
console.log('Hi,', name);
}
const callFunc = (name) => {
b.sayBye(name);
}
module.exports={
sayHi:sayHi,
callFunc:callFunc
}
//新加ES6语法的导出
export {
sayHi,
callFunc
}
OK，我们再来看一看控制台的输出：
打开网页时：
打开网页时控制台的输出
从图中可以看到，修改之后c.js中加载的模块已经和其余a.js、b.js中加载的模块形式上保持一致了，但是相应的值还是undefined，展开后又能看到真实的值，这是混用module.exports和export的结果，babel会把export转换为commonjs语法，我们来看一下a.js编译后的代码：
a.js编译后的代码
从图中可以看到，babel转换后的代码中export消失了，取而代之的是exports,并且在加载b.js之前已经给exports赋值callFunc和sayHi并且值为undefined，所以在c.js中加载a时显示出来的就是图中的结果，真实运行时已经是执行完a.js，此时callFunc和sayHi已被重新赋值，所有函数都能正常执行。
再来看看点击按钮后的结果：
点击按钮后控制台的输出
从图中可以看到，所有函数都能正常运行。
经过插件转换后的export会把所有导出的内容都提前赋值为undefined，然后在执行到模块时重新赋值。修改一下a.js
//a.js es6 with commonjs
import * as b from './b'
console.log('a.js中的b:', b);
const sayHi = (name) => {
console.log('Hi,', name);
}
const callFunc = (name) => {
b.sayBye(name);
}
//增加一个常量
const name = 'zzx';
module.exports={
sayHi:sayHi,
callFunc:callFunc
}
export {
sayHi,
callFunc,
name
}
再来看看编译后的代码：
a.js修改后的编译输出
此时打开网页的控制台输出如下：
修改后的控制台输出
我们再对c.js做一下修改，看一看加载后不立即使用a模块的情形。修改一下c.js
//c.js es6
import * as a from './a'
console.log('c.js中的a:', a)
setTimeout(()=>{console.log('c.js中的a(1ms以后):', a)},1);
const sayHello = (name) => {
console.log('Hello,', name);
}
const callFunc = (name) => {
a.sayHi(name);
}
export {
sayHello,
callFunc
}
来看看此时的控制台输出
c.js修改后的输出
从图中可以看到，加载模块后立即使用是只有exports提前赋值的值，而在模块全部加载完之后再使用是OK的。
综上所述，babel插件会把ES6语法转换为CommonJS语法并且做一些额外的操作（如提前赋值）以保证转换后的表现与ES6语法期待的表现一致，出现循环加载时可以正常运行，除非你在加载模块后立即使用。
本期介绍暂告一段落，下期一起去看一看webpack对模块时如何加载管理的。
网友评论