Rails 5.1生产环境JavaScript失效求助（Bootstrap 4.0.0-beta）

别急，我之前碰到过几乎一模一样的问题，大概率是资源引入顺序不对或者预编译配置没跟上，咱们一步步排查解决：

1. 先把依赖顺序理清楚 #

Bootstrap 4 beta对popper.js的依赖很严格，必须在Bootstrap JS之前加载，而且得用UMD格式的版本：

• 先确认你的package.json里有正确的依赖：

  {
    "dependencies": {
      "bootstrap": "4.0.0-beta",
      "popper.js": "^1.12.9"
    }
  }
  

• 然后在app/assets/javascripts/application.js里，一定要按这个顺序写：

  //= require popper.js/dist/umd/popper
  //= require bootstrap/dist/js/bootstrap
  //= require_tree .
  //= require_self
  

  划重点：popper必须在bootstrap前面，而且要指定umd子目录的版本——普通版本的popper和Bootstrap 4的模块机制不兼容，这是很多人踩坑的点！

2. 检查生产环境的资源预编译配置 #

生产环境下Rails会把资源打包预编译，很容易漏加文件导致加载失败：

• 打开config/initializers/assets.rb，把这两个JS文件加入预编译列表：

  Rails.application.config.assets.precompile += %w( popper.js/dist/umd/popper.js bootstrap/dist/js/bootstrap.js )
  

• 部署时记得运行预编译命令：

  RAILS_ENV=production bundle exec rake assets:precompile
  

3. 排查是否有加载报错或Turbolinks冲突 #

有时候看着文件加载了，但其实藏着小问题：

• 打开浏览器开发者工具（F12），先看Console标签有没有报错——比如找不到popper、bootstrap未定义这类信息，能直接定位问题。
• 再看Network标签，搜索popper和bootstrap的JS文件，确认它们的HTTP状态是200，内容也不是空的。
• 如果是开发环境开了Yarn后也出问题，大概率是Turbolinks搞的鬼：可以先临时注释掉application.js里的//= require turbolinks试试，如果恢复正常，就用Turbolinks的加载事件手动初始化Bootstrap组件：

  document.addEventListener("turbolinks:load", function() {
    $('[data-toggle="dropdown"]').dropdown();
    // 其他需要初始化的组件（比如模态框、标签页）也可以在这里手动触发
  });
  

最后走一遍完整验证流程 #

1. 删除node_modules目录，重新跑yarn install确保依赖完整。
2. 再次核对application.js的引入顺序，别搞反了。
3. 更新assets.rb的预编译配置后，重启Rails服务器（开发环境）或重新预编译部署（生产环境）。

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