 使用与原理全解析)
NocoBase RunJS 动态加载 UMD/AMD 库ctx.requireAsync() 使用与原理全解析【免费下载链接】nocobaseNocoBase is an open-source AI no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobasectx.requireAsync()是 NocoBase RunJS 运行环境中按 URL 异步加载UMD/AMD或挂载到全局的脚本也可加载 CSS的核心 API适用于 JSBlock、JSField、JSItem、JSColumn、事件流、JSAction 等需要按需引入第三方库如 ECharts、Chart.js、FullCalendar UMD 版、jQuery 插件的场景。读完本文你将掌握ctx.requireAsync()的完整参数、URL 简写规则、返回值约定理解其底层基于 RequireJS 与?raw解析的实现原理并能直接写出可运行的真实图表与工具库加载代码。适用场景凡 RunJS 中需按需加载 UMD/AMD/global 脚本或 CSS 的场景均可使用包括 JSBlock、JSField、JSItem、JSColumn、事件流、JSAction 等。典型用途ECharts 图表加载echartsUMD 产物绘制饼图、折线图、柱状图Chart.js加载chart.umd.min.js渲染柱状图、折线图FullCalendarUMD 版加载日历组件dayjsUMD加载日期工具库jQuery 插件在页面注入后按库文档使用全局变量。与 ctx.importAsync() 的分工是UMD/AMD/global 脚本用ctx.requireAsync()ESM 模块用ctx.importAsync()。若库同时提供 ESM 版本应优先使用ctx.importAsync()以获得更好的模块语义与 Tree-shaking 支持。类型定义requireAsyncT any(url: string): PromiseT;参数参数类型说明urlstring脚本或 CSS 地址。支持简写包名版本/文件路径经 ESM CDN 解析时加?raw取原始 UMD 文件或完整 URL。传入.css时加载并注入样式。返回值加载后的库对象即 UMD/AMD 回调的第一个模块值。许多 UMD 库会挂到window如window.echarts此时返回值可能为undefined实际使用时按库文档访问全局变量即可传入.css时返回loadCSS的结果。URL 格式说明简写路径如echarts5/dist/echarts.min.js在默认 ESM CDNesm.sh下会请求https://esm.sh/echarts5/dist/echarts.min.js?raw。?raw用于获取原始 UMD 文件而非 ESM 包装完整 URL可直接写任意 CDN 地址如https://cdn.jsdelivr.net/npm/dayjs1/dayjs.min.jsCSS传入.css结尾的 URL 会加载并注入页面支持example.css?v123这类带 query 的形式。与 ctx.importAsync() 的区别维度ctx.requireAsync()ctx.importAsync()加载目标UMD/AMD/global 脚本ESM 模块典型库ECharts、Chart.js、FullCalendarUMD、jQuery 插件Vue、dayjsESM、Tabulator、dnd-kit返回值UMD/AMD 回调第一个模块值常为库对象或undefined库挂到window模块命名空间对象仅一个 default 导出时直接返回 default加载机制RequireJSAMD浏览器原生import()库同时提供 ESM 与 UMD 时优先用ctx.importAsync()。依赖 React 的库在使用ctx.importAsync()时还需加?depsreact18.2.0,react-dom18.2.0确保与页面共用同一 React 实例详见 ctx.importAsync()。源码实现原理ctx.requireAsync()的实现位于 flowContext.ts核心逻辑分三步this.defineMethod(requireAsync, async (url: string) { // 1. 判断是否为 CSS 文件支持 example.css?v123 等形式 if (isCssFile(url)) { return this.loadCSS(url); } // 2. 解析为完整 CDN URLraw 模式追加 ?raw const u resolveModuleUrl(url, { raw: true }); // 3. 通过 RequireJS 加载 return await runjsRequireAsync(this.requirejs, u); });1. CSS 识别与注入isCssFile来自 resolveModuleUrl.ts去掉?与#后判断扩展名是否为.css。命中后走loadCSS内部创建link relstylesheet并追加到document.head加载失败会reject(new Error(Failed to load CSS: ...))。2. 简写 URL 的?raw解析resolveModuleUrl(url, { raw: true })的逻辑resolveModuleUrl.ts完整 URLhttp:///https://开头原样返回不做任何改写相对/简写路径拼接 CDN 前缀与后缀前缀取window.__esm_cdn_base_url__默认https://esm.shraw 模式在路径后追加?raw若已带 query 则用raw且即使配置了 ESM_CDN_SUFFIX 也不会添加后缀——这正是取 UMD 原始文件而不是 ESM 包装的关键例如dayjs1/dayjs.min.js最终解析为https://esm.sh/dayjs1/dayjs.min.js?raw。3. RequireJS 加载与全局串行锁底层加载由 runjsModuleLoader.ts 中的runjsRequireAsync完成requirejs( [url], (...args: any[]) resolve(args[0]), // 返回回调第一个模块值 reject, );由于 NocoBase 前端整体使用 RequireJSAMD加载插件与模块runjsRequireAsync与runjsImportAsync共用一把存放在globalThis.__nocobaseRunjsModuleLoadLock的全局 Promise 链互斥锁withRunjsModuleLoadLock避免并发加载时对全局对象的临时改动互相干扰无论任务成功或失败都会释放锁防止死锁。4. 编辑器补全与代码片段在 RunJS 代码编辑器中输入ctx.requireAsync()会自动补全为const lib await ctx.requireAsync(https://cdn.example.com/lib.umd.js)相关补全定义见 runjsCompletions.ts内置代码片段sn-require加载 AMD 模块演示了最简用法见 require-amd.snippet.ts。示例基础用法// 简写路径经 ESM CDN 解析为 ...?raw const echarts await ctx.requireAsync(echarts5/dist/echarts.min.js); // 完整 URL const dayjs await ctx.requireAsync(https://cdn.jsdelivr.net/npm/dayjs1/dayjs.min.js); // 加载 CSS 并注入页面 await ctx.requireAsync(https://cdn.example.com/theme.css);ECharts 图表const container document.createElement(div); container.style.height 400px; container.style.width 100%; ctx.render(container); const echarts await ctx.requireAsync(echarts5/dist/echarts.min.js); if (!echarts) throw new Error(ECharts library not loaded); const chart echarts.init(container); chart.setOption({ title: { text: ctx.t(销售概览) }, series: [{ type: pie, data: [{ value: 1, name: ctx.t(A) }] }], }); chart.resize();Chart.js 柱状图async function renderChart() { const loaded await ctx.requireAsync(chart.js4.4.0/dist/chart.umd.min.js); const Chart loaded?.Chart || loaded?.default?.Chart || loaded?.default; if (!Chart) throw new Error(Chart.js not loaded); const container document.createElement(canvas); ctx.render(container); new Chart(container, { type: bar, data: { labels: [A, B, C], datasets: [{ label: ctx.t(数量), data: [12, 19, 3] }], }, }); } await renderChart();dayjsUMDconst dayjs await ctx.requireAsync(dayjs1/dayjs.min.js); console.log(dayjs?.default || dayjs);由于 UMD 库导出方式各异module.exports、window挂载等读取时经常需要做?.default ||兜底示例中的sn-require片段也采用了同样的写法require-amd.snippet.ts。注意事项返回值形式UMD 库导出方式各异返回值可能为库对象或undefined若为undefined可按库文档从window访问如window.echarts依赖网络需访问 CDN内网环境可通过ESM_CDN_BASE_URL环境变量对应运行时window.__esm_cdn_base_url__默认https://esm.sh指向自建服务可选ESM_CDN_SUFFIX后缀如 jsDelivr 的/esm但 raw 模式下不会追加后缀与 importAsync 选择库同时提供 ESM 与 UMD 时优先用ctx.importAsync()例如 Vue、dayjsESM等现代库应走 ESM 路径。相关ctx.importAsync()加载 ESM 模块适合 Vue、dayjsESM等ctx.render()将图表等渲染到容器ctx.libs内置 React、antd、dayjs 等无需异步加载。【免费下载链接】nocobaseNocoBase is an open-source AI no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobase创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 NocoBase RunJS 动态加载 UMD/AMD 库：ctx.requireAsync() 使用与原理全解析
NocoBase RunJS 动态加载 UMD/AMD 库ctx.requireAsync() 使用与原理全解析【免费下载链接】nocobaseNocoBase is an open-source AI no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobasectx.requireAsync()是 NocoBase RunJS 运行环境中按 URL 异步加载UMD/AMD或挂载到全局的脚本也可加载 CSS的核心 API适用于 JSBlock、JSField、JSItem、JSColumn、事件流、JSAction 等需要按需引入第三方库如 ECharts、Chart.js、FullCalendar UMD 版、jQuery 插件的场景。读完本文你将掌握ctx.requireAsync()的完整参数、URL 简写规则、返回值约定理解其底层基于 RequireJS 与?raw解析的实现原理并能直接写出可运行的真实图表与工具库加载代码。适用场景凡 RunJS 中需按需加载 UMD/AMD/global 脚本或 CSS 的场景均可使用包括 JSBlock、JSField、JSItem、JSColumn、事件流、JSAction 等。典型用途ECharts 图表加载echartsUMD 产物绘制饼图、折线图、柱状图Chart.js加载chart.umd.min.js渲染柱状图、折线图FullCalendarUMD 版加载日历组件dayjsUMD加载日期工具库jQuery 插件在页面注入后按库文档使用全局变量。与 ctx.importAsync() 的分工是UMD/AMD/global 脚本用ctx.requireAsync()ESM 模块用ctx.importAsync()。若库同时提供 ESM 版本应优先使用ctx.importAsync()以获得更好的模块语义与 Tree-shaking 支持。类型定义requireAsyncT any(url: string): PromiseT;参数参数类型说明urlstring脚本或 CSS 地址。支持简写包名版本/文件路径经 ESM CDN 解析时加?raw取原始 UMD 文件或完整 URL。传入.css时加载并注入样式。返回值加载后的库对象即 UMD/AMD 回调的第一个模块值。许多 UMD 库会挂到window如window.echarts此时返回值可能为undefined实际使用时按库文档访问全局变量即可传入.css时返回loadCSS的结果。URL 格式说明简写路径如echarts5/dist/echarts.min.js在默认 ESM CDNesm.sh下会请求https://esm.sh/echarts5/dist/echarts.min.js?raw。?raw用于获取原始 UMD 文件而非 ESM 包装完整 URL可直接写任意 CDN 地址如https://cdn.jsdelivr.net/npm/dayjs1/dayjs.min.jsCSS传入.css结尾的 URL 会加载并注入页面支持example.css?v123这类带 query 的形式。与 ctx.importAsync() 的区别维度ctx.requireAsync()ctx.importAsync()加载目标UMD/AMD/global 脚本ESM 模块典型库ECharts、Chart.js、FullCalendarUMD、jQuery 插件Vue、dayjsESM、Tabulator、dnd-kit返回值UMD/AMD 回调第一个模块值常为库对象或undefined库挂到window模块命名空间对象仅一个 default 导出时直接返回 default加载机制RequireJSAMD浏览器原生import()库同时提供 ESM 与 UMD 时优先用ctx.importAsync()。依赖 React 的库在使用ctx.importAsync()时还需加?depsreact18.2.0,react-dom18.2.0确保与页面共用同一 React 实例详见 ctx.importAsync()。源码实现原理ctx.requireAsync()的实现位于 flowContext.ts核心逻辑分三步this.defineMethod(requireAsync, async (url: string) { // 1. 判断是否为 CSS 文件支持 example.css?v123 等形式 if (isCssFile(url)) { return this.loadCSS(url); } // 2. 解析为完整 CDN URLraw 模式追加 ?raw const u resolveModuleUrl(url, { raw: true }); // 3. 通过 RequireJS 加载 return await runjsRequireAsync(this.requirejs, u); });1. CSS 识别与注入isCssFile来自 resolveModuleUrl.ts去掉?与#后判断扩展名是否为.css。命中后走loadCSS内部创建link relstylesheet并追加到document.head加载失败会reject(new Error(Failed to load CSS: ...))。2. 简写 URL 的?raw解析resolveModuleUrl(url, { raw: true })的逻辑resolveModuleUrl.ts完整 URLhttp:///https://开头原样返回不做任何改写相对/简写路径拼接 CDN 前缀与后缀前缀取window.__esm_cdn_base_url__默认https://esm.shraw 模式在路径后追加?raw若已带 query 则用raw且即使配置了 ESM_CDN_SUFFIX 也不会添加后缀——这正是取 UMD 原始文件而不是 ESM 包装的关键例如dayjs1/dayjs.min.js最终解析为https://esm.sh/dayjs1/dayjs.min.js?raw。3. RequireJS 加载与全局串行锁底层加载由 runjsModuleLoader.ts 中的runjsRequireAsync完成requirejs( [url], (...args: any[]) resolve(args[0]), // 返回回调第一个模块值 reject, );由于 NocoBase 前端整体使用 RequireJSAMD加载插件与模块runjsRequireAsync与runjsImportAsync共用一把存放在globalThis.__nocobaseRunjsModuleLoadLock的全局 Promise 链互斥锁withRunjsModuleLoadLock避免并发加载时对全局对象的临时改动互相干扰无论任务成功或失败都会释放锁防止死锁。4. 编辑器补全与代码片段在 RunJS 代码编辑器中输入ctx.requireAsync()会自动补全为const lib await ctx.requireAsync(https://cdn.example.com/lib.umd.js)相关补全定义见 runjsCompletions.ts内置代码片段sn-require加载 AMD 模块演示了最简用法见 require-amd.snippet.ts。示例基础用法// 简写路径经 ESM CDN 解析为 ...?raw const echarts await ctx.requireAsync(echarts5/dist/echarts.min.js); // 完整 URL const dayjs await ctx.requireAsync(https://cdn.jsdelivr.net/npm/dayjs1/dayjs.min.js); // 加载 CSS 并注入页面 await ctx.requireAsync(https://cdn.example.com/theme.css);ECharts 图表const container document.createElement(div); container.style.height 400px; container.style.width 100%; ctx.render(container); const echarts await ctx.requireAsync(echarts5/dist/echarts.min.js); if (!echarts) throw new Error(ECharts library not loaded); const chart echarts.init(container); chart.setOption({ title: { text: ctx.t(销售概览) }, series: [{ type: pie, data: [{ value: 1, name: ctx.t(A) }] }], }); chart.resize();Chart.js 柱状图async function renderChart() { const loaded await ctx.requireAsync(chart.js4.4.0/dist/chart.umd.min.js); const Chart loaded?.Chart || loaded?.default?.Chart || loaded?.default; if (!Chart) throw new Error(Chart.js not loaded); const container document.createElement(canvas); ctx.render(container); new Chart(container, { type: bar, data: { labels: [A, B, C], datasets: [{ label: ctx.t(数量), data: [12, 19, 3] }], }, }); } await renderChart();dayjsUMDconst dayjs await ctx.requireAsync(dayjs1/dayjs.min.js); console.log(dayjs?.default || dayjs);由于 UMD 库导出方式各异module.exports、window挂载等读取时经常需要做?.default ||兜底示例中的sn-require片段也采用了同样的写法require-amd.snippet.ts。注意事项返回值形式UMD 库导出方式各异返回值可能为库对象或undefined若为undefined可按库文档从window访问如window.echarts依赖网络需访问 CDN内网环境可通过ESM_CDN_BASE_URL环境变量对应运行时window.__esm_cdn_base_url__默认https://esm.sh指向自建服务可选ESM_CDN_SUFFIX后缀如 jsDelivr 的/esm但 raw 模式下不会追加后缀与 importAsync 选择库同时提供 ESM 与 UMD 时优先用ctx.importAsync()例如 Vue、dayjsESM等现代库应走 ESM 路径。相关ctx.importAsync()加载 ESM 模块适合 Vue、dayjsESM等ctx.render()将图表等渲染到容器ctx.libs内置 React、antd、dayjs 等无需异步加载。【免费下载链接】nocobaseNocoBase is an open-source AI no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobase创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考