前端模块化工具 Browserify
Browserify 是什么
Browserify 是一个浏览器端代码模块化的工具
为什么要使用 Browserify
浏览器端的代码模块化有2个明显的好处:
1)前端JS可以使用npm包 我们知道 npm 中有非常丰富的功能包,但没法在浏览器中直接用,因为他们是按照 nodejs 模块化标准写的,使用 require 和 module.exports 引用和构造模块,浏览器不支持此类语法,所以需要浏览器端模块化工具的支持,这样就相当于给浏览器端增加了 npm 库
2)模块化开发 现在前端JS代码越来越多,可以通过模块化,把一个大的JS代码分割成不同的模块,存储在不同文件中,提高项目规范化,便于开发和维护
Browserify 工作原理
开发时使用nodejs的模式,正常使用 require 和 module.exports,在部署前使用 Browserify 进行编译
Browserify 会对代码进行解析,整理出代码中的所有模块依赖关系,然后把相关的模块代码都打包在一起,形成一个完整的JS文件,这个文件中不会存在 require 这类的模块化语法,变成可以在浏览器中运行的普通JS
使用实例
先安装 Browserify
$ npm install -g browserify
安装完成后,开始实践
实例1:使用 npm 包
安装一个 npm 包
$ npm install uniq
新建 main.js,使用 uniq 的功能
var uniq = require('uniq');
var nums = [1, 2, 2, 3, 4, 5, 5, 5, 6];
console.log(uniq(nums));
执行测试
$ node main.js
输出
[ 1, 2, 3, 4, 5, 6 ]
使用 Browserify 编译打包
$ browserify main.js > bundle.js
新建 test.html,引用 bundle.js
<script src="bundle.js"></script>
在浏览器中测试,会在console成功打印出结果信息
实例2:自定义模块
定义模块,新建 foo.js
module.exports = function (n) {
return n * 111
}
调用模块,新建 test.js
var foo = require('./foo.js');
console.log(foo(5));
执行测试
$ node test.js
输出 555
使用 Browserify 编译打包
$ browserify test.js > bundle.js
和上个例子一样,还是输出到 bundle.js,刷新浏览器中的 test.html,就可以在 console 中看到输出:555
Debug
Browserify 打包出来的是混合代码,不利于查看 例如
比我们原始的 test.js 复杂很多,所以 Browserify 提供了 debug 模式,可以让我们在开发阶段使用
编译打包时加上 debug 选项 $ browserify test.js > bundle.js --debug
刷新浏览器
这时显示的就不是 bundle.js 而是 test.js
点击进来后,进入了原始的 test.js
自动打包
在开发过程中,频繁的手动执行 browserify 命令也是挺麻烦的,最好能在源文件变化后自动打包
watchify 可以实现这个需求,先安装
$ npm install -g watchify
然后使用 watchify 替代 browserify 命令
$ watchify test.js -d -o bundle.js -v
1840 bytes written to bundle.js (0.05 seconds)
1840 bytes written to bundle.js (0.01 seconds)
1840 bytes written to bundle.js (0.01 seconds)
这样就会监听 test.js 及其引用的相关模块的变化,代码被修改后,马上会自动打包,并输出打包信息,所以修改代码后,直接刷新浏览器就可以了
从上面的信息中可以看到,第二次打包的时间比第一次短了不少,这是因为 watchify 有加速功能,这在大项目中非常有用
小结
简单介绍了一下 Browserify 的基本用法,希望对您的前端开发有帮助,更多用法可以查看官网 http://browserify.org
前端模块化工具 Browserify相关推荐
- 前端模块化工具--webpack学习心得
话说前头 webpack前段时间有听说一下,现在已经到了3.x的版本,自己没去接触.因为之前使用gulp来作为自己的项目构建工具.现在感觉gulp使用的趋势在减少.现在这段时间去接触了webpack, ...
- fekit前端代码模块化工具
fekit是一套前端开发工具,是由去哪儿网开发.目前在github上开源.使用fekit的优点: a.本地开发支持环境:从开发调试到上线,均是前后端工程独立开发.调试.部署,打破了原来前后端揉在一个工 ...
- 前端模块化开发学习之gulpbrowserify篇
随着web应用的发展,前端的比重占得越来越多,编写代码从而也越来越复杂.而通常我们需要将不同功能或者不同模块的代码分开写,最后在html中一起加载,这样做是可以的,但是当你需要进行维护或者是二次开发 ...
- 超级棒的170+款web前端开发工具汇总,千万要收藏好!
作者:web前端开发 我们与企业内部的Web开发团队进行了很多次交流,研究了很长时间,最后将Debug工具与Web前端开发工具整理汇总在了一起,这些工具对每个Web开发人员都非常有用. 这些工具将使您 ...
- 最全面、最详细的“前端模块化”总结
背景 随着前端功能越来越复杂,前端代码日益膨胀,为了减少维护成本,提高代码的可复用性,前端模块化势在必行. 所有js文件都在一个html中引入,造成以下不良影响: 请求过多.首先我们要依赖多个模块,那 ...
- 174款前端开发工具汇总,学习,开发,事半功倍!
我们与企业内部的Web开发团队进行了很多次交流,研究了很长时间,最后将Debug工具与Web前端开发工具整理汇总在了一起,这些工具对每个Web开发人员都非常有用. 这些工具将使您的工作更加轻松,特别是 ...
- 前端模块化的前世今生
前端模块化是前端工程化所不可或缺的重要一环. 前言 与十年之前只用jQuery就可以解决一切的情况完全不同的是,如今的前端生态可谓是遍地开花,百花齐放.各种框架层出不穷,像什么大名鼎鼎的Vue,R ...
- 前端构建工具是什么?
前端构建工具是什么 感谢原知乎答案,前端构建工具是什么? - Jasin Yip的回答 - 知乎 前端构建工具通常可以在前面加[自动化]三个字,就是用来让我们不再做机械重复的事情,解放我们的双手的. ...
- 浅析:前端模块化开发规范
浅析:前端模块化开发规范 早期的模块化解决方案 NameSpace:命名空间模式 匿名闭包:IIFE模式 模块模式:IIFE+依赖传参 ES6之前的模块化解决方案 CommonJS模块化规范 AMD模 ...
最新文章
- IDEA中安装Free Mybatis plugin插件实现从dao层到mapper层自由跳转
- mysql 会话级别的参数_PostgreSQL的参数设置级别及查询各级别的参数值
- java 串口判断报文完整_如何判断串口接收完成一帧数据
- web前端三大主流框架_web前端三大主流框架
- java gc日志乱码_gc原理以及gc日志剖析
- 简约不简单的单例模式
- 标准模板库 STL—— set 列传
- GPT分区表出现问题后的数据恢复思路
- 基于PHP+小程序(MINA框架)+Mysql数据库的共享会议室预约小程序系统设计与实现
- 九、MFC控件(一)
- Android多开/分身检测
- 什么是为AI另辟蹊径的“小”数据?
- 那些花儿那片笑声让我想起我的那些花儿在我生命每个角落静静为我开着我曾...
- 阿齐索-对接淘宝第三方平台
- LeetCode 299. Bulls and Cows(公牛和母牛)
- 程序员一定要会的软件项目管理评估方案,不做只会敲代码的码农!(建议收藏)
- clickHouse分区和分片详解
- 北京师范大学计算机研究生毕业去向,北京师范大学的计算机科研实力怎么样啊?我想考北..._考研_帮考网...
- 【ES系列】ES的数据结构与DSL语法
- vue项目实现G6双向树状图最详细教程