如何在组件辅助文件中要求外部库?

我正在编写一个主题组件,需要从辅助文件中访问两个外部库。我目前的方法可行,但感觉有点笨拙:

在我的初始化器中:

import { apiInitializer } from 'discourse/lib/api';
import loadScript from 'discourse/lib/load-script';
import myHelper from '../lib/helper';

export default apiInitializer('0.11.1', (api) => {
  api.decorateCookedElement(
    (elem) => {
      loadScript(D3_URL).then(() => {
        loadScript(LUXON_URL).then(() => {
          ...
          myHelper(whatever, d3, luxon)
          ...
        })
      })
    },
    {id: 'discourse-xyz', onlyStream: true}
  )
});

然后在 myHelper.js 中:

export default function myHelper(whatever, d3, luxon) {
  d3();
  luxon();
  ...
}

我尝试直接从辅助文件引入这些库,但这意味着我需要返回一个 Promise,然后在初始化器中执行 myHelper(whatever, d3, luxon).then(...),由于其他原因,我尽量避免这样做。

是否有更好的方法?

您可以使用我在 GitHub - merefield/discourse-tc-tag-cloud: A Discourse Theme Component that displays a tag cloud above the tag lists on the tags page · GitHub 中采用的方法。

请注意,资源资产在此处注册:

并位于 assets 文件夹中。

4 个赞

谢谢,Robert。我试了一下,但找不到 “theme_uploads”。这是否需要在 settings.yml 中进行设置?

不,你不需要这样做。

我注意到该语法仍在规范中:discourse/spec/models/theme_spec.rb at c8f4f7c235ca38b39d4b66bf9e1305410e36815e · discourse/discourse · GitHub

1 个赞

啊,我的错。我在 assets 中使用了错误的文件名。我已经修复了,但现在遇到了 CSP 错误:

load-script.js:35 拒绝加载脚本
'http://localhost:4200/uploads/default/original/1X/c4a31754250cf6a40f7cbed182cfe2456d9be9fe.js',因为它违反了以下内容安全策略指令:
"script-src http://localhost:4200/logs/ http://localhost:4200/sidekiq/ http://localhost:4200/mini-profiler-resources/ http://localhost:4200/assets/ http://localhost:4200/brotli_asset/ http://localhost:4200/extra-locales/ http://localhost:4200/highlight-js/ http://localhost:4200/javascripts/ http://localhost:4200/plugins/ http://localhost:4200/theme-javascripts/ http://localhost:4200/svg-sprite/ 
'unsafe-eval' http://localhost:4200/ember-cli-live-reload.js http://localhost:4200/_lr/ /uploads"。注意,'script-src-elem' 未显式设置,因此回退使用 'script-src'。

我没有在 settings.yml 中看到您使用 extend_content_security_policy,所以我不清楚自己漏掉了什么。

1 个赞

无论如何,我已经将上传目录的 URL 添加到了我的 CSP src 设置中。不过,我也可以添加一个更具体的来源 :+1:t2:

哦,你是指这里吗?如果我这样做,它就有效:

我本以为可以在 settings.yml 中通过这种方式实现(但似乎对 localhost 无效):

extend_content_security_policy:
  type: list
  default: "script_src: http://localhost:4200/"
1 个赞