为什么 `npm 运行 bundle -- -p` (webpack -p) 不为我的 rails 应用程序编译资产？

Question

我 fork 这个 rails 项目（https://github.com/DMPRoadmap/roadmap) and try to set it up following its installation guide

按照安装指南操作时：

1) 在步骤之前：npm run bundle，网站没有正确显示其图像和布局

2) 在步骤 npm run bundle 之后，网站正确显示其图像和布局

3) 在后台，npm run bundle 将启动 webpack。我在 npm run bundle 后按 CTRL + C 关闭了 webpack，网站仍然正确显示图像和布局。

4) 我运行 npm run bundle -- -p 应该等于 webpack -p，网站不再正确显示图像和布局。

为什么 npm run bundle -- -p（即 webpack -p）没有正确编译资产？我认为它是 npm run bundle 的守护程序版本（即 webpack）并且守护程序在后台表示运行ning（我认为守护程序与服务相同？）？

如果我对这个概念的理解不正确或在任何地方使用不正确的术语，请纠正我。

谢谢！

Answer 1

回答我自己的问题：

1) Before the step: npm run bundle, the website doesn't show its image and layout properly

资产（图像和 css 样式表的布局）尚未编译，因此 Rails 无法使用它，因此布局不正确，图像也不会显示。

您可以在此项目中使用npm run bundle为开发环境编译资源。

2) After the step npm run bundle, the website shows its image and layout properly

见上文。

3) Under the hood, npm run bundle will start webpack. I close the webpack by pressing CTRL + C after npm run bundle, and the website is still showing image and layout properly.

我认为 webpack (npm run bundle) 就像一个服务器，服务于他们需要的 rails 服务器资产，但实际上这不是真的。

webpack 只编译供 rails 使用的资源。 webpack 在运行 npm run bundle 之后保持运行ning 的原因是因为它不断检测对这些资产文件源的更改，因此对这些资产文件源的任何更改都会当您在网站上发出浏览器刷新时会立即反映出来。

4) I run npm run bundle -- -p which should be equal to webpack -p, and the website does not display the images and layout properly anymore. Why is npm run bundle -- -p (which is webpack -p) not compiling the asset properly?

npm run bundle -- -p 在这种情况下确实等于 webpack -p。

要了解为什么网站不再正确显示图像和布局，让我们先看一些东西。当我运行 npm run bundle -- p 发生以下情况时：

modified:   config/initializers/fingerprint.rb

deleted:    public/javascripts/application.js
deleted:    public/javascripts/vendor.js
deleted:    public/stylesheets/application.css

added:      public/javascripts/application-2f49ec37563f77c91204.js
added:      public/javascripts/vendor-2f49ec37563f77c91204.js
added:      public/stylesheets/application-2f49ec37563f77c91204.css

npm run bundle -- -p 将为生产环境编译资产，并将在其输出中添加指纹（在本例中为 -2f49ec37563f77c91204）。

深入研究代码，我们可以看到 app/views/layouts/application.html.erb 具有以下代码：

<%= stylesheet_link_tag fingerprinted_asset('application') %>
<%= javascript_include_tag fingerprinted_asset('vendor') %>
<%= javascript_include_tag fingerprinted_asset('application') %>

查看app/helpers/application_helper.rb中的fingerprinted_asset()方法，我们可以看到：

  def fingerprinted_asset(name)
    Rails.env.production? ? "#{name}-#{ASSET_FINGERPRINT}" : name
  end

我们可以看到，在生产环境中，我们将使用名称中带有指纹的文件，而在非生产环境中，我们将使用名称中不带指纹的文件。

在这种情况下，我运行ning rails server 在开发环境中，因此我的应用程序尝试查找名称中没有指纹的文件。这意味着这些：

public/javascripts/application.js
public/javascripts/vendor.js
public/stylesheets/application.css

但我使用 npm run bundle -- -p，它删除了上述文件并生成了它们的指纹版本，所以 rails 无法找到它，因此没有显示图像并且向我显示不正确的布局。

I thought it is the daemon version of npm run bundle (which is webpack) and daemon means running in background (I thought daemon is the same as service?)?

它不是 npm run bundle 的守护程序版本。我认为这是 npm run bundle 的守护程序版本，因为他们的 wiki 曾经这么说，但这是错误的，请参阅 https://github.com/DMPRoadmap/roadmap/issues/1782。

为什么 `npm 运行 bundle -- -p` (webpack -p) 不为我的 rails 应用程序编译资产？

Why doesn't `npm run bundle -- -p` (webpack -p) compile the asset for my rails app?

service

daemon

ruby-on-rails

npm

webpack