缘由
前两天,被问到:“想用的前端库,bower中没有,npm中有,怎么调用?”。(其项目组采用的是yeoman的webapp脚手架,也就是gulp+bower的体系)
这个问题的答案马上就蹦出来了,browserify和webpack都可以。webpack这个黑魔法打包工具我们先放一边,我们来讨论下browserify。
问题
的确,browserify作为模块化打包工具很轻松就能解决这个问题,并且,业界也比较推崇browserify+npm的前端架构体系。
但是,在不推翻gulp+bower体系的前提下,如何用正确得姿势调用到npm中的模块呢。
于是,本人开始翻阅browserify相关文档。
思路
browserify的github地址readme上有这样一段引起了我的注意:
You can just as easily create a bundle that will export a require() function so you can require() modules from another script tag. Here we'll create a bundle.js with the through and duplexer modules.
$ browserify -r through -r duplexer -r ./my-file.js:my-module > bundle.js
Then in your page you can do:
<script src="bundle.js"></script>
<script>
var through = require('through');
var duplexer = require('duplexer');
var myModule = require('my-module');
/* ... */
</script>
也就是说,可以将模块打包起来,之后就能在script中通过require的方式进行加载使用。于是,就有了以下的解决方案。
解决方案
描述
gulp+bower开发体系流程不变的前提下,当需要加载npm模块的时候,使用browserify进行打包,script通过require加载使用。
命令行用法
browserify -r through -r duplexer -r ./my-file.js:my-module > bundle.js
gulp用法
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
gulp.task('browserify', () => {
browserify()
.require('through')
.require('duplexer')
.require('./my-file.js',{expose: 'my-module'})
.bundle()
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe($.rename('export-bundle.js'))
.pipe(gulp.dest('./dist/bundles'));
});