ESM과 CommonJS JavaScript를 테마 컴포넌트로 번들링하기

balupton · 4월 7, 2020, 9:35오후

최근에 테마 컴포넌트를 게시했습니다:

이 컴포넌트는 npm 패키지 extract-timestmap를 ESM으로 가져오며, 이 패키지는 boundation을 사용하여 스캐폴딩되었습니다. boundation은 Node.js용 CommonJS 버전과 브라우저용 ESM 버전을 생성합니다.

테마 컴포넌트 자바스크립트 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 파일을 사용하여 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 스크립트 워크플로를 사용하는 경우 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 테마 컴포넌트를 위한 1급 스캐폴딩 지원을 추가하여 이 가이드를 자동화할 예정입니다.

글		댓글	조회수
Discourse-webpack: A boilerplate for developing JS-heavy Discourse components Development	1	2002	6월 3, 2019
Javascript assets in a theme component Development	15	2480	5월 7, 2021
When to switch themes/plugins to `.gjs`? Development	27	1252	1월 5, 2026
How to install npm packages in custom themes/plugins Development	6	2420	11월 11, 2023
Interaction among theme component, theme javascript, and "previews" Development	4	967	5월 14, 2021

ESM과 CommonJS JavaScript를 테마 컴포넌트로 번들링하기

Related topics