NodeJS 把 JavaScript 的使用从浏览器端扩展到了服务器端,使得前端开发人员可以用熟悉的语言编写服务器端代码。这一变化使得 NodeJS 很快就流行起来。在 NodeJS 社区中有非常多的高质量模块可以直接使用。根据最新的统计结果,NodeJS 的 npm 中的模块数量已经超过了 Java 的 Maven Central 和 Ruby 的 RubyGems,成为模块数量最多的社区。不过这些 NodeJS 模块并不能直接在浏览器端应用中使用,原因在于引用这些模块时需要使用 NodeJS 中的 require 方法,而该方法在浏览器端并不存在。Browserify 作为 NodeJS 模块与浏览器端应用之间的桥梁,让应用可以直接使用 NodeJS 中的模块,并可以把应用所依赖的模块打包成单个 JavaScript 文件。通过 Browserify 还可以在应用开发中使用与 NodeJS 相同的方式来进行模块化和管理模块依赖。如果应用的后台是基于 NodeJS 的,那么 Browserify 使得应用的前后端可以使用一致的模块管理方式。即便应用的后端不使用 NodeJS,Browserify 也可以帮助进行前端代码的复用和组织。

Browserify 可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码,通过预编译让前端 Javascript 可以直接使用 Node NPM 安装的一些库。

安装:

npm install -g browserify

示例

这是 main.js 的内容,像普通的 nodejs 程序那样使用 require() 加载库和文件:

var foo = require('./foo.js');
var bar = require('../lib/bar.js');
var gamma = require('gamma'); var elem = document.getElementById('result');
var x = foo(100) + bar('baz');
elem.textContent = gamma(x);

导出的方法:

module.exports = function (n) { return n * 111 }

使用 browserify 编译:

$ browserify main.js > bundle.js

现在 main.js 需要的所有其它文件都会被编译进 bundle.js 中,包括很多层 require() 的情况也会一起被递归式的编译过来。

编译好的 js 可以直接拿到浏览器使用

<script src="bundle.js"></script>

browserify运行原理分析

http://blog.jobbole.com/78825/

Browserify的更多相关文章

  1. Vue.js——60分钟browserify项目模板快速入门

    概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直 ...

  2. 前端构建工具的用法—grunt、gulp、browserify、webpack

    随着前端项目的飞速发展,项目越来越大.文件越来越多,前端工程化的工具也越来越多.下面介绍目前最流行的四种构建工具——grunt.gulp.browserify.webpack 所有的构建工具都是基于N ...

  3. gulp启动一个小型web服务器配置&browserify(require)

    var gulp = require('gulp'), connect = require('gulp-connect'), // 运行live reload服务器 browserify = requ ...

  4. browserify压缩合并源码反编译

    最近在学习钉钉(一个协作应用)桌面应用的前端源码时候,发现其js源码是用browserify做模块开发.于是想还原其源码的原本的目录结构,学习它的目录分类以及业务划分. 前言 用过browserify ...

  5. browserify学习总结

    前言 在未接触browserify,虽然我知道它是一个前端构建工具,但还是有几个疑问: 1. browserify出现的日期? 2. 能构建哪些文件? 3. 附加的browserify代码体积是多大? ...

  6. gulp/grunt和browserify/webpack的区别

    Gulp应该和Grunt比较,他们的区别我就不说了,说说用处吧.Gulp / Grunt 是一种工具,能够优化前端工作流程.比如自动刷新页面.combo.压缩css.js.编译less等等.简单来说, ...

  7. angular项目总结——angular + browserify + gulp + bower + less 架构分享

    一眨眼,快三个月没有写博客了.一直在为自己没有写博客而懊恼,忙过这段时间,好好总结一下. 新项目主要是自己一个人在写,先搭建了一个初步的架构,用了我并不熟悉的angular,这个过程中,慢慢也熟悉了a ...

  8. browserify使用手册

    简介 这篇文档用以说明如何使用browserify来构建模块化应用 browserify是一个编译工具,通过它可以在浏览器环境下像nodejs一样使用遵循commonjs规范的模块化编程. 你可以使用 ...

  9. 使用Gulp和Browserify来搭建React应用程序

    对React有一定了解之后,我们知道,需要把JSX文件转换成JS文件,组件需要导入导出.本篇就体验使用Gulp把JSX文件转换成JS文件,使用Browserify来把组件捆绑到一个文件并理顺组件之间的 ...

  10. 使用Gulp和Browserify创建多个绑定文件

    Browserify是一个Javascript的绑定工具,帮助我们理顺module之间的依赖关系.Gulp用来优化workflow.两者的共同点都是使用流,但在使用流方面也有不同之处: Browser ...

随机推荐

  1. MongoDB性能监控

    1.mongostat 查看运行中的mongodb实例的统计信息 重要指标说明: getmore: 通常发生在结果集比较大的查询时,第一个query返回了部分结果,后续的结果是通过getmore来获取 ...

  2. mysql的udf应用

    一.mysql的Mysql-udf-http参见文章http://blog.s135.com/mysql-udf-http/ 注:centos安装后如果无法提交数据,请关闭selinux二.mysql ...

  3. delphi 向其他程序发送模拟按键

    向其他程序发送模拟按键: 1.用keybd_event: varh : THandle;beginh := FindWindow('TFitForm', '1stOpt - [Untitled1]') ...

  4. springMVC配置文件spring-servlet.xml中<mvc:annotation-driven />的意义

    <mvc:annotation-driven/>标签,对应的实现类是org.springframework.web.servlet.config.AnnotationDrivenBeanD ...

  5. svn update 失败 且 clean up失败解决方法

    当出现这种情况时,大多数是因为svn的数据库还有队列没处理完.而我们要做到仅仅是把队列清除即刻. 具体做法是: 1.下载sqlite3.exe下载地址:sqlite官网http://www.sqlit ...

  6. Ext TabPanel items高度宽度自适应

    写Ext的时候经常会遇到一些莫名其妙,令人感到非常神奇的问题,甚至都没办法用语言去描述它,搞的人想请教一下百度或Google都不知道该去怎么问,简直能够令人发疯.先来看张截图吧. 有没有注意到里面的G ...

  7. ORACLE FormBuilder触发器执行顺序

    1.当打开FORM时: (1)PRE-FORM (2)PRE-BLOCK(BLOCK级) (3)WHEN-NEW-FORM-INSTANCE (4)WHEN-NEW-BLOCK-INSTANCE (5 ...

  8. c语言学习感想

    接触c语言已经2个多月了,在这段期间按时的完成了作业,上课能够较好的听讲,因此我获得了老师奖励的小黄衫. 同时,希望自己能够学好c语言! 学习感受与心得 因为兴趣,选择了计算机这专业,我从遥远的南方来 ...

  9. 【译】Android系统架构

    让我们来快速预览一下整个android系统的架构.从下面的图中我们可以发现,这个架构分为几个不同的层,底层为上一层提供服务.  Linux Kernel android系统建立在一个坚固的基石上:Li ...

  10. 【C】用我所学去讲C语言指针

    很多人不敢讲C的指针,有些人讲不清,有些人怕讲错.初生牛犊不怕虎,就让我讲讲. 下面开始. 一.指针的定义  指针是内存单元的编号.内存单元是以字节为单位的.所以指针就是字节的编号. 比如我们的个人电 ...