Bundle ESM & CommonJS JavaScript in un componente tema

Ho recentemente pubblicato il componente del tema:

Che esegue un’importazione ESM del pacchetto npm extract-timestamp, creato tramite boundation, che genera un’edizione CommonJS per Node.js e un’edizione ESM per i browser.

Il file JavaScript del componente del tema source/index.js importa la dipendenza extract-timestamp nel seguente modo:

Questo utilizza il file build.bash per trasformare il file source/index.js, contenente la logica del nostro componente del tema, in un file common/header.html per Discourse:

L’esecuzione avviene con bash ./build.bash o, se si utilizza un flusso di lavoro basato sugli script npm, tramite npm run build, come definito qui:

Il risultato è un file common/header.html confezionato in un unico file (con le importazioni precedenti raggruppate):

Questo potrebbe essere utile ad altri sviluppatori che creano i propri componenti del tema.

In futuro, probabilmente aggiungerò a boundation un supporto di primo livello per i componenti del tema di Discourse, per automatizzare questa guida.

3 Mi Piace