今天在用browserify的时候踩了一个坑,mark很久了,趁着周末可以小记一笔。
项目本身就是一个js的sdk是前端服务提供者,有业务方调用这个服务,所以在web端,当然要把服务对象暴露在全局,在浏览器中当然就是挂载到window对象上。
原先项目的写法是
var b = browserify({
........
entries: 'src/js/xxx.jsx',
externalRequireName: 'load'
......
});
b.require('./src/js/xxx.jsx', {expose: "a"});
执行后,在调用该jssdk的页面,打开控制台可以看到,输入window.load这个是有定义的,如下图;
然而,由于项目里面功能越来越多,模块分层越来越细致,为了简化路径,方便组织模块,所以用上了browserify的两个参数opts.basedir\opts.paths,
var b = browserify({
.......
basedir: path.resolve('src/'), //模块文件的路径
paths: [path.resolve('src/')],//寻找模块时需要寻找的文件夹
.......
});
那么b.require();的调用,最开始我没有修改,发现window没有load方法,于是我修改为下面这样
b.require('./js/xxx.jsx', {expose: "a"});
结果在控制台查询window对象,还是没有load这个方法。
我去查官方文档,在文档发现有这么一句
使用了opts.basedir让相对地址可以被解析,file要是一个流。
于是我修改为
b.require(fs.createReadStream('./src/js/xxx.index.jsx'), {expose: 'a'});
功能正常了。
之前只是知道b.require()的功能,具体使用方式并没有细细的研究,遇到问题才会仔细的看文档找解决方法。