How to ship javascript library with plugin?

Dev
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 curtidas
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 curtida
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 curtidas
8

Desculpe reviver este tópico, mas foi para cá que o Google me levou. Tenho tentado há algumas horas carregar uma biblioteca JS dentro do meu plugin.

  • Na pasta assets/javascripts do meu aplicativo, tenho um arquivo chamado argdown-core.js.
  • No meu arquivo plugin.rb, estou fazendo register_asset 'javascripts/argdown-core.js'.
  • Em assets/javascripts/discourse-markdown/argdown.js.es6, estou fazendo import { argdown } from "argdown-core.js".

Tentei muitas variações do acima e continuo recebendo Uncaught Error: Could not find module argdown-core.js imported from discourse/plugins/Argdown/discourse-markdown/argdown.

Algumas das coisas que tentei:

  • Mover o arquivo para várias pastas
  • Muitas permutações na linha import
  • Adicionar .es6 à extensão do arquivo - outros arquivos JS parecem precisar disso para rodar
  • Adicionar :server_side ao final da minha linha register_asset no plugin.rb, já que é onde isso deve rodar
  • Procurar outros plugins que exigem bibliotecas de terceiros - não encontrei nenhum que use estratégias que eu não esteja usando
  • Explorar o código do Discourse para tentar entender o sistema de bundling

Isso provavelmente é simples e há algo óbvio que estou perdendo. Alguém pode ajudar?

1 curtida
9

GitHub - discourse/discourse-algolia: A plugin for indexing and searching your Discourse with Algolia · GitHub está fazendo isso, por exemplo. Recomendo que você dê uma olhada no código, especialmente no topo do plugin.rb.

Além disso, uma pequena dica: na programação, as coisas sempre parecem difíceis quando você sente que não conhece os efeitos de suas ações. É importante saber o que está acontecendo. Recomendo executar este comando no seu console: window.requirejs.entries. Isso pode ajudá-lo a entender algumas coisas.

5 curtidas
10

Obrigado, isso foi muito útil! Colocar minha biblioteca na pasta assets/lib está ajudando bastante.

Agora que tenho o caminho correto para ela, a biblioteca está apresentando problemas. :man_facepalming: É uma biblioteca grande com muitos submódulos — o argdown.js requer o ArgdownApplication.js e vários outros. Quando tenta carregar o ArgdownApplication.js, aparece a mensagem “Uncaught ReferenceError: exports is not defined”.

Tentei empacotar tudo em um único arquivo usando o Webpack, mas, por algum motivo, o pacote está faltando uma biblioteca de terceiros chamada “punycode”. Tentei adicionar o punycode ao módulo compilado, tentei enviá-lo para a pasta lib e adicionar register_asset 'lib/punycode.js' no plugin.rb, mas não estou tendo muito sucesso.

A biblioteca funciona no meu computador e em outro plugin que escrevi. Existe alguma maneira recomendada de adicionar um módulo NPM a um plugin do Discourse? Esta discussão diz para copiar a pasta do módulo para sua pasta /lib/; isso não está funcionando para mim.* Você poderia me indicar um exemplo de alguém que conseguiu enviar com sucesso um módulo NPM complexo com um plugin do Discourse, para que eu possa ver o que estou fazendo de errado?

*Nessa discussão, eles estão tentando carregar o módulo remotamente do unpkg.com; eu preferiria fazer isso localmente, embora talvez devesse tentar essa opção.

1 curtida
11

Recomendo que você opte pela solução totalmente integrada.

1 curtida