Сборка ESM и CommonJS JavaScript в компонент темы

balupton · 07.Апрель.2020 21:35:17

Недавно я опубликовал компонент темы:

Он выполняет ESM-импорт npm-пакета extract-timestamp, который был создан с помощью boundation. Этот инструмент генерирует версию CommonJS для Node.js и версию ESM для браузеров.

JavaScript-файл компонента темы source/index.js импортирует зависимость extract-timestamp следующим образом:

github.com/bevry/discourse-component-youtubetimestamps

source/index.js

34f5def46


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

Для преобразования файла source/index.js, содержащего логику нашей темы, в файл common/header.html для Discourse используется скрипт build.bash:

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

Запуск осуществляется командой bash ./build.bash или, если вы используете npm-скрипты, через npm run build:

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

В результате получается файл common/header.html, упакованный в единый файл (с объединением всех импортов):

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

Это может быть полезно другим разработчикам, создающим собственные компоненты тем.

В будущем я, вероятно, добавлю в boundation полноценную поддержку создания компонентов тем для Discourse, чтобы автоматизировать этот процесс.

Тема		Ответов	Просм.
YouTube Timestamps Component Theme component	9	4799	23.08.2025
Discourse-webpack: A boilerplate for developing JS-heavy Discourse components Development	3	1926	13.01.2022
Javascript assets in a theme component Development	15	2219	07.05.2021
When to switch themes/plugins to `.gjs`? Development	27	640	05.01.2026
How to install npm packages in custom themes/plugins Development	6	2280	11.11.2023

Сборка ESM и CommonJS JavaScript в компонент темы

Связанные темы