Bündeln Sie ESM & CommonJS JavaScript zu einer Theme-Komponente

balupton · 7. April 2020 um 21:35

Ich habe kürzlich die Theme-Komponente veröffentlicht:

Diese führt ein ESM-Import des npm-Pakets extract-timestmap durch, das mit boundation erstellt wurde. Dieses generiert eine CommonJS-Version für Node.js und eine ESM-Version für Browser.

Das Theme-Komponenten-JavaScript source/index.js importiert die Abhängigkeit extract-timestamp wie folgt:

github.com/bevry/discourse-component-youtubetimestamps

source/index.js

34f5def46


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

Dies verwendet die Datei build.bash, um die Datei source/index.js, die unsere Theme-Komponenten-Logik enthält, in eine common/header.html für Discourse zu verwandeln:

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

Dies wird ausgeführt, indem man bash ./build.bash eingibt oder, wenn man einen npm-Skripte-Workflow verwendet, über npm run build mit:

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": {

Das Ergebnis ist eine common/header.html-Datei, die in eine einzige Datei verpackt wird (die Imports von früher werden gebündelt):

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

Dies könnte für andere nützlich sein, die ihre eigenen Theme-Komponenten entwickeln.

Ich werde wahrscheinlich später eine erstklassige Scaffolding-Unterstützung für Discourse-Theme-Komponenten in boundation hinzufügen, um diesen Leitfaden zu automatisieren.

Thema		Antworten	Aufrufe
YouTube Timestamps Component Theme component	9	4792	23. August 2025
Discourse-webpack: A boilerplate for developing JS-heavy Discourse components Development	3	1920	13. Januar 2022
Javascript assets in a theme component Development	15	2182	7. Mai 2021
When to switch themes/plugins to `.gjs`? Development	27	552	5. Januar 2026
How to install npm packages in custom themes/plugins Development	6	2257	11. November 2023

Bündeln Sie ESM & CommonJS JavaScript zu einer Theme-Komponente

Verwandte Themen