将 webpacker 与 Rails 引擎结合使用

Question

我正在按照本教程使用 Rails 引擎的 webpacker：

\n

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

\n

它是基于这样的：

\n

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

\n

教程和 github 文档内容非常丰富，但我无法让我的主机应用程序包含来自引擎的 javascript。我已在本地克隆了教程中的存储库（saddlebag 是引擎的存储库，saddlebag-dummy 是主机应用程序）：

\n

https://github.com/bvandgrift/saddlebag

\n

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

\n

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

\n

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

\n

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

\n

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

\n

以下是manifest.json 文件的内容：

\n

{\n  "application.js": "/packs/js/application-cb05ac1ef9258bc6a611.js",\n  "application.js.map": "/packs/js/application-cb05ac1ef9258bc6a611.js.map",\n  "entrypoints": {\n    "application": {\n      "js": [\n        "/packs/js/application-cb05ac1ef9258bc6a611.js"\n      ],\n      "js.map": [\n        "/packs/js/application-cb05ac1ef9258bc6a611.js.map"\n      ]\n    }\n  }\n}\n

\n

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

\n

尝试访问计数器页面时，我得到以下信息：

\n

\n

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

\n

\n
1. 您希望针对您的环境将 webpacker.yml 的compile 值设置为 true\n除非您正在使用webpack -wwebpack-dev-server。
\n
2. webpack 尚未重新运行以反映更新。
\n
3. 您错误配置了 Webpacker 的 config/webpacker.yml 文件。
\n
4. 您的 webpack 配置未创建清单。\n您的清单包含：\n{\n}
\n

\n

\n

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

\n

\xe2\x9d\xaf\xe2\x9d\xaf\xe2\x9d\xaf rake saddlebag:webpacker:compile\nrake aborted!\nDon\'t know how to build task \'saddlebag:webpacker:compile\' (See the list of available tasks with `rake --tasks`)\n

\n

rake 任务根本不会出现在rake --tasks：

\n

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

\n

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

\n

Answer 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