دمج حزم ESM و CommonJS JavaScript في مكون سمة

balupton · 7 أبريل 2020، 9:35م

لقد نشرت مؤخرًا مكون السمة:

الذي يقوم باستيراد ESM لحزمة npm extract-timestmap، والتي تم إنشاؤها باستخدام boundation الذي يولد إصدار CommonJS لـ Node.js، وإصدار ESM للمتصفحات.

يقوم ملف source/index.js الخاص بـ JavaScript الخاص بمكون السمة باستيراد الاعتمادية 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";

الذي يستخدم ملف build.bash هذا لتحويل ملف source/index.js الذي يحتوي على منطق مكون السمة الخاص بنا، إلى ملف common/header.html لـ 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

والذي يتم تشغيله عن طريق تنفيذ 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

قد يكون هذا مفيدًا للآخرين الذين يطورون مكونات سمات خاصة بهم.

من المحتمل أن أضيف دعمًا أساسيًا لإنشاء هياكل لمكونات سمات discourse إلى boundation في مرحلة لاحقة، لأتمتة هذا الدليل.

الموضوع		الردود	مرات العرض
YouTube Timestamps Component Theme component	9	4792	23 أغسطس 2025
Discourse-webpack: A boilerplate for developing JS-heavy Discourse components Development	3	1920	13 يناير 2022
Javascript assets in a theme component Development	15	2182	7 مايو 2021
When to switch themes/plugins to `.gjs`? Development	27	552	5 يناير 2026
How to install npm packages in custom themes/plugins Development	6	2257	11 نوفمبر 2023

دمج حزم ESM و CommonJS JavaScript في مكون سمة

الموضوعات ذات الصلة