Empacote ESM e CommonJS JavaScript em um componente de tema

Recentemente publiquei o componente de tema:

Ele faz uma importação ESM do pacote npm extract-timestamp, que foi gerado usando o boundation, o qual cria uma edição CommonJS para Node.js e uma edição ESM para navegadores.

O JavaScript do componente de tema, em source/index.js, importa a dependência extract-timestamp da seguinte forma:

Esse processo utiliza o arquivo build.bash para transformar o arquivo source/index.js, que contém a lógica do nosso componente de tema, em um arquivo common/header.html para o Discourse:

Isso é executado com o comando bash ./build.bash ou, se você estiver usando um fluxo de trabalho com scripts npm, através de npm run build, conforme definido em:

O resultado é um arquivo common/header.html que é empacotado em um único arquivo (agrupando as importações mencionadas anteriormente):

Isso pode ser útil para outros desenvolvedores que estão criando seus próprios componentes de tema.

Provavelmente, em um momento futuro, adicionarei suporte nativo para scaffolding de componentes de tema do Discourse ao boundation, para automatizar este guia.

3 curtidas