2015-09-27 107 views
0

我:Browserify模块依赖

main.js

var _ = require('underscore'); 
var $ = require('jquery'); 
var mainUI = require('./main-ui'); 

mainUI(); 

主ui.js

var $ = require('jquery'); 
module.exports = function() { 
    $('[data-toggle="tooltip"]').tooltip({ 
     placement: 'bottom' 
    }); 

    $('#sb_toggle').on('click', function() { 
     $('#sidebar').toggleClass('hide'); 
     $(this).toggleClass('show-sidebar'); 
    }); 
}; 

我是正确的假设,我有需要的jQuery在我制作的每个模块中?

为什么不通过在main.js文件中使用jquery来完成工作,以便该行之后的所有必需模块都有$ available?

回答

0

Browserify不能像那样工作。本质上,每个模块都是在一个IIFE中进行沙箱化。

这是对jQuery使用UMD pattern的事实。其结果是,当 的jQuery在的NodeJS环境使用它不公开的全局变量

您可以通过多种方式处理这个问题:

  • 使用factor bundle
  • 使用Browserify的“全球性”(一个对浏览器窗口对象的引用)object:global。$ = require('jquery')
  • 只需使用jQuery的“经典”方式将其作为一个独立的库。 通过使用“脚本”标记:

第四个选项需要一点重复。假设你需要在任何地方包含你的“main”模块,你需要使用“main”来暴露你需要的任何东西(在本例中是jquery)。

例如(假设文件名是主ui.js):

// This is a how "main-ui" should look like 
var $ = require('jquery') 

// ... Some business logic 
function drawColor(color) { ... } 

// Exposed members: 
return { 
    $: $, 
    colorDraw: drawColor 
} 

这是每个需要jQuery的模块应该怎么样子:

var $("../main-ui.js").$ // <-- Notice the path should be relative to the current working directory 

// .. Use '$' like you always do. 
+0

我该如何使用它的经典方式? – imperium2335

+0

更新了答案 –

0

什么:

global.jQuery = global.$ = require("jquery"); 

这似乎工作正常或有什么险恶我失踪?

+0

忘记全球:(这绝对是另一种方式! –