设法让mastodon在开发模式下以vagrant运行，但在生产中应该是一样的，你只需要预编译和重新启动。

网络包

$ yarn add jquery
Done in 999.72s # <= at least it worked on the first try

将其添加到插件：

• 网址：http：//www.example.comgithub.com/mastodon/mastodon/blob/v4.0.2/config/webpack/shared.js#L69*

// config/webpack/shared.js

plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
  }),
  ...

• 网址：http：//www.example.comwebpack.js.org/plugins/provide-plugin/#usage-jquery*

这意味着在模块中会自动包含$和jQuery。application.js中的console.log($);会显示以下内容：

ƒ jQuery(selector, context) {                                 application.js?2e28:4 
      // The jQuery object is actually just the init constructor 'enhanced'
      // Need init if jQuery is called (just allow error to be thrown if not included)
      re…

如果需要，您可以尝试将 * jquery * 添加到窗口：

// app/javascript/application.js

window.$ = window.jQuery = jQuery;
//                         ^ this is automatically given by wepback.ProvidePlugin

现在，模块外有了$和jQuery：

// app/views/layouts/application.html.haml

:javascript
  console.log($) // works in development

我认为，它会在生产中失败，因为CSP策略，所以没有内联脚本。

内容分发网络

# app/views/layouts/application.html.haml

= javascript_include_tag "https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js"

or

%script{ src: "https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js" }

网络选项卡显示它不工作的原因：

jquery.min.js          (blocked:csp)        script

内容安全策略配置为不接受来自外部主机的脚本，并且仅为样式设置 * nonce *：

• 一个月一次 *

你正在寻找script_src配置，它在那里的几个地方，我认为更新这一节应该足够了：

if Rails.env.development?
  webpacker_urls = %w(ws http).map { |protocol| "#{protocol}#{Webpacker.dev_server.https? ? 's' : ''}://#{Webpacker.dev_server.host_with_port}" }

  p.connect_src :self, :data, :blob, assets_host, media_host, Rails.configuration.x.streaming_api_base_url, *webpacker_urls

  p.script_src  :self, :unsafe_inline, :unsafe_eval, assets_host, host_to_url("cdn.jsdelivr.net")
  # this one worked for me                                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  p.child_src   :self, :blob, assets_host
  p.worker_src  :self, :blob, assets_host
else
  p.connect_src :self, :data, :blob, assets_host, media_host, Rails.configuration.x.streaming_api_base_url

  p.script_src  :self, assets_host, "'wasm-unsafe-eval'", host_to_url("cdn.jsdelivr.net")
  # this one should work for you                          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  p.child_src   :self, :blob, assets_host
  p.worker_src  :self, :blob, assets_host
end

主页是explore，如果你点击它在网络选项卡，你可以看到响应标题：

# just showing the relevant part
Content-Security-Policy:
# this is present only in development, that means no inline scripts in production
#                   vvvvvvvvvvvvvvv
  script-src 'self' 'unsafe-inline' 'unsafe-eval' http://mastodon.local http://cdn.jsdelivr.net;
# ^^^^^^^^^^                                                            ^^^^^^^^^^^^^^^^^^^^^^^

• 一个月一次 *
• 一对一 *

链轮

将 * jquery * 下载到vendor/assets/javascripts/jquery.js并添加它以进行预编译：

# config/initializers/assets.rb

Rails.application.config.assets.precompile += ["jquery.js"]

现在，您无需再对CSP进行干预：

# app/views/layouts/application.html.haml

= javascript_include_tag "jquery"