Browserify讓你的Javascript游走于前后端

Browserify通過預編譯，可以讓前端以Nodejs的require方式來組織Javascript模塊，從而前端代碼可以走進后端，后端通過Browserify同樣可以在瀏覽器里跑NPM模塊；

在Nodejs中使用的是Commonjs中定義的模塊機制，每個Javascript文件就是一個模塊，模塊與文件之間是一一對應的關系；模塊通過exports來對外提供接口，包括屬性和方法，調用者使用require來加載模塊并使用模塊提供的接口；Browserify作為Nodejs與瀏覽器之間的橋梁，把Javascript擴展到Nodejs端，并改寫NPM模塊使瀏覽器也能使用數量眾多的NPM模塊，同時Browserify也很好的解決了模塊之間的依賴，可以很好的將應用模塊及依賴模塊打包成一個Javascript文件；

既然走到了Nodejs這里，前端自動化的工具自然少不了，這里推薦的是Gulp（基礎介紹： 前端自動化之神器 — Gulp ），后面介紹Browserify在Gulp里的基本做法；

1、Nodejs的模塊定義：

1 var Hello=function(){ console.log('Hello,Nodejs!'); } module.exports=Hello;

2、Nodejs的模塊調用：   

1 var Hello=require('./hello'); 
2 Hello();

3、Browserify編譯模塊：

首先安裝Browserify，npm install browserify -g

現在一個小栗子：把Nodejs模塊main.js編譯為瀏覽器可加載的Javascript文件index.js

1 browserify ./main.js > ./index.js
2 //或者
3 browserify ./main.js -o ./index.js

那么main.js里也一并打包了其所依賴的模塊，保證index.js在瀏覽器端的順利運行；

4、模塊的package.json：

在模塊所在根目錄添加package.json或npm init生成，可更方便的定義深層模塊的名：

1 {
2  'name':'mode',
3  'main':'./lib/mode/mode.min.js' 
4 }

main屬性指定了模塊的入口文件，這樣，通過require('./mode')來加載模塊時，會定位到目錄下的./lib/mode/mode.min.js；

5、package.json的browser屬性：

package.json里定義了模塊的相關配置信息，browserify擴展了package.json的配置項，通過browser屬性，可以指定瀏覽器環境中的模塊入口文件；這樣，模塊就可以在Nodejs和瀏覽器端自動切換入口文件了；Javascript可以自由游走于前后端了；

1 { 'name':'mode',
2  'main':'main.js',
3  'browser':'browser_main.js' 
4 }

在瀏覽器端指定要被替換的模塊：

1 { 
2      'name':'mode',
3      'main':'main.js',
4      'browser':{ 
5           'main.js':'browser_main.js' 
6       } 
7 }

在瀏覽器端指定要被忽略的模塊：

1 {
2     'name':'mode',
3     'main':'main.js',
4     'browser':{
5         'main.js':false 
6      } 
7 }

6、通過變換模塊brfs讀取靜態資源：

1 var fs = require('fs');
2 var html = fs.readFileSync(__dirname + '/example.html', 'utf8');

處理后的文件如下：

1 var fs = require('fs'); 
2 var html = "<p>hello，Nodejs!</p>";

還可以讀取css、base64圖片資源，在此就不弄了，可自行github;

7、獨立打包公共模塊：

比如：A模塊依賴a模塊和公共模塊c，B模塊依賴b模塊和公共模塊c，可將c模塊單獨打包；

1 browserify A.js B.js -p [ factor-bundle -o A.js -o B.js ] \ -o c.js

如此，依賴模塊會出現在打包后的文件內，而公共模塊不會出現在打包后的文件內；

8、在Gulpfile里使用browserify:

Gulp的安裝與基礎使用： 前端自動化之神器 — Gulp

還是先安裝要用到的插件：

1 var gulp=require('gulp'); 
2 var watch=require('gulp-watch'); 
3 var source = require("vinyl-source-stream");
4 var streamify=require('gulp-streamify'); 
5 var buffer=require('vinyl-buffer');

來個task:

1 gulp.task('browserify',function() { 
2        return browserify('./dist/react/testBroswerify.js')
3                   .bundle() .pipe(source('test.js'))                                                 
4                   .pipe(buffer())//.pipe(streamify(uglify())) //壓縮耗時間 上線處理 
5                   .pipe(gulp.dest('./dist/demos')) 
6 });

順便監聽下文件變動，實時編譯：

1 gulp.task('watch',function() { 
3        gulp.watch('./dist/react/testBroswerify.js',['browserify']); 
4 });

天色已晚，在此不做詳解了，根據項目情況，更多詳細任務配置還得由大家自己探索了；

9、前端加油

由于國情和實際項目的差異，可能基于PC端的前端開發還需要BSIE，但是Nodejs帶給前端的優秀模塊如云，以及前端的自動化進程、像Browserify這樣強大的工具，無疑對前端是歷史性的變革，用好工具，提高開發效率，大家加油！