browserify学习总结

来源:http://www.venoautomotive.com 作者:永利官网误乐域 人气:99 发布时间:2019-12-26
摘要:前言 在未接触browserify,就算笔者驾驭它是四个前端营造筑工程具,但依然有多少个问号: browserify现身的日子? 能营造哪些文件? 叠合的browserify代码体量是多大? 能生成两个出口文

前言

在未接触browserify,就算笔者驾驭它是四个前端营造筑工程具,但依然有多少个问号:

  1. browserify现身的日子?

  2. 能营造哪些文件?

  3. 叠合的browserify代码体量是多大?

  4. 能生成两个出口文件呢?

  5. browserify学习总结。何以兼备开辟调节和测量检验?

6. browserify vs webpack?

browserify 

browserify能够让您选择相符于 node 的 require(卡塔尔(英语:State of Qatar)的法门来协会浏览器端的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编译:

$ 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]);

browserify学习总结。方今entry.js 要求的持有其余文件都会被编写翻译进 bundle.js 中,包括不菲层 require(卡塔尔(英语:State of Qatar) 的场地也会联合被递归式的编写翻译过来。

browserify学习总结。browserify学习总结。编写翻译好的 js能够一向获得浏览器选择

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

结合gulp

构成Gulp使用时,必要在工程里面增添package.json和设置一些node正视。

示例:

图片 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

图片 2

自问自答

1. browserify现身的日子?

在网络未有找到browserify最早现身的日子的认证,只是有Github上找到最早的本子是在2012/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

 

总结

至于模块化的,无论是异步模块加载(英特尔),依旧browserify的预编写翻译。关键不在于运转时是统10%叁个文本,仍然异步加载。关键是介于管理模块的依赖性,使支付时候没有必要关注模块之间的加载顺序、信赖关系,使用方式,只需关注本人近期模块的开销(不用管使用的模块在哪儿,这模块又依附了什么模块)。

就恍如于maven,提供了二个放置jar包,管理依赖关系,使得第三方库易于使用,最终也可做打包宣布。

因此,无论是用RequireJS、SeaJS,依然grunt、gulp,只怕browserify、webpack,最后皆认为着模块开垦,压缩合併只是一小部分。

 

附录:

示范代码:

 

参考文献

1. browserify【百度百科】

2.  【知乎】

 

正文为原创小说,转发请保留原出处,方便溯源,如有错误地方,多谢指正。

本文地址 :

本文由永利官网误乐域发布于永利官网误乐域,转载请注明出处:browserify学习总结

关键词:

最火资讯