0
180
ViewsAdministrador de dependencias front-end para agregar etiquetas <script> en orden
Quiero un administrador de dependencias que agregue etiquetas de script en orden y evite duplicar etiquetas con el mismo src. Este ha sido un problema con el CMS que usamos.
Yo armé algo como esto:
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"]); Entonces, cuando se carga el script global, primero cargará las dependencias ["bootstrap@4.0.0", "jquery@3.4.1"] como etiquetas, antes de cargar/agregar global.js.
Cualquier intento de cargar global.js nuevamente no volverá a agregar el script:
// 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"]);Investigué require.js pero necesitaría volver a escribir todos mis archivos js como módulos requeridos que no me gustan mucho.
¿Existe ya algo de este tipo? El mío funciona bien, pero a veces puede ser un poco temperamental y preferiría algo que ya existe.
2 answers
Answer question0
Como señaló @morganney, Require.js está diseñado casi exactamente para este propósito. Muchas bibliotecas populares exportan sus bibliotecas en formato UMD , que es compatible con la lógica AMD (Definición de módulo asíncrono) que espera Require.js.
0
Esto simplemente importará de forma asíncrona todas las bibliotecas de primer nivel en su objeto, utilizando solo la import de JavaScript.
Desde la pestaña del depurador de red, podemos observar el éxito del código 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"], }, });