如何在另一台机器上使用 Webpacker 和 React 设置 Rails 项目？

Question

我有一个 Rails 6 项目，我正在按照 Rails 5.1 的敏捷 Web 开发一书进行操作，我正在使用 Circle CI 进行构建和测试。我基本上会在 post.

的末尾列出我所有的问题

以下是我在 circle.yml

中安装 webpacker 的部分

- run:
    name: Install webpacker
    command: bundle exec rails webpacker:install

在我们安装 React 之前，一切都很好。我们使用 rails webpacker:install:react 安装了 React。安装 React 后，我将代码推送到 GitHub，然后 CircleCI 开始构建环境，但是当它尝试安装 webpacker 时，我在下面遇到此冲突：

    conflict  config/webpacker.yml
rails aborted!rs/burak/git/agile-rails/config/webpacker.yml? (enter "h" for help) [Ynaqdhm]

如果我对此说“是”，你会看到下面会发生什么。

╰─$ rails webpacker:install
Warning: you are using an unstable release of Node.js (v15.14.0). If you encounter issues with Node.js, consider switching to an Active LTS release. More info: https://docs.npmjs.com/try-the-latest-stable-version-of-node
    conflict  config/webpacker.yml
Overwrite /Users/burak/git/test/agile-rails/config/webpacker.yml? (enter "h" for help) [Ynaqdhm] Y
       force  config/webpacker.yml
Copying webpack core config
       exist  config/webpack
   identical  config/webpack/development.js
   identical  config/webpack/environment.js
   identical  config/webpack/production.js
   identical  config/webpack/test.js
Copying postcss.config.js to app root directory
   identical  postcss.config.js
Copying babel.config.js to app root directory
    conflict  babel.config.js
Overwrite /Users/burak/git/test/agile-rails/babel.config.js? (enter "h" for help) [Ynaqdhm] Y
       force  babel.config.js
Copying .browserslistrc to app root directory
   identical  .browserslistrc
The JavaScript app source directory already exists
       apply  /Users/burak/.rvm/gems/ruby-2.7.3/gems/webpacker-5.2.1/lib/install/binstubs.rb
  Copying binstubs
       exist    bin
   identical    bin/webpack
   identical    bin/webpack-dev-server
File unchanged! The supplied flag value not found!  .gitignore
Installing all JavaScript dependencies [5.2.1]
         run  yarn add @rails/webpacker@5.2.1 from "."
yarn add v1.22.10
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4]   Resolving packages...
[2/4]   Fetching packages...
[3/4]   Linking dependencies...
warning " > @babel/preset-react@7.13.13" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-display-name@7.12.13" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx@7.13.12" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx-development@7.12.17" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-pure-annotations@7.12.1" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx > @babel/plugin-syntax-jsx@7.12.13" has unmet peer dependency "@babel/core@^7.0.0-0".
warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4]   Building fresh packages...
[-/3] ⠈ waiting...
success Saved 0 new dependencies.
✨  Done in 50.91s.
Installing dev server for live reloading
         run  yarn add --dev webpack-dev-server from "."
yarn add v1.22.10
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4]   Resolving packages...
[2/4]   Fetching packages...
[3/4]   Linking dependencies...
warning " > @babel/preset-react@7.13.13" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-display-name@7.12.13" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx@7.13.12" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx-development@7.12.17" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-pure-annotations@7.12.1" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx > @babel/plugin-syntax-jsx@7.12.13" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4]   Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
└─ webpack-dev-server@3.11.2
info All dependencies
└─ webpack-dev-server@3.11.2
✨  Done in 1.30s.
Webpacker successfully installed

据我所知，如果我说“是”覆盖，React 将从项目中删除。如果我说“不”覆盖，那么一切都很好。

在另一台机器上运行rails webpacker:install有意义吗？该命令不就是为项目安装webpacker，而不是为机器安装webpacker吗？
而不是运行宁 rails webpacker:install 然后说“不”覆盖我可以做 rails assets:precompile 以及工作。我需要使用哪个命令才能在另一台机器上使用 Webpacker 和 React 成功设置 Rails 项目，或者有人可以告诉我正确的设置方法吗？

Answer 1

是的，当您在 CI 机器上运行ning rails webpacker:install 时，您正在尝试再次为此项目安装 webpacker。
是的，您需要在另一台机器上运行的是 rails assets:precompile。它的作用是编译您的所有资产用于生产，而不是开发用途，这正是您在非开发机器上想要的（CI、暂存、生产）。

如何在另一台机器上使用 Webpacker 和 React 设置 Rails 项目？

How to setup a Rails project with Webpacker and React on another machine?

ruby

ruby-on-rails

reactjs

webpacker