使用带有 Rails 引擎的 webpacker

Posted

技术标签:

【中文标题】使用带有 Rails 引擎的 webpacker【英文标题】:Using webpacker with a Rails engine 【发布时间】:2021-07-26 07:38:44 【问题描述】:

我正在按照本教程:

http://ben.vandgrift.com/posts/rails-engine-webpacker-1/

基于此:

https://github.com/rails/webpacker/blob/5-x-stable/docs/engines.md

教程和 github 文档提供了非常丰富的信息,但我无法让我的主机应用程序包含引擎中的 javascript。我已经在本地克隆了教程中的存储库(saddlebag 是引擎的存储库,saddlebag-dummy 是主机应用程序):

https://github.com/bvandgrift/saddlebag

https://github.com/bvandgrift/saddlebag-dummy

我所做的唯一修改是更新 mimemagic gem,因为该 gem 的指定版本已从 gem 源中提取。

-    mimemagic (0.3.5)
+    mimemagic (0.3.10)
+      nokogiri (~> 1)
+      rake

当我在主机应用程序目录中运行 rails webpacker:compile 时,它会生成以下内容:

Hash: 10b1522b0b9c4b8aca2d
Version: webpack 4.44.1
Time: 966ms
Built at: 05/03/2021 2:48:22 PM
                                        Asset       Size  Chunks                         Chunk Names
       js/application-cb05ac1ef9258bc6a611.js   52.7 KiB       0  [emitted] [immutable]  application
    js/application-cb05ac1ef9258bc6a611.js.br   11.3 KiB          [emitted]
    js/application-cb05ac1ef9258bc6a611.js.gz   12.8 KiB          [emitted]
   js/application-cb05ac1ef9258bc6a611.js.map    145 KiB       0  [emitted] [dev]        application
js/application-cb05ac1ef9258bc6a611.js.map.br   31.9 KiB          [emitted]
js/application-cb05ac1ef9258bc6a611.js.map.gz   36.7 KiB          [emitted]
                            manifest.json  364 bytes          [emitted]
                         manifest.json.br  127 bytes          [emitted]
                         manifest.json.gz  142 bytes          [emitted]
Entrypoint application = js/application-cb05ac1ef9258bc6a611.js js/application-cb05ac1ef9258bc6a611.js.map
[0] (webpack)/buildin/module.js 552 bytes 0 [built]
[1] ./app/javascript/packs/application.js 682 bytes 0 [built]
    + 2 hidden modules

这里是 manifest.json 文件的内容:


  "application.js": "/packs/js/application-cb05ac1ef9258bc6a611.js",
  "application.js.map": "/packs/js/application-cb05ac1ef9258bc6a611.js.map",
  "entrypoints": 
    "application": 
      "js": [
        "/packs/js/application-cb05ac1ef9258bc6a611.js"
      ],
      "js.map": [
        "/packs/js/application-cb05ac1ef9258bc6a611.js.map"
      ]
    
  

看起来 webpacker 正在运行,但不包括引擎中的 javascript。

尝试点击计数器页面我得到以下信息:

Webpacker 在 > /Users/fredwillmore/OtherDocuments/rails_projects/saddlebag/public/saddlebag-packs/manifest.json 中找不到 counter.js。可能的原因:

    您想为您的环境将 compile 的 webpacker.yml 值设置为 true 除非你使用 webpack -w 或 webpack-dev-server。 webpack 尚未重新运行以反映更新。 您错误配置了 Webpacker 的 config/webpacker.yml 文件。 您的 webpack 配置未创建清单。 您的清单包含:

好的,没错,我在引擎中的清单文件是空的。所以我想我需要编译/webpack/处理引擎中的javascript。现在尝试编译引擎代码。该引擎在 lib/tasks/saddlebag_tasks.rake 中定义了一个 rake 任务 saddlebag:webpacker:compile,但我无法运行它:

❯❯❯ rake saddlebag:webpacker:compile
rake aborted!
Don't know how to build task 'saddlebag:webpacker:compile' (See the list of available tasks with `rake --tasks`)

rake --tasks中根本没有出现rake任务:

