Rails 6中使用Webpacker集成现有React-Redux项目的困惑求助

前提说明 #

你已完成独立可运行的 React-Redux TodoList 前端项目，现在需要将其迁移到 Rails 6，利用默认的 Webpacker 完成打包与页面渲染，且已配置好 /api/todos 的 JSON 接口路由。以下是分步操作指南：

1. 确认 Rails 6 的 Webpacker React 环境 #

Rails 6 默认集成 Webpacker，但需确保 React 相关依赖已配置：

rails webpacker:install:react

此命令会自动配置 Babel、React 加载器等核心依赖，无需手动编写独立的 webpack.config.js。

2. 迁移前端文件到 Rails 目录 #

Rails Webpacker 的前端代码默认存放于 app/javascript 下，按以下结构迁移你的文件：

1. 在 app/javascript 下新建 src 文件夹
2. 将原 frontend 目录下的所有内容（actions、components、reducers、store、todo_redux.jsx）复制到 app/javascript/src 中，保持原有层级结构：

app/javascript/src
├── actions
│   ├── step_actions.js
│   └── todo_actions.js
├── components
│   ├── App.jsx
│   ├── root.jsx
│   ├── steps
│   └── todos
├── reducers
│   ├── root_reducer.js
│   ├── selectors.js
│   ├── steps_reducer.js
│   └── todos_reducer.js
├── store
│   └── store.js
└── todo_redux.jsx

3. 配置 Webpacker 入口 #

Rails Webpacker 默认入口为 app/javascript/packs/application.js，直接在此文件中引入你的 React 入口文件：

// app/javascript/packs/application.js
import '../src/todo_redux.jsx'

4. 调整代码导入路径 #

保持原有相对导入路径即可（如 ./components/App.jsx），只要文件层级与原项目一致，无需额外修改。若出现路径错误，检查每个 import 语句的层级是否匹配当前文件位置。

5. 在 Rails 视图中挂载 React 应用 #

1. 创建首页控制器与视图：

rails generate controller Home index

2. 设置根路由（config/routes.rb）：

root 'home#index'

3. 在首页视图中添加 React 挂载节点与 Webpacker 打包标签（app/views/home/index.html.erb）：

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<div id="root"></div>

确保你的 root.jsx 中是挂载到 #root 节点：

// app/javascript/src/components/root.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

6. 适配 API 请求路径 #

由于前端与后端同域名，直接使用相对路径请求 API 即可，无需跨域配置。例如在 todo_actions.js 中：

export const fetchTodos = () => {
  return fetch('/api/todos')
    .then(res => res.json())
    .then(todos => ({ type: 'FETCH_TODOS', payload: todos }));
};

7. 启动项目测试 #

1. 启动 Rails 服务器：

rails s

2. 若 Webpacker 未自动启动，手动启动开发服务器：

bin/webpack-dev-server

3. 访问 http://localhost:3000，即可看到 React-Redux 应用加载并请求 API 数据。

常见问题排错 #

• 文件找不到错误：检查所有 import 语句的相对路径，确保层级匹配；确认文件未遗漏或目录名拼写错误。
• Babel 编译错误：重新执行 rails webpacker:install:react 恢复默认 Babel 配置，避免手动修改 webpack 相关文件。
• React 挂载失败：检查视图中是否存在 id="root" 的 DOM 节点，确认 root.jsx 中的挂载目标正确。

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