关于JS模块化时循环加载的那些事儿

关于JS模块化的相关知识有很多，一些基本的知识平时都会有注意到，但是在实践中发现对于模块循环加载的情景不太注意，本文主要记录一下在webpack中使用模块化的一些心得。
说到模块化，离不开CommonJS和ES6，有的项目在使用时也会同时存在这两种语法，至于AMD和CMD不在本文讨论范围内。

CommonJS中的循环加载

来看一个简单的例子，定义了四个文件a.js、b.js、main.js、TestImportExport.js，其中a.js和b.js相互引用，形成一个循环引用，main.js中引用a.js和b.js，TestImportExport.js用于测试。
1、a.js

//a.js
const b = require('./b.js');
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
const a = require('./a.js');
console.log('b.js中的a:',a);

const sayBye = (name)=>{
  console.log('Bye,',name);
}
const callFunc=(name)=>{
  a.sayHi(name);
}
module.exports={
  sayBye:sayBye,
  callFunc:callFunc
}

3、main.js

//main.js
const a = require('./a.js');
const b = require('./b.js');

const f = () => {
  a.sayHi('zzx');
  b.sayBye('zzx');
  a.callFunc('zzx');
  b.callFunc('zzx');
}
export { f }

4、TestImportExport.js

//TestImportExport.js
import React from 'react';
import * as testmodule from './test_import_export/main';
function TestImportExport() {
  console.log(testmodule);
  return (
    <div>
      <button onClick={ testmodule.f}>测试</button>
    </div>
  );
}

export default TestImportExport;

OK,现在问题来了，我在浏览器中打开test页面，日志台会输出什么结果？点击‘测试’按钮之后又会输出什么结果？
直接上图
打开时：

打开页面时控制台的输出

从图中可以看到，打开时console的输出顺序是：b.js-a.js-TestImportExport.js,为什么呢?
原因是webpack会先执行import或者require的模块。所以执行顺序是TestImportExport先去运行main，运行main时发现main引用了a,又去运行a,运行a时发现a引用了b，又去运行b。此时b又引用了a，但是刚刚已经运行过a了，所以b会接着往下执行，输出第一个console，此时由于a只执行了部分所以此时引入的a是一个空对象。执行完b之后继续执行a,输出b。执行完a之后继续执行main，此时不会重复去加载b，而是使用在a中已经加载好的b。最后输出TestImportExport中的console。

点击按钮后：

点击按钮后控制台的输出

点击按钮后回去执行f中的函数，a.sayHi、b.sayBye、a.callFunc都能正常运行，b.callFunc会报错，因为b中的a在执行时就确定了是一个空对象，所以无法获取相应的函数,执行出错。
现在，我们来看一看另外一种写法的CommonJS,修改一下a.js文件,其余文件不变

//a.js
const b = require('./b.js');
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
// }
exports.sayHi=sayHi;
exports.callFunc=callFunc;

OK,再来看一看现在的结果
打开时：

打开页面时控制台的输出

点击按钮后：

点击按钮后控制台的输出

引用阮一峰老师在ES6入门一书中所写的内容：

总之，CommonJS 输入的是被输出值的拷贝，不是引用。
另外，由于 CommonJS 模块遇到循环加载时，返回的是当前已经执行的部分的值，而不是代码全部执行后的值，两者可能会有差异。所以，输入变量的时候，必须非常小心。

ES6中的循环加载

来自阮一峰老师ES6入门一书对ES6处理‘循环加载’的描述

ES6 处理“循环加载”与 CommonJS 有本质的不同。ES6 模块是动态引用，如果使用import从一个模块加载变量（即import foo from 'foo'），那些变量不会被缓存，而是成为一个指向被加载模块的引用，需要开发者自己保证，真正取值的时候能够取到值。

来看一个简单的例子，定义了四个文件a.js、b.js、main.js、TestImportExport.js，其中a.js和b.js相互引用，形成一个循环引用，main.js中引用a.js和b.js，TestImportExport.js用于测试。
1、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);
}

export {
  sayHi,
  callFunc
}

2、b.js

//b.js es6
import * as a from './a'
console.log('b.js中的a:', a);

const sayBye = (name) => {
  console.log('Bye,', name);
}
const callFunc = (name) => {
  a.sayHi(name);
}
export {
  sayBye,
  callFunc
}

3、main.js

//main.js es6
import * as a from './a.js'
import * as b from './b.js'
const f = () => {
  a.sayHi('zzx');
  b.sayBye('zzx');
  a.callFunc('zzx');
  b.callFunc('zzx');
}
export { f }

4、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,再来看一看ES6循环加载时控制台会输出什么，直接上图：
打开页面时：

打开页面时控制台的输出

从图中看到，ES6的import加载在webpack中会被一个视作Module，建立一个引用链接，在真正使用时才会链接地址取值
点击按钮后：

点击按钮后控制台的输出

ES6循环加载就不会出错吗？

不是的，虽然大多数情况下ES6中即使循环加载了也能正确处理，但是也有一些特殊情况下会出错，比如在import后立即调用import的值，而不是写在函数中。
一个简单的例子,将上面ES6中的a.js和b.js做简单的修改：

//a.js  es6
import * as b from './b'
console.log('a.js中的b:', b);
b.sayBye('zzx');//在import之后立即调用
const sayHi = (name) => {
  console.log('Hi,', name);

}
const callFunc = (name) => {
  b.sayBye(name);
}

export {
  sayHi,
  callFunc
}

//b.js es6
import * as a from './a'
console.log('b.js中的a:', a);
a.sayHi('zzx');//在import之后立即调用
const sayBye = (name) => {
  console.log('Bye,', name);
}
const callFunc = (name) => {
  a.sayHi(name);
}
export {
  sayBye,
  callFunc
}

打开网页时控制台输出如下：

ES6循环加载出错的情形