import(`virtual:///prerequisite-imports/${bundle.name}`)是如何执行的？

Creator 3.x
#1

image
image1724×396 32.1 KB

这行代码到底import了哪个文件，猜测是bundle文件夹里的index.js，但背后的执行流程是什么？望大佬解惑。

#2

:grinning:

#3

可以找下构建后的src/system.bundle.js文件，里头有个systemJSPrototype$1.import，看上去故事的起点就在这。我看过几次，由于js的基础不扎实，没完全理解，就不瞎说了，有兴趣可以自己研究一下。

#4

这个接口在image 中，首先TS这边得说得通，import()动态加载，我不理解的是，TS如何找到这个奇怪的非相对路径的

#5

应该是和这个对应的
image
构建生成的index.js文件里头就是注册了这么个神奇的地址

我的理解就是类似map那样子的键值对映射关系。

#6

这边我也发现了，这类js文件应该是打包生成的，没详细研究过。
我反而觉得import(virtual:///prerequisite-imports/${bundle.name})，最终加载了这类js文件，
比如import(virtual:///prerequisite-imports/internal)加载了assets/internal/index.js.
createBundle接口是加载bundle时调用的，用来创建bundle，这时候加载bundle文件夹里的index.js，这也说得通，就是这个TS如何import到这个路径的，我不理解.

#7

Emmmm，感觉你说的更有道理 :+1:

#8

@浓墨无痕 大概理解了，和你之前说的类似， import( virtual:///prerequisite-imports/${bundle.name} )执行之前，加载了assets/internal/index.js，这个脚本中利用 SystemJs的System.register注册了这个模块

image
image1017×582 15.6 KB

image
image996×648 32.8 KB

然后createBundle接口中import动态导入，由于运行时动态导入，所以这边IDE也不会报错
image
image757×42 3.4 KB

大概是这样，至于SystemJs如何影响import()的，暂时不去细究了 :grinning:

#9

哈哈哈，专业 :+1:

有需要再研究，我一向都是奉行先理解个大概，真有需求了再深入研究 :sunglasses:

#10

:grinning::space_invader:欢迎加入学习交流群:594539678