用 Browserify 替换 require.js

我一直不喜欢require.js的AMD风格，没事就增加代码层级。刚开始我花了很多时间去理解这种风格

define(function(require) {
….
  var _ = require('underscore');
  var $ = require('jquery');
  …

  Return Backbone.View.extend({
 ….
  }
}

难道代码不不能写的扁平一点吗？就像这样

var $ = require('jquery');
var _ = require(‘underscore’);
var coveragePageView = require(‘../view/coveragePageView’);

// TODO: do whatever you want
module.exports = ……

后来我看到了browserify，browserify的目的就是用require来引用js类库，而且天生支持npm，你写个jquery它就知道去 node_modules  下面去找类库

Browserify带来的好处

1. 天生支持npm，不再需要写以下名词定义

underscore: 'node_modules/underscore/underscore',
basil: 'node_modules/basil.js/src/basil',
jquery: 'node_modules/jquery/dist/jquery',

你只需要在使用的时候写

var $ = require('jquery');

就行了，他在编译的时候会自己去找node_modules 文件夹下的js类库

2. 代码风格更扁平

如果你用require.js来写代码，代码一般长这样

var jQuery = require('jquery');
var Backbone = require('backbone');
Backbone.$ = jQuery;

(function($) {
     'use strict';

      module.exports = Backbone.View.extend({
        ...
)(jQuery);

用browserify来写，代码长这样

'use strict';

var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;

module.exports = Backbone.View.extend({ ... });

3. 可以不用grunt就做到代码混淆等很多代码加工的事情，只需要运行

browserify main.js -o bundle.js

就可以把我们写的源代码main.js 混淆和并成 bundle.js。当你想做个简单的网站，又想混淆代码的时候不需要引用grunt那么复杂的机制，就可以直接这么干。

Browserify也有缺点

当然browserify也有缺点，而且还不小！

• 它的运行机制：必须把源代码打成bundle然后再引用，就决定了他不能直接调试源代码，这对于程序员是很不友好的。虽然我们可以使用  watchify(可以动态把你写的代码立即编译成bundle) 和 --debug 选项(给编译后的代码加上source maps)。但是依然只是近似于直接调试源代码。
• Require.js 比 Browserify 更成熟。这意味着 Require.js 有更多的支持，坑也更少，更稳定。

以下是Browserify如何学习和如何跟Backbone 结合使用（是否能跟backbone结合使用才是关键）的相关资料

• BrowserifySample Application: with Backbone, jQuery, Handlebars, and Cordova
• UsingBrowserify with jQuery, Backbone.js and more.
• Howto debug js in browserify
• http://browserify.org/