今天在用browserify的時候踩了一個坑刚操,mark很久了,趁著周末可以小記一筆舟铜。
項目本身就是一個js的sdk是前端服務(wù)提供者,有業(yè)務(wù)方調(diào)用這個服務(wù)奠衔,所以在web端谆刨,當(dāng)然要把服務(wù)對象暴露在全局,在瀏覽器中當(dāng)然就是掛載到window對象上归斤。
原先項目的寫法是
var b = browserify({
........
entries: 'src/js/xxx.jsx',
externalRequireName: 'load'
......
});
b.require('./src/js/xxx.jsx', {expose: "a"});
執(zhí)行后痊夭,在調(diào)用該jssdk的頁面,打開控制臺可以看到脏里,輸入window.load這個是有定義的她我,如下圖;
然而膝宁,由于項目里面功能越來越多鸦难,模塊分層越來越細致,為了簡化路徑员淫,方便組織模塊合蔽,所以用上了browserify的兩個參數(shù)opts.basedir\opts.paths,
var b = browserify({
.......
basedir: path.resolve('src/'), //模塊文件的路徑
paths: [path.resolve('src/')],//尋找模塊時需要尋找的文件夾
.......
});
那么b.require();的調(diào)用介返,最開始我沒有修改拴事,發(fā)現(xiàn)window沒有l(wèi)oad方法,于是我修改為下面這樣
b.require('./js/xxx.jsx', {expose: "a"});
結(jié)果在控制臺查詢window對象圣蝎,還是沒有l(wèi)oad這個方法刃宵。
我去查官方文檔,在文檔發(fā)現(xiàn)有這么一句
使用了opts.basedir讓相對地址可以被解析徘公,file要是一個流牲证。
于是我修改為
b.require(fs.createReadStream('./src/js/xxx.index.jsx'), {expose: 'a'});
功能正常了。
之前只是知道b.require()的功能关面,具體使用方式并沒有細細的研究坦袍,遇到問題才會仔細的看文檔找解決方法。