我有三个模块A,B和C.A和B从模块C导入默认导出,模块C从A和B导入默认值.但是,模块C不依赖于从A和B导入的值模块评估,只有在运行时,在所有三个模块都被评估之后的某个时刻.模块A和B的确取决于在模块评估过程中从C导入的值.
代码看起来像这样：
// --- Module A
import C from 'C'
class A extends C {
// ...
}
export {A as default}
.
// --- Module B
import C from 'C'
class B extends C {
// ...
}
export {B as default}
.
// --- Module C
import A from 'A'
import B from 'B'
class C {
constructor() {
// this may run later,after all three modules are evaluated,or
// possibly never.
console.log(A)
console.log(B)
}
}
export {C as default}
我有以下入口点：
// --- Entrypoint
import A from './app/A'
console.log('Entrypoint',A)
但是,实际发生的是,模块B首先被评估,并且在Chrome中出现这个错误(使用本机ES6类,而不是透明)失败：
Uncaught TypeError: Class extends value undefined is not a function or null
这意味着当模块B被评估时,模块B中的C的值是未定义的,因为模块C尚未被评估.
您应该能够通过制作这四个文件并运行entrypoint文件来轻松地复制.
我的问题是(可以有两个具体的问题吗？)：为什么加载顺序是这样的？循环依赖模块如何写入,以便它们可以工作,以便在评估A和B时C的值不会被定义？
(我认为ES6模块环境可能能够智能地发现它将需要执行模块C的主体,然后才能执行模块A和B的主体.)
解决方法
解决方案如下所示：
// --- Module A
import C,{initC} from './c';
initC();
console.log('Module A',C)
class A extends C {
// ...
}
export {A as default}
–
// --- Module B
import C,{initC} from './c';
initC();
console.log('Module B',C)
class B extends C {
// ...
}
export {B as default}
–
// --- Module C
import A from './a'
import B from './b'
var C;
export function initC(){
if (C) return;
C = class C {
constructor() {
console.log(A)
console.log(B)
}
}
}
initC();
export {C as default}; // IMPORTANT: not `export default C;` !!
–
// --- Entrypoint
import A from './A'
console.log('Entrypoint',new A) // runs the console.logs in the C
constructor.
另请参阅此线程相关信息：https://github.com/meteor/meteor/issues/7621#issuecomment-238992688
重要的是要注意,出口是悬而未决的(可能是奇怪的,您可以在esdiscuss中询问更多),就像var一样,但是在模块之间发生升降.类不能被挂起,但功能可以(就像它们在正常的ES6范围之内,但是跨模块,因为导出是可以在被评估之前到达其他模块的活动绑定,几乎就好像有一个涵盖所有内容的范围只能通过使用导入来访问标识符的模块).
在此示例中,入口点从模块A导入,模块A从模块C导入,从模块B导入.这意味着模块B将在模块C之前进行求值,但是由于C模块导出的initC函数被挂起,模块B将被引用此提供的initC函数,因此模块B在调用模块C之前调用initC.
这导致模块C的var C变量在B类扩展C定义之前被定义.魔法！
重要的是要注意,模块C必须使用var C,而不是const或let,否则理论上会在真正的ES6环境中抛出一个时间死区错误.例如,如果模块C看起来像
// --- Module C
import A from './a'
import B from './b'
let C;
export function initC(){
if (C) return;
C = class C {
constructor() {
console.log(A)
console.log(B)
}
}
}
initC();
export {C as default}; // IMPORTANT: not `export default C;` !!
那么一旦模块B调用initC,将抛出一个错误,并且模块评估将失败.
var在模块C的范围内被提升,所以在调用initC时可用.这是一个很好的例子,您可能希望在ES6环境中使用var而不是let或const.
但是,您可以注意到汇总并不能正确处理这个https://github.com/rollup/rollup/issues/845,并且在某些环境中可以使用一个看起来像C = C的黑客,比如在上述Meteor问题链接中指出的.
最后一件值得注意的事情是导出默认值C和导出{C为默认值}之间的差异.第一个版本不将C变量从模块C导出为活动绑定,而是按值.因此,当使用export default C时,var C的值是未定义的,并且将被分配到隐藏在ES6模块范围内的新的变量var default,并且由于C被分配到默认值(如var default = C by value,则每当模块C的默认导出被另一个模块(例如模块B)访问时,另一个模块将到达模块C并访问总是将被定义的默认变量的值.因此,如果模块C使用导出默认值C,那么即使模块B调用initC(它改变模块C的内部C变量的值),模块B实际上也不会访问该内部C变量,它将访问默认变量,这仍然是未定义的.
但是,当模块C使用export {C作为默认值}时,ES6模块系统将使用C变量作为默认导出变量,而不是创建一个新的内部默认变量.这意味着C变量是一个活动绑定.任何时候,根据模块C的模块进行评估,它将在给定的时间给定模块C的内部C变量,而不是按值,但是几乎就像将该变量交给另一个模块一样.因此,当模块B调用initC时,模块C的内部C变量被修改,模块B能够使用它,因为它引用了相同的变量(即使本地标识符不同)！基本上,模块评估中的任何时候,当模块使用从另一个模块导入的标识符时,模块系统到达另一个模块,并及时得到该值.
我敢打赌,大多数人不会知道导出默认C和导出{C为默认值之间的区别,在许多情况下它们不需要,但是在使用“实时绑定” “init函数”,以解决循环依赖关系,其中活动绑定可能是有用的.不要深入研究太多的主题,但是如果你有一个单例,则可以使用活动绑定作为使模块范围成为单例对象的方式,并且通过访问单例中的方式实现活动绑定.
描述实时绑定正在发生的一种方法是写入与上述模块示例类似的javascript.以下是模块B和C可能以描述“实时绑定”的方式看起来的模式：
// --- Module B
initC()
console.log('Module B',C)
class B extends C {
// ...
}
// --- Module C
var C
function initC() {
if (C) return
C = class C {
constructor() {
console.log(A)
console.log(B)
}
}
}
initC()
这有效地显示了ES6模块版本中发生的情况：首先评估B,但是在模块之间悬挂了var C和函数initC,所以模块B能够调用initC,然后在var C和函数之前立即使用C initC在评估代码中遇到.
当然,当模块使用不同的标识符时,它变得更加复杂,例如,如果模块B从’./c’导入Blah,那么Blah仍然是一个活动绑定到模块C的C变量,但这不是很容易用前面的例子来描述使用正常的变量提升,实际上是Rollup isn’t always handling it properly.
假设我们有模块B如下,模块A和C是相同的：
// --- Module B
import Blah,Blah)
class B extends Blah {
// ...
}
export {B as default}
那么如果我们使用简单的JavaScript来描述模块B和C会发生什么,结果就是这样的：
// --- Module B
initC()
console.log('Module B',Blah)
class B extends Blah {
// ...
}
// --- Module C
var C
var Blah // needs to be added
function initC() {
if (C) return
C = class C {
constructor() {
console.log(A)
console.log(B)
}
}
Blah = C // needs to be added
}
initC()
另外要注意的是,模块C也有initC函数调用.这是为了防止模块C先被评估,然后不会初始化它.
最后要注意的是,在这些示例中,模块A和B依赖于C在模块评估时间,而不是在运行时.当模块A和B被评估时,需要定义C导出.但是,当模块C被评估时,它不依赖于定义的A和B导入.在所有模块被评估后,例如当入口点运行新的运行C构造函数的A()时,模块C将在运行时仅需要使用A和B.正是由于这个原因,模块C不需要initA或initB函数.
循环依赖中的多个模块可能需要彼此依赖,在这种情况下,需要一个更复杂的“init函数”解决方案.例如,假设模块C在定义C类之前的模块评估时间期间想要使用console.log(A)
// --- Module C
import A from './a'
import B from './b'
var C;
console.log(A)
export function initC(){
if (C) return;
C = class C {
constructor() {
console.log(A)
console.log(B)
}
}
}
initC();
export {C as default}; // IMPORTANT: not `export default C;` !!
由于顶端示例中的入口点导入A,C模块将在A模块之前进行评估.这意味着模块C顶部的console.log(A)语句将记录未定义,因为尚未定义A类.
最后,为了使新示例工作,以便它记录A类而不是未定义,整个例子变得更复杂(我已经省略了模块B和入口点,因为那些不会改变)
// --- Module A
import C,C)
var A
export function initA() {
if (A) return
initC()
A = class A extends C {
// ...
}
}
initA()
export {A as default} // IMPORTANT: not `export default A;` !!
–
// --- Module C
import A,{initA} from './a'
import B from './b'
initA()
var C;
console.log(A) // class A,not undefined!
export function initC(){
if (C) return;
C = class C {
constructor() {
console.log(A)
console.log(B)
}
}
}
initC();
export {C as default}; // IMPORTANT: not `export default C;` !!
现在,如果模块B想在评估时间内使用A,事情就会变得更加复杂,但我离开这个解决方案可以想象…