如何在现有的 Rails 5.0.2 应用程序上使用 Webpacker for React？

IT技术 ruby-on-rails reactjs webpacker
2021-05-10 02:36:54

我有一个现有的 rails 5.0.2 应用程序，并且想在一些页面中添加一个 React（带有 Redux）应用程序

找到了 webpacker gem，但是在为 React 设置 webpacker 安装时遇到了这个问题：

$ bundle exec rails webpacker:install:react
Configuration config/webpacker.yml file not found. 
Make sure webpacker:install is run successfully before running dependent tasks

这是我在 Gemfile 中安装 gem 的方式：

gem 'webpacker', '~> 3.2'

这就是我调用安装的方式：

$ bundle exec rails webpacker:install:react

这是我得到的回应：

Configuration config/webpacker.yml file not found. 
Make sure webpacker:install is run successfully before running dependent tasks

Gemfile 片段：

ruby '2.3.4'
gem 'rails', '~> 5.0.2'
gem 'webpacker', '~> 3.2'
1个回答

更新：

尝试运行：

bundle exec rails webpacker:install

接着：

bundle exec rails webpacker:install:react

旧解决方案：

显而易见的解决方案是将 config/webpacker.yml 文件从这里手动复制到 config/webpacker.yml：

curl -o config/webpacker.yml https://raw.githubusercontent.com/rails/webpacker/master/lib/install/config/webpacker.yml

然后 ：

 bundle exec rails webpacker:install:react

要得到：

 Webpacker is installed 🎉 🍰
 Using config/webpacker.yml file for setting up webpack paths
 Copying .babelrc to app root directory
  create  .babelrc
 Copying react example entry file to app/javascript/packs
  create  app/javascript/packs/hello_react.jsx
 Updating webpack paths to include .jsx file extension
  insert  config/webpacker.yml
 Installing all react dependencies
     run  yarn add react react-dom babel-preset-react prop-types from "."
 yarn add v1.3.2
 info No lockfile found.
 [1/4] 🔍  Resolving packages...
 [2/4] 🚚  Fetching packages...
 [3/4] 🔗  Linking dependencies...
 [4/4] 📃  Building fresh packages...
 success Saved lockfile.
 success Saved 34 new dependencies.
 ├─ asap@2.0.6
 ├─ babel-helper-builder-react-jsx@6.26.0
 ├─ babel-plugin-syntax-flow@6.18.0
 ├─ babel-plugin-syntax-jsx@6.18.0
 ├─ babel-plugin-transform-flow-strip-types@6.22.0
 ├─ babel-plugin-transform-react-display-name@6.25.0
 ├─ babel-plugin-transform-react-jsx-self@6.22.0
 ├─ babel-plugin-transform-react-jsx-source@6.22.0
 ├─ babel-plugin-transform-react-jsx@6.24.1
 ├─ babel-preset-flow@6.23.0
 ├─ babel-preset-react@6.24.1
 ├─ babel-runtime@6.26.0
 ├─ babel-types@6.26.0
 ├─ core-js@1.2.7
 ├─ encoding@0.1.12
 ├─ esutils@2.0.2
 ├─ fbjs@0.8.16
 ├─ iconv-lite@0.4.19
 ├─ is-stream@1.1.0
 ├─ isomorphic-fetch@2.2.1
 ├─ js-tokens@3.0.2
 ├─ lodash@4.17.5
 ├─ loose-envify@1.3.1
 ├─ node-fetch@1.7.3
 ├─ object-assign@4.1.1
 ├─ promise@7.3.1
 ├─ prop-types@15.6.1
 ├─ react-dom@16.2.0
 ├─ react@16.2.0
 ├─ regenerator-runtime@0.11.1
 ├─ setimmediate@1.0.5
 ├─ to-fast-properties@1.0.3
 ├─ ua-parser-js@0.7.17
 └─ whatwg-fetch@2.0.3
 ✨  Done in 2.77s.
 Webpacker now supports react.js 🎉
其它你可能感兴趣的问题
上一篇onChange 函数 console.log 是一个字符短 下一篇渲染在有条件的 for 循环中做出react