browserify学习总结

Posted 海角在眼前

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了browserify学习总结相关的知识,希望对你有一定的参考价值。

前言

在未接触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依赖。

示例:

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

自问自答

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

以上是关于browserify学习总结的主要内容,如果未能解决你的问题,请参考以下文章

Python学习总结

线程学习知识点总结

Webpack 学习总结

如何从代码覆盖率数字中排除 browserify 生成的代码?

使用 browserify 时未定义 require 错误

201621123054《Java程序设计》第九周学习总结