Regroupez ESM et CommonJS JavaScript dans un composant de thème

balupton · Avril 7, 2020, 9:35

J’ai récemment publié le composant de thème :

Il effectue une importation ESM du package npm extract-timestmap, qui a été généré à l’aide de boundation. Ce dernier produit une édition CommonJS pour Node.js et une édition ESM pour les navigateurs.

Le fichier JavaScript du composant de thème source/index.js importe la dépendance extract-timestamp comme suit :

github.com/bevry/discourse-component-youtubetimestamps

source/index.js

34f5def46


      
          import {
            extractYoutubeID,
            replaceTimestamps,
            makeYoutubeTimestamp,
          } from "../node_modules/extract-timestamp/edition-browsers/index.js";

Il utilise ensuite le fichier build.bash pour transformer le fichier source/index.js, qui contient la logique de notre composant de thème, en un fichier common/header.html destiné à Discourse :

github.com/bevry/discourse-component-youtubetimestamps

build.bash

34f5def46

#!/bin/bash
set -ueE -o pipefail

mkdir -p ./out
npx rollup --input ./source/index.js --file ./out/index.js --format iife
echo '<script type="text/discourse-plugin" version="0.8.18">' > common/header.html
cat out/index.js >> common/header.html
echo "</script>" >> common/header.html
rm -Rf ./out

Ce processus est lancé en exécutant bash ./build.bash ou, si vous utilisez un flux de travail avec des scripts npm, via npm run build, comme indiqué ici :

github.com/bevry/discourse-component-youtubetimestamps

package.json

34f5def46


      
          {
            "name": "discourse-component-youtubetimestamps",
            "version": "1.0.0",
            "description": "Convert timetamps in your post, to a timestamped link to the post's (otherwise topic's) referenced youtube video",
            "main": "source/index.js",
            "scripts": {
              "build": "bash ./build.bash",
              "postinstall": "npm run build",
              "test": "echo \"Error: no test specified\" && exit 1"
            },
            "repository": {
              "type": "git",
              "url": "git+https://github.com/bevry/discourse-component-youtubetimestamps.git"
            },
            "author": "Benjamin Lupton <b@lupton.cc> (https://balupton.com)",
            "license": "MIT",
            "bugs": {

Le résultat est un fichier common/header.html qui regroupe toutes les importations précédentes en un seul fichier (bundling) :

github.com/bevry/discourse-component-youtubetimestamps

common/header.html

34f5def46

<script type="text/discourse-plugin" version="0.8.18">
(function () {
	'use strict';

	/** The regular expression used for finding a timestamp */
	const timestampsRegex = /(?:(?:(?<hours>\d{1,2}):)?(?<minutes>\d{1,2}):(?<seconds>\d{1,2})|(?<bits>(?:\d{1,2}(?:[hms]| ?(?:hour|min(?:ute)?|sec(?:ond)?)s?) ?)+))/;
	/** The regular expression used for extracting a timestmap in 1h2m3s format */
	const timestampRegex = /^(?:(?<hours>\d{1,2})(?:h|\s?hours?)\s?)?(?:(?<minutes>\d{1,2})(?:m|\s?min(?:ute)?s?)\s?)?(?:(?<seconds>\d{1,2})(?:s|\s?sec(?:ond)?s?)\s?)?$/;
	const secondsInMinute = 60;
	const minutesInHour = 60;
	const secondsInHour = secondsInMinute * minutesInHour;
	/**
	 * Checks whether any of the timestamp's `hours`, `minutes`, and `seconds` has a value >= 0.
	 * @returns `true` if there was a value, otherwise `false`.
	 */
	function verifyTimestamp(timestamp) {
		if (timestamp == null) return false
		const { hours, minutes, seconds } = timestamp;
		if (hours == null && minutes == null && seconds == null) return false
		return true

This file has been truncated. show original

Cela pourrait s’avérer utile pour d’autres développeurs créant leurs propres composants de thème.

Je prévois probablement d’ajouter un support de génération (scaffolding) de premier ordre pour les composants de thème Discourse dans boundation à un stade ultérieur, afin d’automatiser ce guide.

Sujet		Réponses	Vues
YouTube Timestamps Component Theme component	9	4792	Août 23, 2025
Discourse-webpack: A boilerplate for developing JS-heavy Discourse components Development	3	1920	Janvier 13, 2022
Javascript assets in a theme component Development	15	2182	Mai 7, 2021
When to switch themes/plugins to `.gjs`? Development	27	552	Janvier 5, 2026
How to install npm packages in custom themes/plugins Development	6	2257	Novembre 11, 2023

Regroupez ESM et CommonJS JavaScript dans un composant de thème

Sujets connexes