1.7 用Webpacker给Rails项目添加React

问题

Rails框架在交互式JavaScript应用程序开始流行之前就被创建出来了。Rails遵循一种更为传统的Web应用程序开发模型，它在服务器上生成HTML页面以响应浏览器请求。但有时你可能想要在Rails应用程序中包含更多的交互元素。

解决方案

你可以使用Webpacker库将React应用程序插入Rails生成的网页中。我们先来生成一个包含Webpacker的Rails应用程序，看看它是如何工作的：

这个命令将在 my-app 目录中创建一个Rails应用程序，该目录已经预先做了运行Webpacker服务器的配置。在启动应用程序之前，我们先生成一个示例页面（controller）：

这个命令会在 app/views/example/index.html.erb 中生成这样的模板页面：

接下来，我们创建一个简单的React应用程序，用来插入这个页面。Rails把Webpacker程序以包的形式插入进来，其中包（pack）是指Rails中的小型JavaScript代码包（bundle）。我们将在 app/javascript/packs/counter.js 中创建一个包含简单计数器组件的新包：

每当用户单击按钮时，该应用程序就会更新计数器。

我们现在可以通过向模板页面添加一行代码来将这个包插入网页中：

最后，我们可以在端口3000上运行Rails服务器：

在编写本书时，启动Rails服务器要求你安装yarn包管理器。你可以使用npm install-g yarn来全局安装yarn。

你可以在浏览器中打开 http://localhost:3000/example/index.html 页面，如图1-9所示。

讨论

你可能已经猜到了，Webpacker在后台使用Webpack来转译代码，你可以用 app/config/webpacker.yml 配置文件来配置它。

Webpacker是和Rails一起使用的。如果Rails应用程序需要一些额外的交互功能，那么可以考虑使用它。

你可以在Webpacker GitHub网站（ https://oreil.ly/aYZ0h ）上找到更多关于Webpacker的信息。

你可以从GitHub网站（ https://oreil.ly/H3q1F ）下载本解决方案的源代码。 JV9InJtsPcieplPtzZWeUPoIE41vNtFxkDAPWXu5W1fDW84CrAaFzIMJKm6bC2Fq