在 Rails 中使用 Webpacker 配置 ReactJS

Source: Dev.to

前置条件

• Ruby 2.5.1 或更高版本
• Rails 5.2.1 或更高版本
• Webpacker 3.5.5 或更高版本

使用 Webpacker 创建新的 Rails 应用

rails new rails-with-reactjs --skip-test --webpack

该命令会创建应用并设置 Webpacker，同时跳过测试结构。

通过 Webpacker 安装 React

bundle exec rails webpacker:install:react

此命令：

• 在项目根目录添加 Babel 配置。
• 在 app/javascript/packs/hello_react.jsx 创建示例 pack。
• 更新 Webpacker 以解析 .jsx 文件。
• 安装所有必需的 React 依赖。

生成的 hello_react.jsx 会直接将组件注入到 “ 中。
通常更好的做法是将组件组织在专用文件夹中，并使用 react-rails 挂载它们。

添加 react-rails gem

在 Gemfile 中添加该 gem：

gem 'react-rails'

然后运行：

bundle install

安装 react-rails 使用的 JavaScript 驱动：

yarn add react_ujs

react_ujs 会扫描页面并使用 data-react-class 与 data-react-props 挂载组件。

组织 React 组件

为组件创建文件夹并添加一个简单组件：

mkdir -p app/javascript/components
touch app/javascript/components/hello_world.jsx

app/javascript/components/hello_world.jsx

import React, { Component } from 'react';

export default class HelloWorld extends Component {
  render() {
    return 
## Hello World
;
  }
}

使用 react-rails 注册组件

编辑 app/javascript/packs/application.js，在文件末尾添加：

// app/javascript/packs/application.js
const componentRequireContext = require.context('components', true);
const ReactRailsUJS = require('react_ujs');
ReactRailsUJS.useContext(componentRequireContext);

更新布局

在 app/views/layouts/application.html.erb 中，用 Webpacker pack 标签替换默认的 asset‑pipeline JavaScript 标签：

创建控制器和路由

生成一个用于静态页面的简单控制器：

rails g controller pages index --no-helper --no-assets --no-controller-specs --no-view-specs

更新 config/routes.rb：

# config/routes.rb
root 'pages#index'

在视图中渲染 React 组件

在 app/views/pages/index.html.erb 中：

运行应用

启动 Rails 服务器：

rails s

在另一个终端启动 Webpack 开发服务器以实现实时编译：

bin/webpack-dev-server

访问 http://localhost:3000 —— 你应该能看到由 React 渲染的 Hello World。

参考资料

• GitHub 示例仓库
• 官方 Rails/Webpacker 文档
• react-rails gem 文档