用 Browserify 替换 require.js

阅读量：3556 次

发布时间：2019-05-20

本文共 1549 字，大约阅读时间需要 5 分钟。

我一直不喜欢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 wantmodule.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结合使用才是关键）的相关资料

转载地址：http://yjdrj.baihongyu.com/

你可能感兴趣的文章