将供应商js文件(来自wrappebootstrap）合并到Rails4中

Incorporating vendor js files (from wrap bootstrap) into Rails 4

本文关键字：合并 Rails4 wrappebootstrap 来自 供应商 js 文件      更新时间：2023-09-26

我很难理解如何将供应商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上）吗？

非常感谢。

JS中的require(...)语句采用CommonJS格式（因此顶部有注释），通常在Node.JS中使用，但在浏览器环境中不受支持，这就是为什么在检查器中会出现错误的原因。

一种选择是使用Browserify和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配置变量中。

相关文章：