将供应商 js 文件（来自 wrap bootstrap）合并到 Rails 4答案

【问题标题】：Incorporating vendor js files (from wrap bootstrap) into Rails 4将供应商 js 文件（来自 wrap bootstrap）合并到 Rails 4
【发布时间】：2016-03-28 03:41:37
【问题描述】：

我很难理解如何将供应商 js 资产合并到我的 Rails 4 应用程序中。

我的应用程序使用引导程序。供应商文件包括一个名为 npm.js 的 js 文件。该文件包含以下内容：

// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
require('../../js/transition.js')
require('../../js/alert.js')
require('../../js/button.js')
require('../../js/carousel.js')
require('../../js/collapse.js')
require('../../js/dropdown.js')
require('../../js/modal.js')
require('../../js/tooltip.js')
require('../../js/popover.js')
require('../../js/scrollspy.js')
require('../../js/tab.js')
require('../../js/affix.js')

在我的 app/assets/javascript 文件夹中，我有一个名为 application.js 的文件。在那个文件中，我有：

//= require npm

在我的控制台检查器中，我可以看到包含 npm 文件的错误。错误信息是：

npm.self-f66d504….js?body=1:2 Uncaught ReferenceError: require is not defined

我认为这可能与 npm.js 文件中列出的 ../.. 引用有关。

有谁知道如何调整它以用于 rails 4（托管在 heroku 上）？

非常感谢。

【问题讨论】：

标签： javascript ruby-on-rails twitter-bootstrap heroku

【解决方案1】：

您的 JS 中的那些 require(...) 语句采用 CommonJS 格式（因此顶部的注释）并且在 Node.js 中常用，但在浏览器环境中不受支持，这就是您在检查员。

一种选择是使用带有 Grunt 的 Browserify 将每个 JS 文件链接并编译成单个 npm.js（尽管我建议使用不同的名称）文件。您是否已经在使用 browserify_rails、Grunt 或类似工具来管理您的 JS 文件？

如果您没有使用过 Grunt/Browserify，或者如果上面的陈述不清楚，那么坚持使用 Rails 资产管道可能是最好和最简单的：

所以application.js 会变成：

//= require('<path>/js/transition.js')
//= require('<path>/js/alert.js')
//= require('<path>/js/button.js')
//= require('<path>/js/carousel.js')
// etc...

代替：

//= require npm

这应该会生成与您上面的示例等效的 JS。

最后，确保 <path> 包含在您的 config.assets.paths 配置变量中。

【讨论】：