Webpacker退役后搭建React前端Rails应用的配置问题咨询

已经跑通单组件渲染的前提下，按下面步骤调整就能对齐标准React项目的开发结构，不需要额外复杂配置： #

1. 目录结构对齐 #

jsbundling-rails安装完React依赖后，默认入口在app/javascript/application.js，直接在同目录下建components文件夹存储所有React组件即可，和普通React项目的组件组织逻辑一致：

• 新建app/javascript/components/App.jsx作为应用根组件，全局路由、全局状态Provider、全局布局都放在这个组件里
• 其余业务组件按模块分文件夹放在components目录下即可，比如components/user/存用户相关组件、components/common/存通用按钮、弹窗这类公共组件

2. 入口文件配置 #

修改app/javascript/application.js，替换掉单组件演示的渲染逻辑，换成React 18标准的根节点挂载写法：

// 没装react/react-dom依赖的话先在项目根目录执行 yarn add react react-dom
import React from 'react'
import { createRoot } from 'react-dom/client'
import App from './components/App'

const mountNode = document.getElementById('root')
// 加节点判断，避免没有挂载点的页面跑JS时报错
if (mountNode) {
  const root = createRoot(mountNode)
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  )
}

3. 根组件App.jsx编写 #

这个组件和标准Create-React-App生成的App组件逻辑完全一致，全局依赖、全局样式、路由出口都在这里配置，最基础的示例如下：

import React from 'react'
// 要加前端路由就安装react-router-dom后，在这里引入路由组件包裹内容
// 要用Redux、Context等全局状态，也在这里包对应的Provider
// 全局CSS可以放在app/javascript/styles目录下，直接在这里引入即可生效

export default function App() {
  return (
    <div className="app-wrapper">
      {/* 全局导航、侧边栏、路由出口这类全局内容都写在这里 */}
      {/* 业务组件正常往里面嵌套就行 */}
    </div>
  )
}

4. Rails端配套调整 #

• 确认app/views/layouts/application.html.erb的body标签末尾有挂载节点和JS引入标签：

<!-- 其他布局内容 -->
<div id="root"></div>
<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>

• 如果要做纯前端路由的单页应用，在config/routes.rb里加兜底路由，把所有HTML格式的非接口请求都指向渲染挂载节点的页面：

Rails.application.routes.draw do
  # 接口路由、非React的后台页面路由写在前面
  get '*path', to: 'pages#index', constraints: ->(req) { !req.xhr? && req.format.html? }
end

对应app/views/pages/index.html.erb留空即可，会自动套用application布局加载React应用。

5. 开发环境注意事项 #

• 本地开发直接跑bin/dev即可，会自动读取Procfile.dev的配置，同时启动Rails服务和esbuild监听编译进程，不用手动开两个终端
• React组件里要用的图片、静态资源直接放app/assets/images目录下即可，jsbundling-rails默认配置已经处理了资源路径编译，不需要额外加loader
• 需要自定义esbuild编译规则的话，直接修改根目录下的esbuild.config.js就行，不需要像之前webpacker那样写复杂的配置文件

内容的提问来源于stack exchange，提问作者user5505199