ActiveAdmin 可以加载 webpack 打包的 javascript 吗? - Rails 5.1

Can ActiveAdmin load javascript bundled by webpack? - Rails 5.1

我已经从rails4.2.6升级到rails5.1,然后开始使用webpack
使用 webpack 的所有设置都已完成,但我无法弄清楚如何在 ActiveAdmin 页面上加载 javascript 文件。
ActiveAdmin 默认加载 app/assets/javascripts/active_admin.js.coffee
有没有办法在 ActiveAdmin 页面上加载由 webpack 捆绑的 javascript 文件?

Webpack 尚未得到官方支持。我们现在使用的方法是猴子补丁 ActiveAdmin::Views::Header 来包含标签来加载 Webpack 生成的输出,例如

class ActiveAdmin::Views::Header < Component
  def build(namespace, menu)
    ...
    render "application/custom_header_tags"
  end
end

在我们的例子中,我们的 custom_header_tags.erb 使用 React On Rails 但替换为您喜欢的任何集成。

我来晚了一点,但我相信包装方法比完全覆盖 class 更好。此外,猴子修补 Header 将导致标签在 div 和 id="header" 中呈现。为了在 <head /> 中呈现它们,我做了以下操作:

ActiveAdmin::Views::Pages::Base.class_eval do
  alias_method :original_build_active_admin_head, :build_active_admin_head

  def build_active_admin_head(*args, &block)
    original_build_active_admin_head(*args, &block)
    within @head do render '/custom_headers' end
  end
end

把这个文件放到config/initializers(这样就不会在开发模式下每次都重新加载导致无限循环)文件夹,然后根据需要创建一个app/views/_custom_headers.html.erb文件。

#build_active_admin_head 的方法签名继续发展。从 ActiveAdmin v1.3.1 开始,它不再接受参数。

此外,除了其他答案中描述的方法别名和组件覆盖方法之外,还有一种用于猴子修补 ActiveAdmin 的附加方法:module#prepend.

以下是我如何覆盖 ActiveAdmin 主体布局(在我的暂存环境中在页面上抛出一个大 "staging" 横幅)和头部布局(添加对 webpacker 的 javascript_pack_tag 的调用):

module AdminPageLayoutOverride
  def build_page(*args)
    within @body do
      render "layouts/global/environment_banner"
    end

    super
  end

  def build_active_admin_head
    super

    within @head do
      render "admin/custom_script_tags"
    end
  end
end

ActiveAdmin::Views::Pages::Base.send :prepend, AdminPageLayoutOverride

对于从 Rails 6.0 开始的新应用,Webpacker 已成为默认的资产生成器。您也可以通过在安装时或手动更新您的配置以打开 use_webpacker 选项来选择将 Webpacker 用于 ActiveAdmin 资产。

在 active_admin 安装:

rails g active_admin:install --use_webpacker

手动添加到config/initializers/active_admin.rb

ActiveAdmin.setup do |config|
  config.use_webpacker = true
end

和运行 生成器以获取默认的 Active Admin 资产:

rails g active_admin:webpacker