How to ship javascript library with plugin?

Разработка
1

Hi,
I’d like to ask what is recommended way to ship javascript library with some plugin? I can load it asynchronously from external url using e.g.

Em.$.getScript('https://cdnjs.cloudflare.com/ajax/libs/......min.js').done(function() {
...
}

But I’d prefer storing library locally. Normally I’d use vendor.js to include it and have it loaded before the plugin code, but this approach needs hacking with the Discourse core… So what is recommended way and where to add external js library to plugin? Is there some convention? Thx.

2

Just add the js lib at the assets folder in your plugin, or if available, as a gem dependency.

3

Thanks… In the assets folder will it be loaded automatically or do I need to take care of asynchronous load as quoted in previous post? I need to load library before running plugin code.

4

It’s loaded in the plugin-third-party file, inside the HEAD. You can use ES6 modules to require stuff.

5

I asked a similar question a few days ago (Existing JS module import into ES6 plugin). The problem I have is, that I want it included server side and I have no idea on which path I should require it in ES6 modules.

6

Got back to you there, so we don’t pollute here.

7

Thanks… placing js lib in asset folder and register_asset in plugin.rb did the trick.

8

Извините, что воскрешаю эту тему, но именно сюда меня привёл Google. Я уже несколько часов пытаюсь загрузить JS-библиотеку внутрь своего плагина.

  • В папке assets/javascripts моего приложения у меня есть файл с именем argdown-core.js.
  • В файле plugin.rb я использую register_asset 'javascripts/argdown-core.js'.
  • В файле assets/javascripts/discourse-markdown/argdown.js.es6 я делаю import { argdown } from "argdown-core.js".

Я пробовал множество вариаций вышеперечисленного, но постоянно получаю ошибку: Uncaught Error: Could not find module argdown-core.js imported from discourse/plugins/Argdown/discourse-markdown/argdown.

Вот некоторые из вещей, которые я уже пробовал:

  • Перемещение файла в различные папки
  • Множество вариантов записи строки import
  • Добавление расширения .es6 к имени файла — похоже, другие JS-файлы требуют этого для работы
  • Добавление :server_side в конец строки register_asset в plugin.rb, так как именно там это должно выполняться
  • Поиск других плагинов, требующих сторонние библиотеки — не нашёл ни одного, использующего стратегии, отличные от моих
  • Изучение кода Discourse, чтобы понять систему сборки

Скорее всего, это что-то простое, и я упускаю очевидную вещь. Может, кто-нибудь поможет?

9

Например, GitHub - discourse/discourse-algolia: A plugin for indexing and searching your Discourse with Algolia · GitHub делает именно это. Рекомендую вам посмотреть код, особенно начало файла plugin.rb.

Также небольшой совет: в программировании всё кажется сложным, когда вы чувствуете, что не знаете последствий своих действий. Важно понимать, что происходит. Рекомендую выполнить в консоли команду: window.requirejs.entries — это может помочь вам разобраться в некоторых вещах.

10

Спасибо, это очень помогло! Размещение моей библиотеки в папке assets/lib значительно облегчило задачу.

Теперь, когда у меня правильный путь к ней, библиотека ведёт себя странно. :man_facepalming: Это большая библиотека с множеством подмодулей — argdown.js требует ArgdownApplication.js и ещё несколько других. Когда она пытается загрузить ArgdownApplication.js, выводится ошибка: “Uncaught ReferenceError: exports is not defined”.

Я пробовал собрать всё в один файл с помощью Webpack, но по какой-то причине в сборке отсутствует сторонняя библиотека под названием “punycode”. Я пытался добавить punycode в скомпилированный модуль, загрузить его в папку lib и добавить register_asset 'lib/punycode.js' в файл plugin.rb, но пока без особого успеха.

Библиотека работает на моём компьютере и в другом плагине, который я написал. Есть ли рекомендуемый способ добавления NPM-модуля в плагин Discourse? В этой теме предлагается скопировать папку модуля в папку /lib/, но у меня это не работает.* Можете ли вы показать пример успешного использования сложного NPM-модуля в плагине Discourse, чтобы я мог понять, где ошибаюсь?

*В той теме они пытаются загрузить модуль удалённо с unpkg.com; я бы предпочел сделать это локально, хотя, возможно, стоит попробовать и этот вариант.

11

Я рекомендую выбрать полностью готовое решение.