ES6模块:首先未定义导入的常量;他们稍后可用

Tobik:

我在JavaScript应用程序中使用ES6模块。源码使用webpack和babel编译。这是该文件的简化版本,给我带来麻烦:

export const JUST_FORM = 0;
export const AS_PAGE = 1;

console.log(AS_PAGE); // **

export default function doSomething(mode = AS_PAGE) {
  console.log(mode);
  console.log(JUST_FORM);
}

正如您所期望的,我使用此功能。

import doSomething, { AS_PAGE } from './doSomething'

console.log(AS_PAGE);

doSomething();

当我运行该应用程序时,它将打印3次,undefined并且仅打印一次AS_PAGE,即用console.log标记的期望值**但是,这是最后打印!它表明:

  • AS_PAGE当用作doSomething函数的默认参数时常数在定义函数时尚未定义。
  • JUST_FORM当常量没有定义doSomething被调用。
  • AS_PAGE明确导入时未定义常数。

显然,这里发生的事情是仅对default导出进行了解析和评估,而文件的其余部分将被忽略,直到以后。我将此文件导入应用程序中的几个不同位置(此位置目前很大),并且在某些时候这些值实际上变得可用。从控制台输出来看,这是时间问题,但可能有不同的原因。显然,我在所有地方都以完全相同的方式进行导入。

无论如何,我已经编写了整个应用程序,并假设一旦导入某些内容,它便立即可用,并且可以在我的代码中使用它。我(简要地)阅读了有关ES6模块应如何工作的信息,但我没有发现任何证据可以证明此假设是错误的。一直到现在。

还要注意,当我将其运行webpack-dev-server或编译为单个捆绑软件时,其行为是相同的

这种行为真的正确吗?可能是什么原因?

Tobik:

如评论中所建议,此处的答案是循环依赖项

问题中提供的代码中实际上没有循环依赖(因为这只是简化的代码片段),但是症状非常明显。

循环依赖的最简单示例是文件A导入文件B和文件B导入A的情况。不幸的是,有时很难检测到此问题的原因是,圆可以任意大,跨过大量文件。

ES6支持循环依赖关系,只要足够小心,就可以使用它们。但是,我要讲的是,循环依赖性通常是不良设计决策的标志。这正是我的情况。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章