[原]升级项目到Rails7.0.3，使用自己手动方案编译打包css及js资源

一、 升级Rails到当前大版本的最新小版本
1，修改Gemfile中的版本号
vim中全局替换命令：":%s/6.0.3/6.1.6/g"
2，升级gem

bundle install

升级bundle本身 

bundle update --bundler

带版本号运行

bundle _2.3.7_ install

 

3, 运行rails升级命令"rails app:update"

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，添加

gem 'psych', '~> 3.3'

bundle install

 

出现其他错误，根据提示解决，比如 可能需要 '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');

 

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

npm install -g esbuild

全局方式安装sass

npm install -g 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 &

 

七、分发时不再需要预编译。