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

**URL:** <https://meta.discourse.org/t/bundle-esm-commonjs-javascript-into-a-theme-component/147186>\
**Category:** Development\
**Created:** [07.Апрель.2020 21:35:16 UTC](https://meta.discourse.org/t/bundle-esm-commonjs-javascript-into-a-theme-component/147186 "2020-04-07T21:35:16Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![balupton](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/balupton/32/255461_2.png) [@balupton](https://meta.discourse.org/u/balupton)\
**Post date:** [07.Апрель.2020 21:35:17 UTC](https://meta.discourse.org/t/bundle-esm-commonjs-javascript-into-a-theme-component/147186/1 "2020-04-07T21:35:17Z")

</div>

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

> [@YouTube Timestamps Component](https://meta.discourse.org/t/youtube-timestamps-component/147091?u=balupton):
>
> Converts timestamps within a post, to timestamp hyperlinks to the post’s (otherwise the topic’s) associated YouTube video. See it in action here [Maps of Meaning #9 - #2 by balupton - Study Notes - Bevry's Discourse](https://discuss.bevry.me/t/maps-of-meaning-9/31/2?u=balupton) (has things like 5:1 , 11:1 that are correctly not timestamped) [Maps of Meaning #8 - #2 by balupton - Study Notes - Bevry's Discourse](https://discuss.bevry.me/t/maps-of-meaning-8/30/2?u=balupton) (has a link to a referenced youtube video inside the notes, hence usage of # my notes for [associated youtube video](...) to make sure correct…

Он выполняет ESM-импорт npm-пакета [extract-timestamp](https://github.com/bevry/extract-timestamp), который был создан с помощью [boundation](https://github.com/bevry/boundation). Этот инструмент генерирует версию CommonJS для Node.js и версию ESM для браузеров.

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

> <https://github.com/bevry/discourse-component-youtubetimestamps/blob/34f5def462f44e35e7f3a7bb1dc9b95e800180db/source/index.js#L1-L5>

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

> <https://github.com/bevry/discourse-component-youtubetimestamps/blob/34f5def462f44e35e7f3a7bb1dc9b95e800180db/build.bash>

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

> <https://github.com/bevry/discourse-component-youtubetimestamps/blob/34f5def462f44e35e7f3a7bb1dc9b95e800180db/package.json#L7>

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

> <https://github.com/bevry/discourse-component-youtubetimestamps/blob/34f5def462f44e35e7f3a7bb1dc9b95e800180db/common/header.html>

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

В будущем я, вероятно, добавлю в [boundation](https://github.com/bevry/boundation) полноценную поддержку создания компонентов тем для Discourse, чтобы автоматизировать этот процесс.

---

_[View the full topic](https://meta.discourse.org/t/bundle-esm-commonjs-javascript-into-a-theme-component/147186)._