gulp+bower体系如何使用browserify调用npm模块

缘由

前两天，被问到：“想用的前端库，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'));
});