一、 升级Rails到当前大版本的最新小版本
1，修改Gemfile中的版本号
vim中全局替换命令：":%s/6.0.3/6.1.6/g"
2，升级gem
升级bundle本身
带版本号运行
3, 运行rails升级命令"rails app:update"
如果报错
rails aborted! Psych::BadAlias: Unknown alias: default /home/ruby/rubydev/projects/fas/config/environment.rb:5:in `<main>' /home/ruby/rubydev/projects/fas/bin/rails:9:in `<top (required)>' /home/ruby/rubydev/projects/fas/bin/spring:15:in `require'
因为 psych这个gem的原因，解决放方案：
修改Gemfile，添加
出现其他错误，根据提示解决，比如 可能需要 'yarn install --checkfiles'
二、升级到rails7.0.3
基本上重复上面的步骤
1，修改Gemfile中的版本号7.0.3
2，bundle
3, rails app:update
三、清理webpacker相关
1，删除一些文件
rm package.json rm package-lock.json rm bin/webpack* rm bin/yarn rm -rf node_modules/ rm -rf public/packs/ rm yarn.lock rm yarn-error.log
下面这几个时必须删掉的，否则程序不能运行
rm -rf config/webpack rm config/webpacker.yml rm config/initializers/assets.rb
2，删除或注释掉无用gem，因为自己编译资源
#gem 'sass-rails', '>= 6'
#gem 'webpacker', '~> 4.0'
#gem 'turbolinks', '~> 5'
其中webpacker是必须删除的，否则启动失败。
3，删除config/中所有的配置文件中关于assets的配置，例如
#config.assets.quiet = true
#config.assets.compile = false
不清除这些设置应用也无法启动
四、修改调整application.js 及 application.scss
1，修改app/javascript/packs/application.js
如下内容一律清除
require('jquery'); window.$ = $; window.jQuery = $; require("@rails/ujs").start() //require("turbolinks").start() require("@rails/activestorage").start() //require("channels") require("trix") require("@rails/actiontext") // Uncomment to copy all static images under ../images to the output folder and reference // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) // or the `imagePath` JavaScript helper below. // // const images = require.context('../images', true) // const imagePath = (name) => images(name, true) const images = require.context('../images', true); const imagePath = (name) => images(name, true); // libraries //require('bulma/css/bulma.min.css'); require('font-awesome/css/font-awesome.min.css') // app's style require('../stylesheets/application.scss');
View Code
2，清理app/javascript/stylesheets/application.scss，删掉一切和自定义scss文件无关的引入。
3，处理原来打包的图片资源
a) 原来放在app/javascript/images中的图片资源，移动到public/images
b) 替换erb中的image_pack_tag 改为 使用<img src>静态引用。
<%= image_pack_tag 'logo-main.png', class: 'orbit-image'%>
修改为===>
<img src="images/logo-main.png" class="orbit-image">
五、修改layouts文件中app资源引入方式
1，原来打包的第三方js、css框架（如jquery，fontAwesome）放置到public目录下，改为静态引入：
<link rel="stylesheet" type="text/css" href="<%= root_path%>font-awesome/css/font-awesome.min.css"/> <script src="<%= root_path%>js/jquery-3.4.1/jquery.min.js"></script>
2，app相关js、css改为静态引入方式
首先，删除如下两行内容
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
然后安装下列方式添加引用。
<link rel="stylesheet" type="text/css" href="<%= root_path%>packs/app.min.css"/> <script type="text/javascript" src="<%= root_path%>packs/app.min.js"></script>
六、自己实现js，scss编译。
1，准备node环境。
安装node
全局方式安装esbuild
全局方式安装sass
2，添加文件bin/web-dev-server.sh
#! /usr/bin/bash bash `/usr/bin/esbuild ./app/javascript/packs/application.js --outfile=./public/packs/app.min.js --watch --bundle --minify --sourcemap --color=true` & /usr/bin/node /usr/bin/sass --watch --style=compressed ./app/javascript/stylesheets/application.scss ./public/packs/app.min.css &
七、分发时不再需要预编译。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。