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