显示器|前端实现多文件编译器( 二 ) 红米手机|数码

; // ... var mod = {; module[__filename
= mod;)();(function() { __filename = 'a.js'; var $$b = module['b.js'
; // ... var mod = {; module[__filename
= mod;)();// ... 3 JS 执行最后一步，执行上面得到的编译结果即可，此步骤可直接使用 new Function 的方式完成，例如： (假设以上的字符串内容保存在 compiledScript 中) const exec = new Functioon(` var module = {; ${compiledScript; return module;`);const module = exec();module['a.js'
// a.js 的导出内容module['b.js'
// b.js 的导出内容八总结至此，一个前端可执行的小型打包工具就已实现，可以直接在前端进行多文件的编辑和执行。实时上，此过程仅适用于不方便借助服务器的场景，如果有条件允许可以借助服务器，那么编译过程最好在服务端完成，甚至还可以借助 webpack 或 rollup 等打包工具实现更好的编译效果。参考目前我们在 ali-lowcode-engine 之上的源码插件（@ali/lowcode-plugin-code-editor）内部实现了多文件的支持，目前仅做了最简单的实现：模块引用直接采用了 UMD 规范，暂时也没有考虑循环依赖和执行顺序。后续会严格按照以上步骤进行优化。作者 | 景遇原文链接：https://developer.aliyun.com/article/880075?utm_content=g_1000333141 本文为阿里云原创内容，未经允许不得转载。