Saltar a contenido

Importaciones Entre Módulos de Magento

En MageObsidian Components, las importaciones de archivos JavaScript y componentes Vue siguen convenciones flexibles que aplican específicamente a los archivos dentro de las carpetas js y components. Este enfoque asegura compatibilidad, modularidad y una integración fluida con los temas.

Métodos de Importación Soportados

  1. Módulos de NPM
    Los paquetes de NPM se pueden importar de manera normal sin necesidad de configuraciones especiales: 

    1
2
    import _ from 'lodash';
import axios from 'axios';

  2. Importaciones Relativas y Absolutas
    Los archivos en las carpetas js y components pueden importarse usando rutas relativas o absolutas: 

    1
2
    import Button from './components/Button.vue';  // Relativa
import Navbar from '/view/frontend/web/components/Navbar.vue';  // Absoluta

  3. Importaciones Basadas en Módulos
    La característica más poderosa es la capacidad de importar archivos desde otros módulos de Magento utilizando la siguiente notación: 

    1
2
    import Demo from 'Vendor_ModuleA::components/demo.vue';
import Main from 'Vendor_ModuleF::js/main.js';

  4. Si no se especifica el directorio raíz (por ejemplo, components o js), se usará components por defecto: 

    1
    import Demo from 'Vendor_ModuleA::demo.vue';  // Equivalente a Vendor_ModuleA::components/demo.vue

  5. Importaciones Basadas en Temas
    También es posible importar archivos desde el tema utilizando una notación similar: 

    1
    import Navbar from 'Theme::nav.vue';

Esto sigue las mismas reglas de resolución que las importaciones basadas en módulos, permitiendo que los temas sobrescriban componentes o scripts sin complicaciones.

Aplicación en js y components

Este sistema de importación está diseñado exclusivamente para los archivos ubicados en las carpetas js y components: - Archivos JavaScript: Rastreados en view/frontend/web/js. - Componentes Vue: Rastreados en view/frontend/web/components.

Por ejemplo: - Vendor_ModuleF::js/main.js referencia un archivo en la carpeta js. - Vendor_ModuleA::components/demo.vue referencia un archivo en la carpeta components.

Cualquier importación fuera de estas carpetas debe realizarse utilizando rutas relativas o absolutas estándar.

Por Qué Esto Es Importante

Resolviendo Componentes Sobrescritos

Cuando los archivos son sobrescritos en los temas, las importaciones relativas o absolutas no reflejan estos cambios, lo que puede llevar a comportamientos inesperados.

Por ejemplo: 

1
import Bar from '../../bar.vue';
Si el componente bar.vue es sobrescrito en el tema, esta ruta relativa seguirá apuntando al componente original del módulo, ignorando la sobrescritura del tema.

En cambio: 

1
import Bar from 'Vendor_Module::bar.vue';
Al usar la notación Vendor_Module::, Vite resuelve automáticamente el archivo apropiado, respetando la jerarquía de sobrescritura (módulo -> tema). Esto garantiza que siempre se cargue el recurso correcto.

Mejores Prácticas para Importaciones

  1. Usa Siempre Importaciones Basadas en Módulos
    Utiliza la notación Vendor_Module:: para importar recursos desde módulos de Magento. Esto asegura:
  2. Resolución adecuada de componentes o scripts sobrescritos en los temas.
  3. Un código modular y fácil de mantener.

Ejemplo: 

1
import Button from 'Vendor_Module::button.vue';

  1. Evita Rutas Relativas o Absolutas
    A menos que sea absolutamente necesario, no utilices rutas relativas o absolutas para recursos en js o components. Estas rutas omiten el mecanismo de resolución de Vite, lo que puede provocar comportamientos inesperados si los recursos son sobrescritos.

  2. Usa Importaciones Desde el Tema para Sobrescrituras
    Si necesitas utilizar explícitamente un recurso desde el tema, utiliza la notación Theme::: 

    1
    import Navbar from 'Theme::navbar.vue';

  3. Consistencia en la Notación de Importaciones
    Mantén un uso consistente de las notaciones Vendor_Module:: y Theme:: en todo tu proyecto para evitar confusiones y garantizar compatibilidad.

Ejemplos

Importando Desde un Módulo

1
2
import Card from 'Vendor_ModuleA::components/Card.vue';
import ApiService from 'Vendor_ModuleB::js/api-service.js';

Importando Desde el Tema

1
import Header from 'Theme::header.vue';

Importación Incorrecta

1
2
// Evita esto
import Footer from './Footer.vue'; // Esto no reflejará sobrescrituras en los temas

Beneficios de las Importaciones Basadas en Módulos y Temas

  1. Sobrescrituras de Temas Sin Problemas
    Asegura que se cargue el componente o script correcto, respetando la jerarquía de sobrescrituras.

  2. Modularidad
    Fomenta un enfoque modular, haciendo que el código sea más mantenible y escalable.

  3. Flexibilidad
    Soporta personalizaciones sin romper la estructura original de los módulos.

  4. Prevención de Errores
    Evita comportamientos inesperados causados por rutas relativas o absolutas codificadas.

Notas Clave

  • Este sistema aplica únicamente a los archivos en las carpetas js y components.
  • Usa la notación Vendor_Module:: para todas las importaciones dentro de los módulos de Magento.
  • Usa la notación Theme:: para recursos específicamente desde los temas.
  • Evita rutas relativas o absolutas a menos que sea necesario.
  • Vite se encarga de resolver los componentes o scripts sobrescritos en los temas de forma automática.

Siguiendo estas recomendaciones, MageObsidian Components proporciona un flujo de trabajo limpio, flexible y confiable para gestionar JavaScript y componentes Vue entre módulos y temas.