gulp+bower体系如何使用browserify调用npm模块
来源:互联网 发布:俄罗斯生活 知乎 编辑:程序博客网 时间:2024/05/19 20:20
缘由
前两天,被问到:“想用的前端库,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.jsThen 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'));});
1 0
- gulp+bower体系如何使用browserify调用npm模块
- npm,bower,gulp使用
- 使用npm+gulp+browserify网页前端开发
- angular + browserify + gulp + bower + less
- 前端模块管理器简介(bower-browserify)
- nodejs npm gulp bower 几点
- 前端模块管理器Bower Browserify Component Duo 的差异
- 使用gulp+Browserify构建React应用
- npm bower安装和使用
- nodejs+npm+bower安装使用
- nodejs+angularjs+npm+gulp+bower+jade+less构建前端框架
- 前端自动化工程构建node,npm,bower,gulp
- gulp-前端模块及依赖管理的新选择:Browserify
- npm&bower
- nodejs+npm+gulp使用入门教程
- Webpack、Browserify和Gulp
- gulp+browserify前端模块化
- 如何在Meteor中使用npm模块?
- 程序员如何做到『编程速度又快,Bug 数量又少』?
- SQL笔记
- 第一次机房收费系统--上机
- 经验问题(一)
- android 微信扫码支付模式一生成二维码 原生支付url参数错误
- gulp+bower体系如何使用browserify调用npm模块
- AOP实现原理
- JSON中单双引号的处理
- Linux001
- 贴标签
- 画渐变的柱状图
- LightOJ 1138Trailing Zeroes (III)(二分)
- Spark 存储管理之BlockManger
- 1个顶11个?程序员效率差距的量化分析