How to ship javascript library with plugin?

Development

AI-generated summary

To ship a JavaScript library with a Discourse plugin, it is recommended to add the library to the assets folder and register it in the plugin.rb file. Overgrow initially asked about this and received guidance from Falco and later confirmed that placing the library in the asset folder and registering it worked.

However, when trying to load a complex library with submodules, issues may arise. DawnPaladin encountered problems loading a library with multiple dependencies and was advised by joffreyjaffeux to examine the code of the discourse-algolia plugin for reference.

DawnPaladin then asked about adding an NPM module to a Discourse plugin, specifically dealing with a library that relies on submodules. joffreyjaffeux suggested using a fully packaged solution.

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 ファイルは実行するためにそれが必要に見えるため）
  • plugin.rb の register_asset 行の末尾に :server_side を追加する（ここが実行されるべき場所だから）
  • 第三者のライブラリを必要とする他のプラグインを探す（私が使っていない戦略を使っているものが見つからない）
  • バンドリングシステムを理解しようと 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 を使って全体を 1 つのファイルにバンドルしようとしましたが、何らかの理由で「punycode」というサードパーティライブラリがバンドルに含まれていません。コンパイル済みモジュールに punycode を追加したり、lib フォルダにアップロードして plugin.rb に register_asset 'lib/punycode.js' を追加したりしましたが、うまくいきません。

このライブラリは私のパソコン上や、私が作成した別のプラグイン内では正常に動作します。Discourse プラグインに NPM モジュールを追加する推奨方法はありますか？このスレッド では、モジュールのフォルダを /lib/ フォルダにコピーすると書かれていますが、私の環境ではうまくいきません*。複雑な NPM モジュールを Discourse プラグインと連携させて正常に動作させた例をご存知ないでしょうか？私が何をやっているのか確認したいのですが。

*そのスレッドでは、モジュールを unpkg.com からリモートで読み込もうとしていましたが、私はローカルで動作させたいと考えています（ただし、試してみるべきかもしれません）。

11

フルパッケージされたソリューションをお勧めします。