JavaScript 与 Webpacker

我们正处在一个 JavaScript 的复兴时代——它不再只是语言极客们嗤之以鼻的对象。Rails 通过引入 Webpacker 这个 gem，拥抱了现代 JavaScript 技术，如 React。

作为 Rails 开发者，能够根据需要将这些技术整合到我们的应用中至关重要，因此我们的 Docker 环境必须为此提供支持。

本章我们将探讨在 Rails 开发中使用 JavaScript 的各种选项，并学习如何通过安装和配置 Webpacker，将 React 前端集成到我们的 Rails 应用中。完成本章后，基于 Docker 的开发环境将能良好地支持所有这些现代 JavaScript 的特性。

JavaScript 前端选项

在将 JavaScript 集成到 Rails 应用前端时，有多种选择。其中最大的一个抉择是：你的 Rails 应用是否负责提供前端内容。这两种方式都同样合理，各有优缺点，也会导致不同的部署架构。

如果你的 Rails 应用不提供前端内容，这意味着你正在将 Rails 用作 API 层。在这种情况下，你会拥有一个独立的前端，通常完全由 JavaScript 编写，无论是 React、Ember、Vue.js，还是其他技术。不过总体而言，这非常直接，你基本上只需运用已掌握的技能即可。

概览

以下是基本概要：

• 重命名你的 Web 服务。命名很重要。在此场景下，你的 Rails 应用实际上是 API 或后端，因此应如此命名。

• 为运行你的 JavaScript 前端应用创建自定义镜像。就像我们为运行 Rails 应用创建了自定义镜像一样，你也应为 JS 前端做同样的事。其 Dockerfile 可基于标准的 Node.js 镜像构建，再添加应用所需的特定设置。

• 在 docker-compose.yml 中创建一个独立的前端服务。这将是你的独立 JavaScript 应用程序。你可以通过环境变量来配置它所使用的 API 端点（即 Rails API 的域名和端口）。

另一方面，如果你使用 Rails 来提供前端内容，那就意味着利用 Rails 提供的功能。Rails 提供了两种服务 JavaScript 前端的方式：基于 Sprockets 的资产管道，以及在 Rails 5.1 中引入的新 Webpacker 方法。

传统的基于 Sprockets 的资产管道无需任何特殊设置即可开箱即用。在运行 Rails 服务器时，你的资源会自动编译并以标准的 Rails 方式在视图中提供。

而让 Rails 应用与 Webpacker 在 Docker 环境下协同工作则需要稍多一些设置。由于这是非常流行的方法，我们将引导你完成其配置过程。

使用 Webpacker 的 Rails JavaScript 前端

自 Rails 5.1 版本起，Rails 通过名为 webpacker 的 gem 提供了一种在应用中构建丰富 JavaScript 前端的能力。Webpacker 具有模块化架构，允许你集成不同的前端技术，无论是 React、Ember、Vue.js，甚至是 Elm。

以 React 为例，让我们看看如何在容器化的应用中配置 Webpacker。首先，Webpacker 要求安装 Yarn 和当前版本的 Node。这需要对我们的 Docker 镜像进行更新。

Dockerfile 修改

根据所需更改，更新我们的 Dockerfile：

1FROM ruby:2.7
2LABEL maintainer="you@example.com"
3# 允许 apt 使用基于 https 的源
4RUN apt-get update -yqq && apt-get install -yqq --no-install-recommends \
5   apt-transport-https
6# 确保安装最新版 Node
7RUN curl -sL https://deb.nodesource.com/setup_8.x | bash -
8# 确保 Yarn 使用最新包
9RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
10RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" | \
11   tee /etc/apt/sources.list.d/yarn.list
12# 安装包
13RUN apt-get update -yqq && apt-get install -yqq --no-install-recommends nodejs yarn
14COPY myapp/Gemfile* /usr/src/app/ 
15WORKDIR /usr/src/app
16RUN bundle install  
17COPY myapp /usr/src/app/ 
18CMD ["bin/rails", "s", "-b", "0.0.0.0"]

说明

• 为了安装最新版本的 Yarn，我们必须将 Yarn 的 Debian 包仓库添加到源列表中（第 8–10 行）。

• 但由于 Yarn 的包仓库使用 HTTPS，我们必须安装 apt-transport-https 包（第 4–5 行），以使其正常工作。

• 不幸的是，Yarn 与默认安装的旧版 Node.js 之间存在一个依赖问题 issue 。我们通过在 第 6–7 行 添加 Node 的包仓库来解决这个问题。这确保我们安装的是更新版本的 Node。

• 最后，在 第 12–13 行，我们将 yarn 添加到要安装的包列表中。现在，随着 yarn 和最新版 Node 的安装完成，我们已经准备好配置应用以使用 Webpacker。

如果我们最初就知道要使用 Webpacker，就可以通过 --webpack 选项包含支持，例如：

1$ rails new myapp --webpack=react <其他选项>

--webpack=react 选项会自动生成一个开箱即用的 React 支持的应用。然而，由于我们已经生成了应用，添加 Webpacker 支持需要手动执行几个步骤。

我们首先必须更新 Gemfile，以包含 Webpacker gem：

1gem 'webpacker', '~> 4.0'

然后通过重建镜像运行 bundle install：

1$ docker-compose build web

让我们停止 web 服务，因为它目前运行的是未安装 Webpacker gem 的旧版本：

1$ docker-compose stop web

现在我们可以使用以下命令在应用中安装 Webpacker 和 React 集成：

1$ docker-compose run web bin/rails webpacker:install
2$ docker-compose run web bin/rails webpacker:install:react

这样，我们的应用就已配置好用于 Webpacker 和 React。然而，在真正完成之前，我们需要一种方式来自动编译我们的 React 资产。