如何在现有 Rails 5.0.2 应用程序上使用 Webpacker for React?
How to use Webpacker for React on an existing Rails 5.0.2 application?
我有一个现有的 rails 5.0.2 应用程序,并且想将 React(使用 Redux)应用程序添加到一些页面
找到 webpacker gem 但在为 React 设置 webpacker 安装时遇到 this problem :
$ 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'
更新:
尝试 运行:
bundle exec rails webpacker:install
然后:
bundle exec rails webpacker:install:react
旧解决方案:
明显的解决方案是手动将 config/webpacker.yml 文件从 here 复制到 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
我有一个现有的 rails 5.0.2 应用程序,并且想将 React(使用 Redux)应用程序添加到一些页面
找到 webpacker gem 但在为 React 设置 webpacker 安装时遇到 this problem :
$ 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'
更新:
尝试 运行:
bundle exec rails webpacker:install
然后:
bundle exec rails webpacker:install:react
旧解决方案:
明显的解决方案是手动将 config/webpacker.yml 文件从 here 复制到 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