How to ship javascript library with plugin?

Sviluppatore
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.

2 Mi Piace
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.

1 Mi Piace
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.

2 Mi Piace
8

Scusa per il necroing di questo thread, ma è qui che Google mi ha portato. Sto cercando da un paio d’ore di far caricare una libreria JS all’interno del mio plugin.

  • Nella cartella assets/javascripts della mia app, ho un file chiamato argdown-core.js.
  • Nel mio file plugin.rb, sto eseguendo register_asset 'javascripts/argdown-core.js'.
  • In assets/javascripts/discourse-markdown/argdown.js.es6, sto eseguendo import { argdown } from "argdown-core.js".

Ho provato molte varianti delle istruzioni sopra e continuo a ottenere Uncaught Error: Could not find module argdown-core.js imported from discourse/plugins/Argdown/discourse-markdown/argdown.

Alcune delle cose che ho provato:

  • Spostare il file in varie cartelle
  • Molte permutazioni sulla riga import
  • Aggiungere .es6 all’estensione del file - sembra che altri file JS abbiano bisogno di questo per funzionare
  • Aggiungere :server_side alla fine della mia riga register_asset in plugin.rb, dato che è lì che dovrebbe essere eseguito
  • Cercare altri plugin che richiedono librerie di terze parti - non riesco a trovarne nessuno che utilizzi strategie diverse dalle mie
  • Scavare nel codice di Discourse per cercare di capire il sistema di bundling

Probabilmente è una cosa semplice e mi sto perdendo qualcosa di ovvio. Qualcuno può aiutarmi?

1 Mi Piace
9

GitHub - discourse/discourse-algolia: A plugin for indexing and searching your Discourse with Algolia · GitHub fa esattamente questo, ad esempio: ti consiglio di dare un’occhiata al codice, in particolare all’inizio di plugin.rb.

Inoltre, un piccolo consiglio: in programmazione le cose sembrano sempre difficili quando senti di non conoscere gli effetti delle tue azioni. È importante sapere cosa sta succedendo: ti consiglio di eseguire questo comando nella tua console: window.requirejs.entries. Potrebbe aiutarti a capire alcune cose.

5 Mi Piace
10

Grazie, è molto utile! Inserire la mia cartella lib nella directory assets/lib mi sta aiutando molto.

Ora che ho il percorso corretto, la libreria si comporta in modo errato. :man_facepalming: È una libreria di grandi dimensioni con molti sottomoduli: argdown.js richiede ArgdownApplication.js e molte altre. Quando tenta di caricare ArgdownApplication.js, restituisce l’errore “Uncaught ReferenceError: exports is not defined”.

Ho provato a raggruppare tutto in un unico file usando Webpack, ma per qualche motivo il bundle manca di una libreria di terze parti chiamata “punycode”. Ho provato ad aggiungere punycode nel modulo compilato, ho provato a caricarlo nella cartella lib e ad aggiungere register_asset 'lib/punycode.js' a plugin.rb, ma non sto avendo molto successo.

La libreria funziona sul mio computer e in un altro plugin che ho scritto. Esiste un metodo consigliato per aggiungere un modulo NPM a un plugin Discourse? Questa discussione suggerisce di copiare la cartella del modulo nella tua directory /lib/; questo non sta funzionando per me.* Puoi indicarmi un esempio di qualcuno che ha distribuito con successo un modulo NPM complesso con un plugin Discourse, così posso vedere cosa sto facendo male?

*In quella discussione stanno cercando di caricare il modulo da remoto da unpkg.com; preferirei farlo in locale, anche se forse dovrei provare anche quella strada.

1 Mi Piace
11

Ti consiglio di optare per la soluzione completamente integrata.

1 Mi Piace