js在for循环中使用java代码 javascript遍历对象( 四 )

问题二然后分析图 2 的报错。在业务方 App 工程里 yarn link 教室 SDK，使用 webpack 打包后，运行的仍然是 CommonJS 模块，为什么会出现 JS 引擎级别的错误呢？这不是 ES6 模块才会出现的报错么？这里有两个原因。
教室 SDK 使用 Rollup[24] 进行打包。Rollup 会把多个文件打包成一个文件，子模块的代码会被放到父模块前面。比如，代码 2 经过 Rollup 打包后变成了代码 4 。
console.log(parent); // 报错 const parent = 'parent'; export { parent };代码 4
本地 yarn link 教室 SDK 后，引用的教室 SDK 包路径为软连接，而软连接在 Babel 转码时会被忽略。因此，业务 App 直接引用了 Rollup 打包的 ES6+ 语法的教室 SDK 。如果在子模块中直接执行了父模块导出的变量，就会报错。如代码 4 所示，执行第一行代码时，变量 parent 有被创建绑定但没有被初始化。
解决问题明确了问题由模块循环引用导致，并分析了具体原因。那怎么在复杂的代码工程中找到出现循环引用的模块呢？
webpack plugincircular-dependency-plugin[25] 是一个分析模块循环引用的 webpack 插件。它的源码只有 100 行左右，原理也比较简单。在 optimizeModules[26] 钩子中，从本模块开始递归寻找依赖模块，并比较依赖模块与本模块的 debugId，如果相同，就判定为循环引用，并返回循环引用链。
定位并解决循环引用在业务 App 工程中引入
circular-dependency-plugin 后做一些配置，就可以看到教室 SDK 相关的循环引用模块。输出的模块循环引用链比较多，有 112 个。如何进一步定位到几个导致问题的循环引用呢？根据报错的堆栈找到报错的文件，然后找出和这个文件相关的循环引用，用 hack 的方式逐个切断这些循环引用后验证报错是否解决。最后，我在切断两个循环引用后解决了问题。其中一个循环引用链如下：
Circular dependency detected: node_modules/@byted-classroom/room/lib/service/assist/stream-validator.js -> node_modules/@byted-classroom/room/lib/service/rtc/engine.js -> node_modules/@byted-classroom/room/lib/service/rtc/definitions.js -> node_modules/@byted-classroom/room/lib/service/rtc/base.js -> node_modules/@byted-classroom/room/lib/service/monitor/index.js -> node_modules/@byted-classroom/room/lib/service/monitor/monitors.js -> node_modules/@byted-classroom/room/lib/service/monitor/room.js -> node_modules/@byted-classroom/room/lib/service/npy-courseware/student-courseware.js -> node_modules/@byted-classroom/room/lib/service/index.js -> node_modules/@byted-classroom/room/lib/service/audio-mixing/index.js -> node_modules/@byted-classroom/room/lib/service/audio-mixing/mixing-player.js -> node_modules/@byted-classroom/room/lib/index.js -> node_modules/@byted-classroom/room/lib/room/base.js -> node_modules/@byted-classroom/room/lib/service/rtc/manager.js -> node_modules/@byted-classroom/room/lib/service/assist/stream-validator.js 建议TypeScript 工程的循环引用问题是比较普遍的，常常会因为需要使用一个类型而增加一个文件依赖。建议在工程中引入模块循环引用检测机制，比如 webpack 插件
circular-dependency-plugin 和 eslint 规则 import/no-cycle，以便及时调整文件或代码结构来切断循环引用。
总结本文从开发时遇到的一个报错出发，对 JS 模块机制和循环引用进行了深度分析，并提供了定位和解决模块循环引用问题的方法。根据对 ES 规范的解读，本文纠正了《ECMAScript 6 入门教程》一书中的几个错误观点。

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：