將供應商js文件（從wrap bootstrap）整合到Rails 4中

Question

我很努力地理解如何將供應商的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') 

在我的應用程序/資產/ JavaScript的文件夾中，我有一個名爲application.js中的文件。在那個文件中，我有：

//= require npm 

在我的控制檯檢查器中，我可以看到與npm文件合併的錯誤。錯誤信息是：

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

我認爲這可能與在npm.js文件中設置的../ ..引用有關。

有誰知道如何適應這個在軌道4（託管在heroku）使用？

非常感謝。

Answer 1

您的JS中的那些require(...)語句採用CommonJS格式（因此註釋位於頂部），並且通常在Node.js中使用，但在瀏覽器環境中不受支持，這就是爲什麼您在檢查器中收到錯誤。

一個選項是使用Browserify with Grunt將每個JS文件鏈接和編譯成單個npm.js（儘管我建議使用不同的名稱）文件。你是否已經使用browserify_rails，Grunt或類似的工具來管理你的JS文件？

如果你還沒有咕嚕/ 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配置變量中。