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

이 스레드를 되살리는 건 미안하지만, 구글이 저를 여기로 데려다 놨습니다. 플러그인 안에서 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

예를 들어 https://github.com/discourse/discourse-algolia가 이렇게 하고 있습니다. 코드를 살펴보는 것을 추천드리며, 특히 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 폴더에 업로드한 뒤 plugin.rb에 register_asset 'lib/punycode.js'를 추가해 보기도 했지만, 아직까지는 별다른 성과가 없습니다.

이 라이브러리는 제 컴퓨터에서는 잘 작동하고, 제가 작성한 다른 플러그인에서도 정상적으로 동작합니다. Discourse 플러그인에 NPM 모듈을 추가하는 권장 방법이 있을까요? 이 스레드에서는 모듈 폴더를 /lib/ 폴더로 복사하라고 되어 있는데, 제 경우에는 작동하지 않습니다.* 복잡한 NPM 모듈을 Discourse 플러그인과 함께 성공적으로 배포한 사례가 있는 예시를 보여줄 수 있을까요? 제가 어디서 잘못되고 있는지 확인하고 싶습니다.

*해당 스레드에서는 unpkg.com에서 모듈을 원격으로 로드하려고 하고 있습니다. 저는 로컬에서 처리하는 것이 더 좋지만, 그래도 시도해 볼 수도 있겠네요.

11

완벽하게 패키징된 솔루션을 선택하는 것을 추천합니다.