将供应商js文件(从wrap bootstrap)合并到Rails 4中

时间:2016-03-28 03:41:37

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

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

我的应用使用bootstrap。供应商文件包含一个名为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上)?

非常感谢。

1 个答案:

答案 0 :(得分:0)

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

一个选项是使用Browserify with Grunt将每个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