How to ship javascript library with plugin?

开发
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 个赞
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 个赞
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 个赞
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 的代码，试图理解其打包系统

这应该很简单，可能我忽略了某个明显的地方。有人能帮忙吗？

1 个赞
9

例如，GitHub - discourse/discourse-algolia: A plugin for indexing and searching your Discourse with Algolia · GitHub 就是这样做的，我建议你查看一下代码，尤其是 plugin.rb 文件的顶部。

另外一个小提示：在编程中，当你不确定自己的操作会产生什么影响时，事情总会显得很难。了解正在发生的情况非常重要，我建议在控制台中运行以下命令：window.requirejs.entries，这可能会帮助你理解一些内容。

5 个赞
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'，但都不太顺利。

这个库在我的电脑上以及我编写的另一个插件中都能正常运行。请问有没有推荐的方法可以将 NPM 模块添加到 Discourse 插件中？这个帖子 提到将模块文件夹复制到你的 /lib/ 文件夹中，但这对我行不通。* 能否为我提供一个成功将复杂 NPM 模块与 Discourse 插件一起发布的示例，让我看看自己哪里做错了？

  • 在那个帖子中，他们尝试从 unpkg.com 远程加载模块；我更喜欢本地加载，不过也许我应该试试远程加载。
1 个赞
11

我建议您选择全套打包解决方案。

1 个赞