Aliasy importów ES6

0

Robię config rollupa do backu. Mam w folderze translacje językowe zapisane w yamlach, które są zwracane na front i np. po odwołaniu się do lang.errors.server_error dostaję jakiegoś tam stringa.

Najpierw potrzebuję je odczytać z folderu, wcześniej było to zrobione za pomocą require.context, ale w tej konfiguracji jest to niemożliwe. W webpacku miałem zdefiniowane aliasy i normalnie do require.context podawałem alias roota projektu i dalszą część ścieżki.

Dodałem alias do configu:

alias({
  entries: [
    {
      find: '@home',
      replacement: new URL('../..', import.meta.url)
    }
  ]
}),

Teraz chciałbym w metodzie ładującej translacje zrobić tak:

async reload () {
  const translationsURL = new URL('@home/lang', import.meta.url)
  const langs = await loadTranslations(translationsURL.pathname)

  this.translations = langs
}

Tylko, że nie działa. Alias działa tylko dla importów. Pasowałoby mi też, żeby działało to tak jak tutaj w Solution 2 - https://stackoverflow.com/questions/72161807/importing-a-whole-directory-of-static-files-in-rollup-js

Tutaj dostaję błąd Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'langs' imported from /code/application/back/dist/utils/files.js.

Mam zrobić plugin, który w buildzie podmieni ścieżki? Chcę w kodzie ich używać np. const path = path.resolve('@home/lang', import.meta.url).

1

Nie wiem jak to zrobić za pomocą Rollupa (nie miałem okazji używać :P), ale najprostszym możliwym rozwiązaniem, które jest odporne na zmianę narzędzia (webpack -> rollup -> za jakiś czas coś nowego i znowu ten sam problem) byłoby skorzystanie z path.resolve + dynamic import

import path from 'node:path';

export const langPath = path.resolve('../assets/languages'); // Tutaj podajemy ścieżkę do folderu względem aktualnego pliku

// Robimy coś w takiego w zależności od naszych potrzeb (walidacja, obróbka tekstów itd)
export const getTranslationFile = async (name) => {
  return await import(`${langPath}/${name}.yaml`);
}

i używamy

import { langPath, getTranslationFile } from '...';

console.dir(langPath); // ścieżka do folderu lang

console.dir(await getTranslationFile('about-us-page')); // załadowany plik about-us-page.yaml 

Jeśli masz jakiś plugin do yaml'a to zakładam, że Rollup powinien rozpoznać, że importujemy taki plik i odpowiednio go sparsować.

1

No samo ładowanie to spoko, tylko chciałbym sobie zaaliasować np. roota projektu, a nie teraz mi wychodzi path.resolve('../../../../..', import.meta.url). require.context nie jest mi już do niczego potrzebny. Spróbuję pluginem to ogarnąć jeszcze.

1

@Xarviel: Dobra, plugin napisałem, który pośredniczy w importowaniu modułów, sprawdzam nazwę i przy translacjach odczytuje je z yamli. Czyli właściwie to co na SO dałem, ale wcześniej coś nie ogarnąłem xd
Potem normalnie dynamic importem. Dzięki, to co w komentarzu też sprawdzę.

1 użytkowników online, w tym zalogowanych: 0, gości: 1