Dependencias Globales

Las dependencias globales en Elemental CMS son recursos que tu aplicación web necesita en múltiples páginas. A diferencia de los sistemas modernos que combinan todo en archivos masivos, seguimos un enfoque limpio y directo donde cada dependencia es un archivo separado cargado directamente sin empaquetado ni minificación.

Entendiendo las Dependencias Globales #

Las dependencias globales se organizan por tipo en carpetas separadas:

GLOBAL_DEPS_FOLDER/ ├── text_css/ # Hojas de estilo CSS ├── application_javascript/ # JavaScript estándar └── module/ # Módulos ES6

Creando Dependencias #

Dependencias CSS

Crea una dependencia CSS con una referencia clara y directa:

# Crear la dependencia elemental-cms global-deps create -d bootstrap text/css # Editar text_css/bootstrap.json { "_id": ObjectId("..."), "order": 1, "name": "bootstrap", "type": "text/css", "url": "css/bootstrap.css", # Referencia directa al archivo "meta": { "crossorigin": "anonymous" } }

Dependencias JavaScript

Las dependencias JavaScript siguen el mismo enfoque directo:

# Crear la dependencia elemental-cms global-deps create -d jquery application/javascript # Editar application_javascript/jquery.json { "name": "jquery", "type": "application/javascript", "url": "js/jquery.js", # Código fuente limpio, sin minificar "meta": { "crossorigin": "anonymous" } }

Módulos ES6

Los módulos JavaScript modernos se manejan directamente:

# Crear dependencia de módulo elemental-cms global-deps create -d app-utils module # Editar module/app-utils.json { "name": "app-utils", "type": "module", "url": "js/modules/app-utils.js", # Archivo de módulo directo "meta": { "type": "module" } }

Gestionando Dependencias #

Comandos Disponibles

# Listar todas las dependencias elemental-cms global-deps list # Crear nueva dependencia elemental-cms global-deps create -d bootstrap text/css # Enviar dependencia individual elemental-cms global-deps push -d bootstrap text/css # Enviar todas las dependencias elemental-cms global-deps push --all # Obtener dependencias de la base de datos elemental-cms global-deps pull --all # Eliminar una dependencia elemental-cms global-deps remove -d bootstrap text/css

Sistema de Respaldo #

Al actualizar dependencias existentes, el sistema crea respaldos automáticamente:

GLOBAL_DEPS_FOLDER/ └── text_css/ ├── bootstrap.json # Versión actual └── .bak/ └── bootstrap-1637875033623.json # Respaldo con marca de tiempo

Mejores Prácticas #

Mantener Dependencias Separadas

  • Un archivo por dependencia
  • Sin empaquetado ni minificación
  • Referencias directas a archivos

Organizar por Propósito

  • Usar nombres significativos
  • Agrupar por tipo (css/js/module)
  • Mantener estructura clara de carpetas

Orden de Carga

  • Usar campo order para dependencias
  • Cargar CSS antes que JavaScript
  • Mantener dependencias enfocadas

Ejemplos #

Hoja de Estilo Básica

{ "name": "site-theme", "type": "text/css", "url": "css/theme.css", "order": 1, "meta": {} }

Librería JavaScript

{ "name": "data-utils", "type": "application/javascript", "url": "js/data-utils.js", "order": 2, "meta": { "defer": "true" } }

Módulo ES6

{ "name": "api-client", "type": "module", "url": "js/modules/api-client.js", "order": 3, "meta": { "type": "module" } }

Este enfoque asegura que tu aplicación permanezca mantenible y clara, sin complejidad ni pasos de construcción innecesarios. Cada recurso se carga directamente y sirve un propósito específico.

Content