在 Mastodon 中将 jQuery 添加到 Rails 6

成功地让乳齿象在开发模式下流浪运行，但在生产中应该是一样的，你只需预编译并重新启动即可.

Webpack

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

Add it to plugins:
https://github.com/mastodon/mastodon/blob/v4.0.2/config/webpack/shared.js#L69

// config/webpack/shared.js

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

100

这意味着您的模块中会自动包含$和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…

如果需要，您可以try 将jquery添加到Window:

// 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政策，它将在生产中失败，所以没有内联脚本.

CDN

# 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:

100

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

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;
# ^^^^^^^^^^                                                            ^^^^^^^^^^^^^^^^^^^^^^^

https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
https://api.rubyonrails.org/classes/ActionDispatch/ContentSecurityPolicy.html

链轮

下载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"

在生产中

To double check, nginx.conf should be configured to serve assets from public/assets:
https://github.com/mastodon/mastodon/blob/v4.0.2/dist/nginx.conf#L67

Logger is set to STDOUT:
https://github.com/mastodon/mastodon/blob/v4.0.2/config/environments/production.rb#L26

根据系统和配置值的不同，查找日志(log)是GoFish的任务.它说的第一件事是journalctl -u mastodon-web来查看日志(log):

root@mastodon:~$ journalctl -u mastodon-web
No journal files were found.
-- No entries --

# nothing ever works the first time

root@mastodon:~$ systemctl restart systemd-journald
root@mastodon:~$ systemctl restart mastodon-web.service
root@mastodon:~$ journalctl -f -u mastodon-web
-- Logs begin at Mon 2023-02-06 11:01:52 UTC. --
Feb 06 11:05:29 mastodon systemd[1]: Started mastodon-web.
Feb 06 11:05:30 mastodon bundle[10473]: [10473] Puma starting in cluster mode...
Feb 06 11:05:30 mastodon bundle[10473]: [10473] * Puma version: 5.6.5 (ruby 3.0.4-p208) ("Birdie's Version")
# ...
# refresh the page after puma boots all the way, you should get something here

# in case that ^ didn't help, try this:
tail -f /var/log/syslog

我将需要查看您将进一步帮助的错误.

mastodon@mastodon:~/live$ RAILS_ENV=production bin/rails assets:precompile
yarn install v1.22.19
Done in 2.50s.
INFO -- : Writing /home/mastodon/live/public/assets/jquery-6c97f936439a920f7055f372924fa39fb6acaec5a89af8467f0847ebdbe047ee.js
INFO -- : Writing /home/mastodon/live/public/assets/jquery-6c97f936439a920f7055f372924fa39fb6acaec5a89af8467f0847ebdbe047ee.js.gz

root@mastodon:~$ systemctl restart mastodon-web.service

# journalctl -f -u mastodon-web

method=GET path=/explore format=html controller=HomeController action=index status=200 duration=424.95 view=364.50 db=40.52
                                                                            ^^^^^^^^^^

# tail -f /var/log/nginx/access.log

"GET /assets/jquery-6c9...47ee.js HTTP/2.0" 200 31123
             ^^^^^^                         ^^^