Rails 7：如何将非模块化第三方JS库纳入构建流程？

针对非模块化、仅能通过script标签引入的第三方压缩JS库，推荐以下两种标准方式替代手动放入public目录的操作，实现自动纳入构建、合并压缩的需求：

方案一：使用 jsbundling-rails + esbuild（Rails 7 推荐现代方式） #

esbuild 支持打包非模块化JS，且构建速度快，适合现代Rails项目：

1. 安装 jsbundling-rails 及 esbuild
   执行命令初始化：

   rails js:install:esbuild
   

   这会自动配置好package.json的构建脚本与esbuild基础配置。

2. 存放非模块化JS文件
   在app/assets下创建专门目录：app/assets/vendor/js，将所有目标JS库放入此目录。

3. 引入目标文件
   在app/javascript/application.js中，通过require语法引入（非模块化文件不能用import）：

   // 单个文件引入示例
   require("../../assets/vendor/js/xxx.min.js");
   
   // 批量引入所有vendor下的JS（需先安装glob依赖）
   // 执行 npm install glob --save-dev
   const glob = require('glob');
   glob.sync('../../assets/vendor/js/**/*.js').forEach(file => require(file));
   

4. 调整esbuild配置
   修改esbuild.config.js，确保能正确识别vendor目录的文件（以批量引入为例）：

   const path = require('path');
   const glob = require('glob');
   
   // 合并application.js与vendor下的所有JS作为构建入口
   const entryPoints = [
     path.join(__dirname, 'app/javascript/application.js'),
     ...glob.sync(path.join(__dirname, 'app/assets/vendor/js/**/*.js'))
   ];
   
   require("esbuild").build({
     entryPoints: entryPoints,
     bundle: true,
     minify: process.env.RAILS_ENV === 'production', // 生产环境自动压缩
     outdir: path.join(__dirname, 'app/assets/builds'),
     loader: { '.js': 'js' },
   }).catch(() => process.exit(1));
   

5. 构建与使用

   • 开发环境：执行npm run build:watch自动监听文件变化并构建
   • 生产环境：执行npm run build完成合并压缩
     最后在布局文件中只需引入构建后的主文件：

   <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
   

方案二：使用Rails Asset Pipeline（传统兼容方式） #

若偏好传统Rails asset pipeline流程，可按以下步骤操作：

1. 配置manifest文件
   修改config/assets/config/manifest.js，添加vendor目录的引用：

   //= link_tree ../images
   //= link_directory ../javascripts .js
   //= link_directory ../vendor/js .js
   

2. 存放与引入文件
   将非模块化JS放入app/assets/vendor/js，然后在app/assets/javascripts/application.js中批量引入：

   //= require_tree ../vendor/js
   

3. 开启生产环境压缩
   在config/environments/production.rb中确保启用JS压缩：

   config.assets.js_compressor = :terser
   config.assets.digest = true
   

4. 使用构建后的文件
   布局中直接引入application.js即可，asset pipeline会自动完成合并与压缩：

   <%= javascript_include_tag "application", "data-turbo-track": "reload" %>
   

注意事项 #

• 不要将这些文件放入public/js，该目录下的文件不会经过构建流程，无法实现合并压缩。
• 开发环境下可关闭压缩（esbuild通过minify: false，asset pipeline则在development.rb中设置config.assets.debug = true），方便调试。

内容的提问来源于stack exchange，提问作者magynhard