前言

当匪接触browserify,虽然自己知道她是一个前端构建工具,但要生几个谜:

  1. browserify出现的日子?

  2. 会构建哪些文件?

  3. 外加的browserify代码体积是多异常?

  4. 能大成多独出口文件为?

  5. 什么样兼顾开发调试?

6. browserify vs webpack?

browserify 

browserify可以给你用类似于 node 的 require()
的不二法门来团浏览器端的Javascript代码,通过预编译被前面端Javascript可以一直行使
Node NPM 安装之一部分仓房。

安装

npm install -g browserify

示例

module.js:

module.exports = 'It works from module.js.'

module2.js:

module.exports = 'It works from module2.js.'

当下是 entry.js 的情,像一般的 nodejs 程序那样使 require()
加载库和文件:

entry.js:

var m = require('./module.js');
var m2 = require('./module2.js');
console.log(m, m2);

使用browserify编译:

$ browserify entry.js > bundle.js

编译后底文书:

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var m = require('./module');
var m2 = require('./module2');

console.log(m, m2);
},{"./module":2,"./module2":3}],2:[function(require,module,exports){
module.exports = 'It works from module.js.'
},{}],3:[function(require,module,exports){
module.exports = 'It works from module2.js.'
},{}]},{},[1]);

而今entry.js 需要的富有其他文件还见面于编译进 bundle.js 中,包括过多层
require() 的图景为会见伙给递交归式的编译过来。

编译好的 js可以一直将到浏览器采用

<script src="bundle.js"></script>

结合gulp

重组Gulp使用时,需要在工程中上加package.json和装置有node依赖。

示例:

json 1

gulpfile.js:

var gulp = require("gulp");
var browserify = require("browserify");
var sourcemaps = require("gulp-sourcemaps");
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');

gulp.task("browserify", function () {
var b = browserify({
  entries: "./entry.js",
  debug: true /*告知browserify在运行同时生成内联sourcemap用于调试*/
});

return b.bundle()
  .pipe(source("bundle.js"))
  .pipe(buffer())
  .pipe(sourcemaps.init({loadMaps: true}))
  .pipe(sourcemaps.write("."))
  .pipe(gulp.dest("./dist"));
});

那就是用装:

npm install gulp --save-dev
npm install gulp-sourcemaps --save-dev
npm install browserify --save-dev
npm install vinyl-source-stream --save-dev
npm install vinyl-buffer --save-dev

vinyl-source-stream:用于将browserify的bundle()的输出转换为gulp可用之vinyl(一种植虚拟文件格式)流。

vinyl-buffer:用于将vinyl流转化为buffered
vinyl文件(gulp-sourcemaps及多数Gulp插件都亟待这种格式)

编译运行:

gulp browserify

json 2

自问自答

1. browserify并发的日子?

当网上没有找到browserify开始出现的日期的辨证,只是来Github上找到最初的版是以2011/6/6。anywhere,这题目并无紧要,也即非追究。

2. 会构建哪些文件?

假若上面介绍,只能构建JavaScript文件。

3.
叠加的browserify代码体积是差不多酷?

文本合并后(编译后),browserify附加的代码的体积(不是工作代码)是匪顶1KB的。

4. 会生成多个出口文件呢?

适度从紧上说道,单从命下,只能是一个出口文件。 

5. 怎么样兼顾开发调试?

页面上运行时之js是编译后,所以如果兼任开发调试,那还是只要为此source map。

PS:不过要配备至服务器才能见到source map文件。

browserify vs webpack

由自身所以得无深,下面有酌见:

  1. 都是前者模块化的方案,都急需预编译。

2. browserify只干JavaScript,webpack啥都干(CSS、JavaScript、图片等)

3. browserify凡是轻量级的,webpack 整体缓解、大而全的。 

PS:webpack官网有指向两岸的用办法进行对照:webpack for browserify
users

 

总结

至于模块化的,无论是异步模块加载(AMD),还是browserify的预编译。关键不在于运行时是联合成一个文书,还是异步加载。关键是介于处理模块的指,使开发上不需关爱模块之间的加载顺序、依赖关系,使用办法,只需要关注好眼前模块的开销(不用管采用的模块于乌,这模块又靠了何等模块)。

就算类似于maven,提供了一个停放jar包,管理依赖关系,使得第三方库易于使,最后吧不过开打包发布。

因此,无论是用RequireJS、SeaJS,还是grunt、gulp,或者browserify、webpack,最终都是为了模块出,压缩合并只是均等微有。

 

附录:

演示代码:https://github.com/codingforme/code-learn/tree/master/browserify

 

参考文献

1. browserify【百度百科】

2. https://www.zhihu.com/question/37020798 【知乎】

 

正文也原本创文章,转载请保留原出处,方便溯源,如发生误地方,谢谢指正。

正文地址 :http://www.cnblogs.com/lovesong/p/5861932.html

相关文章

网站地图xml地图