How to ship javascript library with plugin?

Desarrollador
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 Me gusta
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 me gusta
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 Me gusta
8

Lo siento por revivir este hilo, pero es a donde Google me ha llevado. He estado intentando durante un par de horas cargar una biblioteca JS dentro de mi plugin.

  • En la carpeta assets/javascripts de mi aplicación, tengo un archivo llamado argdown-core.js.
  • En mi archivo plugin.rb, estoy ejecutando register_asset 'javascripts/argdown-core.js'.
  • En assets/javascripts/discourse-markdown/argdown.js.es6, estoy ejecutando import { argdown } from "argdown-core.js".

He probado muchas variaciones de lo anterior y sigo obteniendo Uncaught Error: Could not find module argdown-core.js imported from discourse/plugins/Argdown/discourse-markdown/argdown.

Algunas de las cosas que he intentado:

  • Mover el archivo a varias carpetas
  • Muchas permutaciones en la línea import
  • Añadir la extensión .es6 al archivo; parece que otros archivos JS la necesitan para ejecutarse
  • Añadir :server_side al final de mi línea register_asset en plugin.rb, ya que es allí donde debería ejecutarse esto
  • Buscar otros plugins que requieran bibliotecas de terceros; no he encontrado ninguno que utilice estrategias que yo no esté usando
  • Revisar el código de Discourse para intentar entender el sistema de empaquetado

Esto probablemente sea sencillo y me esté saltando algo obvio. ¿Puede alguien ayudar?

1 me gusta
9

GitHub - discourse/discourse-algolia: A plugin for indexing and searching your Discourse with Algolia · GitHub hace esto, por ejemplo; te recomiendo echar un vistazo al código, especialmente al principio del archivo plugin.rb.

Además, un pequeño consejo: en programación, las cosas siempre parecen difíciles cuando sientes que no conoces los efectos de tus acciones. Es importante saber qué está sucediendo; te recomiendo ejecutar este comando en tu consola: window.requirejs.entries. Podría ayudarte a entender algunas cosas.

5 Me gusta
10

¡Gracias, eso es muy útil! Poner mi biblioteca en la carpeta assets/lib me está ayudando mucho.

Ahora que tengo la ruta correcta, la biblioteca se está comportando mal. :man_facepalming: Es una biblioteca grande con muchos submódulos; argdown.js requiere ArgdownApplication.js y varios otros. Cuando intenta cargar ArgdownApplication.js, dice “Uncaught ReferenceError: exports is not defined”.

He intentado empaquetar todo en un solo archivo usando Webpack, pero por alguna razón, el paquete no incluye una biblioteca de terceros llamada “punycode”. He probado agregando punycode al módulo compilado, he intentado subirlo a la carpeta lib y agregar register_asset 'lib/punycode.js' a plugin.rb, pero no he tenido mucho éxito.

La biblioteca funciona en mi computadora y en otro plugin que he escrito. ¿Hay alguna forma recomendada de agregar un módulo NPM a un plugin de Discourse? Este hilo dice que copies la carpeta del módulo en tu carpeta /lib/; eso no me está funcionando.* ¿Podrías indicarme un ejemplo de alguien que haya enviado con éxito un módulo NPM complejo con un plugin de Discourse para que pueda ver qué estoy haciendo mal?

*En ese hilo están intentando cargar el módulo remotamente desde unpkg.com; preferiría hacerlo localmente, aunque quizás debería probar eso.

1 me gusta
11

Te recomiendo que optes por la solución completamente integrada.

1 me gusta