How to use Webpacker for React on an existing Rails 5.0.2 application?

问题

I have an existing rails 5.0.2 app and want to add a React (with Redux) application to a few of the pages

Found webpacker gem but am experiencing this problem when setting up the webpacker install for React :

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

This is how I installed the gem in the Gemfile:

gem 'webpacker', '~> 3.2'

This is how I invoked the install:

$ bundle exec rails webpacker:install:react

This is the response I got:

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

Gemfile fragment:

ruby '2.3.4'
gem 'rails', '~> 5.0.2'
gem 'webpacker', '~> 3.2'

回答1:

UPDATE:

Try running:

bundle exec rails webpacker:install

And Then:

bundle exec rails webpacker:install:react

OLD SOLUTION:

The apparent solution is to copy the config/webpacker.yml file manually from here to config/webpacker.yml:

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

Then :

 bundle exec rails webpacker:install:react

To get:

 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 🎉

来源：https://stackoverflow.com/questions/48999511/how-to-use-webpacker-for-react-on-an-existing-rails-5-0-2-application

标签

ruby-on-rails

reactjs

webpacker