创建集成Bootstrap的Rails7应用时esbuild安装异常问题

• 这些提示不是navbar样式失效的原因。
  esbuild安装时输出的平台、CPU架构不兼容提示属于正常行为：esbuild的npm包默认会枚举全平台、全架构的可选依赖，安装过程中会自动跳过与当前运行环境不匹配的版本，只要安装日志明确显示适配M1芯片的esbuild-darwin-arm64依赖安装完成，esbuild的打包编译功能就是完全正常的。
  你提到按钮、文本等基础Bootstrap样式可以正常生效，已经能证明esbuild核心构建流程没有问题。navbar样式加载异常通常是以下原因导致，和esbuild的安装提示无关：
  • 导航栏HTML结构不符合Bootstrap 5规范，比如漏写navbar-expand-lg这类响应式控制类、data-bs-toggle这类交互属性前缀写错
  • Bootstrap的JS依赖、SCSS变量导入顺序错误

快速排查方法：直接复制Bootstrap官方文档里的标准navbar示例代码粘贴到页面中，如果示例样式正常，就是自定义导航栏的代码写法问题。

按以下步骤操作可以完全规避架构兼容问题，保证Bootstrap全量样式、交互正常生效：

1. 提前校验本地基础环境
   • 确认安装的Node.js为arm64原生版本，不要使用Rosetta 2转译的x86版本。在终端执行node -p "process.arch"，返回结果为arm64即为符合要求，Node版本建议不低于16.0
   • 提前全局安装对应架构的esbuild：执行sudo npm install -g esbuild，这一步完成后后续项目创建时不会再出现大量跨平台不兼容的提示
2. 执行项目初始化命令
   运行rails new 你的项目名 --css=bootstrap --javascript=esbuild，必须显式指定--javascript=esbuild参数，避免默认使用importmap引发资源加载冲突
3. 初始化完成后校验项目配置
   • 检查根目录下package.json的scripts字段，必须包含构建命令："build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets"，同时dependencies中必须存在bootstrap、@popperjs/core、esbuild三个依赖
   • 检查app/javascript/application.js文件，必须按以下顺序导入依赖，顺序错乱会导致交互组件样式异常：

     import "@popperjs/core"
     import "bootstrap"
     import "../css/application.bootstrap.scss"
     

   • 检查app/assets/config/manifest.js文件，必须包含构建资源目录的链接配置：//= link_tree ../builds
4. 启动项目的正确方式
   首次启动前先在项目根目录执行npm run build，确认构建无报错后，执行bin/dev启动开发服务。不要直接运行rails s启动，该命令不会拉起esbuild的监听构建进程，样式、JS改动不会自动编译，会出现样式不更新、部分组件失效的问题。

• 异常修复方案：如果之前误装了x86版本的依赖导致架构报错，直接删除项目根目录下的node_modules文件夹和package-lock.json文件，重新执行npm install即可自动安装适配M1芯片的依赖版本，不需要额外添加架构指定参数。

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