将 ESM 和 CommonJS JavaScript 打包到主题组件中

balupton · 2020 年4 月 7 日 21:35

我最近发布了主题组件：

该组件通过 ESM 方式导入了 npm 包 extract-timestamp。该包是使用 boundation 脚手架生成的，它同时提供适用于 Node.js 的 CommonJS 版本和适用于浏览器的 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";

该文件使用 build.bash 脚本将包含主题组件逻辑的 source/index.js 文件转换为 Discourse 所需的 common/header.html：

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 scripts 工作流，也可以通过 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	4796	2025 年8 月 23 日
Discourse-webpack: A boilerplate for developing JS-heavy Discourse components Development	3	1923	2022 年1 月 13 日
Javascript assets in a theme component Development	15	2205	2021 年5 月 7 日
When to switch themes/plugins to `.gjs`? Development	27	614	2026 年1 月 5 日
How to install npm packages in custom themes/plugins Development	6	2258	2023 年11 月 11 日

将 ESM 和 CommonJS JavaScript 打包到主题组件中

相关话题