用于按顺序追加<script>标记的前端依赖关系管理器
用于按顺序追加<script>标记的前端依赖关系管理器
提问于 2022-03-18 13:52:08
我想要一个依赖关系管理器，它将按顺序追加脚本标记，并避免使用相同的src重复标记。这是我们使用的CMS的一个问题。
我做了这样的事情：
const scriptLoader = new ScriptLoader({
"jquery@3.4.1": {
"attr": {
"src": "https://code.jquery.com/jquery-3.4.1.min.js",
"integrity": "sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=",
"crossOrigin": "anonymous",
},
},
"bootstrap@4.0.0": {
"attr": {
"src": "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js",
"integrity": "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl",
"crossOrigin": "anonymous",
},
"dependencies": ["jquery@3.4.1", "popper@1.12.9"],
},
});
// global js
scriptLoader.loadScript("global", {
"src": "js/global.js",
}, ["bootstrap@4.0.0", "jquery@3.4.1"]);因此，在加载全局脚本时，它将首先以标记的形式加载["bootstrap@4.0.0", "jquery@3.4.1"]依赖项，然后再加载/追加global.js。
任何再次加载global.js的尝试都不会重新追加脚本：
// global js - will append
scriptLoader.loadScript("global", {
"src": "js/global.js",
}, ["bootstrap@4.0.0", "jquery@3.4.1"]);
// global js - ignored, already appended/appending
scriptLoader.loadScript("global", {
"src": "js/global.js",
}, ["bootstrap@4.0.0", "jquery@3.4.1"]);我曾经查看过require.js，但是我需要重写我所有的js文件，作为需要的模块，我并不热衷于这些模块。
这类东西已经存在了吗？我的工作还不错，但有时会有些喜怒无常，更喜欢已经存在的东西。
回答 2
Stack Overflow用户
发布于 2022-03-29 12:52:18
正如@morganney所指出的，Require.js正是为此目的而设计的。许多流行的库在UMD格式中导出它们的库，后者支持AMD (异步模块定义)逻辑Require.js所期望的。
Stack Overflow用户
发布于 2022-03-29 15:31:13
这将只需使用JavaScript import异步导入对象中的所有第一级库。
在网络调试器选项卡中，我们可以观察到HTTP代码200的成功：
const ScriptLoader = async (libs) => {
for (const [k] of Object.entries(libs)) {
console.log(k, libs[k].attr.src);
await import(libs[k].attr.src)
// Lib ready here
}
}
const scriptLoader = ScriptLoader({
"jquery@3.4.1": {
"attr": {
"src": "https://code.jquery.com/jquery-3.4.1.min.js",
"integrity": "sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=",
"crossOrigin": "anonymous",
},
},
"bootstrap@4.0.0": {
"attr": {
"src": "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js",
"integrity": "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl",
"crossOrigin": "anonymous",
},
"dependencies": ["jquery@3.4.1", "popper@1.12.9"],
},
});
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71528081
复制相关文章
相似问题
腾讯云开发者
