码迷,mamicode.com
首页 > 其他好文 > 详细

Browserify

时间:2016-03-03 19:26:19      阅读:109      评论:0      收藏:0      [点我收藏+]

标签:

  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

标签:

原文地址:http://www.cnblogs.com/youxin/p/5239527.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!