❯❯❯ rake --tasks
rake build            # Build saddlebag-0.1.0.gem into the pkg directory
rake clean            # Remove any temporary products
rake clobber          # Remove any generated files
rake clobber_rdoc     # Remove RDoc html files
rake install          # Build and install saddlebag-0.1.0.gem into system gems
rake install:local    # Build and install saddlebag-0.1.0.gem into system gems without network access
rake rdoc             # Build RDoc HTML files
rake release[remote]  # Create tag v0.1.0 and build and push saddlebag-0.1.0.gem to rubygems.org
rake rerdoc           # Rebuild RDoc HTML files
rake stats            # Report code statistics (KLOCs, etc) from the application or engine

所以我的问题是:如何编译引擎中的 javascript 以在主机应用程序中使用?

【问题讨论】:

这是一个非常好的问题,值得关注。如果几天后没有回复,您可以发表评论并标记我,以便我可以悬赏吗? @max 这个问题仍未解决。我希望将来的 webpacker 版本可能无需付出太多努力就可以实现。我项目的资源限制要求我此时将精力集中在其他地方。 @FredWillmore 清理public 目录中的pack 目录,删除缓存(不必要),然后在启动rails 服务器之前通过终端bin/webpack-dev-server 中的以下命令启动web packer。这将更新清单文件,你可能会让它工作。 【参考方案1】:

我遇到了类似的问题。你需要在引擎上运行另一个 webpack 实例。

开发中bin/webpack-dev-server(如果不存在则添加)。

注意,在部署时,您还需要在引擎上运行 webpack,就像捆绑它一样。这是我与 Capistrano 3 一起使用的工作示例。

  set : your_engine_path, 'some/path/to/your_engine'

  task :install_engine do
    on roles(:app) do
      with rails_env: fetch(:rails_env) do
        within "#release_path/#fetch(:your_engine_path)" do
          execute :bundle, 'install --path vendor/bundle'
        end
      end
    end
  end

  namespace :webpacker do
    desc 'Install deps with yarn'
    task :yarn_install do
      on roles(:app) do
        within "#release_path/#fetch(: your_engine_path)" do
          execute 'yarn'
        end
      end
    end

    desc 'Compile JavaScript packs using webpack for production with digests'
    task :compile do
      on roles(:app), in: :sequence, wait: 5 do
        within release_path do
          with rails_env: fetch(:rails_env) do
            execute :bundle, 'exec rake your_engine:compile_assets'
          end
        end
      end
    end
    before :compile, :yarn_install
  end

【讨论】:

我能够在主机应用程序上启动服务器,但出现错误:Error: Cannot find module 'webpack-cli/bin/config-yargs'。我查看了有关该错误的帖子,但它们都与升级我的 webpack 版本有关。几分钟前我刚刚运行了 yarn,所以我认为升级依赖项没有任何可取之处。 webpack 和 webpack-dev-server 的 binstub 在主机和引擎之间是相同的。 你是在引擎目录还是在主目录运行yarn 在引擎目录中 - 我也在主应用程序目录中运行它;我能够使用rake webpacker:compile 编译所有 js,但看起来 yarn 在那里做同样的事情,所以我希望在引擎目录中获得一些运气 我想我要放弃这个项目了。我已经浪费了两天时间试图让这个教程运行起来,更不用说我的实际项目了,反正这不是迁移到 webpacker 的最佳选择。似乎要做的事情是将我引擎中的所有 javascript 放入一个 npm 包中,而不是尝试使用 webpacker 进行扭曲 我花了好几天才终于在一个引擎上安装了 webpack,只需要一个 Rails API 应用程序。它正在工作,但我不得不挖了很长时间。也许在您的问题上添加您webpack-dev-server 文件。我会把它和我的比较一下,以防我做了一个我现在不记得的更新。

以上是关于使用带有 Rails 引擎的 webpacker的主要内容,如果未能解决你的问题,请参考以下文章

使用 Rspec 测试 Rails 3.1 可安装引擎

Rails 4可安装引擎,找不到文件'jquery'

Rails引擎:命名空间多态URL

在 Rails 引擎中加载多个配置文件

Rails 2.0.2 中的 ApplicationController 方法不使用引擎覆盖插件方法

Rails 4 使用 Engine 中的 Factory Girl 工厂