javascript - 将 vendor js 文件(来自包装 Bootstrap )合并到 Rails 4 中

Question

我正在努力了解如何将 vendor js Assets 合并到我的 Rails 4 应用程序中。

我的应用程序使用 Bootstrap 。 vendor 文件包含一个名为 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 上)？

非常感谢。

Answer 1

那些require(...) JS 中的语句采用 CommonJS 格式(因此位于顶部的注释)，并且通常在 Node.js 中使用，但在浏览器环境中不受支持，这就是您在检查器中收到该错误的原因。

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

如果您没有使用过 Grunt/Browserify，或者上面的说明不清楚，那么最好也是最简单的方法就是坚持使用 Rails Assets 管道:

所以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中配置变量。