browserify在全局和模塊中使用JQuery

Question

我得到了一個模板，由一個客戶端工作，該客戶端有28個不同的jquery插件，客戶端想要使用它們（例如，放棄它們不是一個選項）。

但是我真的想使用browserify來模塊化我的代碼，但是沒有嘗試去填充所有28個插件和他們的依賴性，我無法弄清楚我將如何做到這一點而不必為瀏覽器和全局加載JQuery。

我試過這樣做：

window.JQuery = require('jquery')
window.$ = window.JQuery

還有這個：

var globals = function(){
  window.JQuery = require('jquery')
  window.$ = window.JQuery
}

globals();

但似乎都沒有工作，所有的插件都會拋出錯誤。 現在有人如何讓它發揮作用？

Answer 1

我認為這是一個非常好的方法。

1. npm install jquery
2. npm install browserify-shim

3. 把這一行放在你的package.json中：

    browserify-shim" : { "./node_modules/jquery/dist/jquery.js" : "$" } 

所以在服務器上，你通常的require('jquery')將指向node_modules點。 當你運行browserify時，它會將window.$設置為相同的代碼（你也可以使用jQuery ）。 此外，如果您確實想要填充這些插件，只需像這樣添加它們：

    "browserify-shim" : {
      "./node_modules/jquery/dist/jquery.js" : "jQuery",
      "./plugins/bs_modal.js" :  { 
        "depends": [ "./node_modules/jquery/dist/jquery.js" ] 
      }
    }

或者，清潔：

    "browser" : {"jquery": "./node_modules/jquery/dist/jquery.js"},
    "browserify-shim" : {
      "jquery" : "jQuery",
      "./plugins/bs_modal.js" :  { 
        "depends": [ "jquery" ] 
      }
    }

Answer 2

我一直在使用下面的行，以獲得瀏覽器的bootstrap和jquery：

window.$ = window.jQuery = require('jquery');