我一直不喜欢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/