Javascript 文件未在 Rails 开发中更新答案

【问题标题】：Javascript files not updated in development with RailsJavascript 文件未在 Rails 开发中更新
【发布时间】：2021-04-20 14:04:28
【问题描述】：

我从事 Rails 项目，使用 Webpack 捆绑资产。每次对 JS 或 CSS 进行更改时，我都会运行 docker-compose exec web bundle exec rake assets:precompile; 来编译所有资产。

之后，我必须重新启动 docker 容器，然后运行 docker-compose exec web bundle exec npm run dev;

只有在那之后，我才能看到变化，并且最多可能需要 10 分钟。我错过了什么？如何加快开发过程？

我的 docker-compose.yml：

 version: '2'
services:
  chromedriver:
    image: selenium/standalone-chrome-debug
    volumes:
      # use hosts shared memory to prevent crashes
      # https://github.com/SeleniumHQ/docker-selenium
      - /dev/shm:/dev/shm



  postgres:
    image: postgis/postgis:12-3.0
    volumes:
      - ./bin/docker/postgres/init-test-db.sh:/docker-entrypoint-initdb.d/init-test-db.sh
      - .:/project
    logging:
      driver: "json-file"
      options:
        max-size: "10k"
        max-file: "1"

redis:
        image: redis:5.0.5
        logging:
          driver: "json-file"
          options:
            max-size: "10k"
            max-file: "1"
  worker:
    build: .
    volumes:
      - .:/usr/src/app
      - bundle-cache:/usr/local/bundle
    command: bundle exec sidekiq
    logging:
      driver: "json-file"
      options:
        max-size: "100k"
        max-file: "1"

  web:
    tty: true
    stdin_open: true
    build: .
    volumes:
      - .:/usr/src/app
      - bundle-cache:/usr/local/bundle
    logging:
      driver: "json-file"
      options:
        max-size: "10k"
        max-file: "1"

volumes:
  bundle-cache:

【问题讨论】：

我对 docker 没有太多经验，但是没有它，我运行命令 bin/webpack-dev-server 来启动一个服务器，它可以监视 js 或 css 的变化，重新编译它们，然后重新加载页面跨度>
请分享您的docker-compose.yml 文件以帮助了解您的背景

标签： ruby-on-rails docker webpack

【解决方案1】：

当您使用 docker-compose 时，使用 volumes 来更改计算机中的文件以及使用 docker-compose up 开始您的 compose 非常有用。

在开发阶段重建资产看起来很奇怪。难道不能绕过这一步吗？我不了解 Rails，但在 python Django 中，可以“收集静态”仅用于生产。

【讨论】：

【解决方案2】：

本质上，有一个与 Docker 无关的问题：如果您的应用配置正确，您就不需要手动编译资产——永远！即使你必须这样做，10 分钟听起来也太多了。

所以你应该做的第一件事是确保以下几点：

您的应用程序是否在development 环境中运行（= Rails.env 是否返回development）？如果没有，请尝试设置RAILS_ENV=development - 例如，这可以在docker-compose.yml 的environment 设置中完成（或者如果您使用的是dotenv-rails gem，则可以在.env.development 文件中）。
是否在development 环境中启用了临时资产编译？默认情况下，应该是这种情况，但您可能不小心/故意更改了它。检查config/environments/development.rb 是否不包含config.assets.compile = false（或者，通常检查Rails.application.config.assets.compile，甚至可能检查整个Rails.application.config.assets 设置）。
最后但并非最不重要的一点是，如上所述，10 分钟对于资产编译来说似乎是一个很长的时间。我只记得有一次这么长的资产编译时间——这是在一个 Rails 3 应用程序上，它在一个免费的 Heroku 实例上包含来自 rails-assets.org 的数十个 gem（= 通常超级慢）。因此，请考虑检查您是否在资产编译步骤中加载了太多不需要的东西和/或库。根据我的经验，一个非常常见的违规者是 moment.js 库，它非常庞大，并且通常只为非常有限的功能加载，通常可以用 date-fns 或 js-joda 等更简单的库替换。

我很乐意进一步调查并提供更多见解，但我认为为此您必须分享更多内容（例如您的 Gemfile 和环境配置）。

对于 Docker，当使用资产管道（或更新的 Rails 版本的 webpack 集成）时，我建议将编译后的资产放入卷中，以便有效地缓存它们。可以这样做：

# in the `web` service:
volumes:
  # for asset pipeline
  - assets:/usr/src/app/public/assets
  # for webpacker
  - packs:/usr/src/app/public/packs
  - packs-test:/usr/src/app/public/packs-test

【讨论】：

【解决方案3】：

既然有webpack，为什么不用webpack来编译呢？

bundle exec rails webpacker:compile

您还可以为您的 webpack 添加speed-measure-webpack-plugin 以查看在编译上花费的时间的详细信息

在你的config/webpack/development.js

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const smp = new SpeedMeasurePlugin()

module.exports = smp.wrap(environment.toWebpackConfig())

最后在你的 application.html.erb 确保使用 <%= javascript_pack_tag 'application' %>链接webpack编译好的js

另外你应该使用 rails 来查看 webpack 开发服务器，这样你就不需要每次进行更改时都重新启动

【讨论】：