`

Browserify 跑在浏览器上的Node程序(转)

 
阅读更多

文章源自:http://blog.fens.me/nodejs-browserify/

 

从零开始nodejs系列文章，将介绍如何利Javascript做为服务端脚本，通过Nodejs框架web开发。Nodejs框架是基于V8的引擎，是目前速度最快的Javascript引擎。chrome浏览器就基于V8，同时打开20-30个网页都很流畅。Nodejs标准的web开发框架Express，可以帮助我们迅速建立web站点，比起PHP的开发效率更高，而且学习曲线更低。非常适合小型网站，个性化网站，我们自己的Geek网站！！

 

前言

Nodejs的出现，为Javascript开辟了一条新的大路，让Javascript获得了新生。虽然Nodejs也基于Javascript语法和解释器，但是前后端各自有各自的库，无法重用真的很不舒服。

Browserify 通过预编译的方法，让Javascript前端可以直接使用Node后端的程序。我们可以用一套代码完成前后端，不仅工作量变少了，程序重用性增强，还可以直接在浏览器中使用大量的NPM第三方开源库的功能。

Web时代，将是我们创新与创造的新起点。

目录

  1. Browserify介绍
  2. Browserify安装
  3. Browserify命令行参数
  4. 在浏览器中运行Nodejs程序
  5. 在浏览器中模块化调用Nodejs程序

1. Browserify介绍

Browserify的出现可以让Nodejs模块跑在浏览器中，用require()的语法格式来组织前端的代码，加载npm的模块。在浏览器中，调用browserify编译后的代码，同样写在<script>标签中。

用 Browserify 的操作，分为3个步骤。

  • 1. 写node程序或者模块
  • 2. 用Browserify 预编译成 bundle.js
  • 3. 在HTML页面中加载bundle.js

Browserify 的发布页：http://browserify.org/

2. Browserify安装

Browserify安装: sudo npm install -g browserify

3. Browserify命令行参数

  • –outfile, -o: browserify日志打印到文件
  • –require, -r: 绑定模块名或文件，用逗号分隔
  • –entry, -e: 应用程序的入口
  • –ignore, -i: 省略输出
  • –external, -x: 从其他绑定引入文件
  • –transform, -t: 对上层文件进行转换
  • –command, -c: 对上层文件使用转换命令
  • –standalone -s: 生成一个UMB的绑定的接口，提供给其他模块使用。
  • –debug -d: 激活source maps调试文件
  • –help, -h: 显示帮助信息

高级命令：browserify --help advanced

  • –insert-globals, –ig, –fast: 跳过检查，定义全局变量。[default:false]
  • –detect-globals, –dg: 检查全局变量是否存在。 [default:true]<
  • –ignore-missing, –im: 忽略require()函数。[default: false]
  • –noparse=FILE: 不解析文件，直接build。
  • –deps: 打印完整输出日志
  • –list: 打印每个文件的依赖关系
  • –extension=EXTENSION: 指名扩展名的文件做为模块加载，允许多次设置

4. Browserify使用：在浏览器中运行Nodejs程序

新建4个文件：

  • multiply.js: 乘法计算
  • square.js: 平方计算，依赖multiply.js
  • index.js: node启动程序，调用square.js
  • index.html: 用于显示的HTML网页

新建文件：multiply.js

 

module.exports = function (a, b) {
    console.log("js:multiply");
    return a * b;
};

 新建文件：square.js

 

 

var multiply = require('./multiply');
module.exports = function (n) {
    console.log("js:square");
    return multiply(n, n);
};

 新建文件：index.js

 

 

var square = require('./square');
console.log("js:index");
console.log(square(125));

 在node环境中运行

 

 

node index.js

 用browserify编译index.js文件到bundle.js

 

 

browserify index.js > bundle.js

 新建文件：index.html

 

 

<!DOCTYPE html>
<html>
<head>
<title>Browserify</title>
<style>input{width:50px;}</style>
</head>
<body>
<h1>Browserify</h1>
<script src="bundle.js"></script>
</body>
</html>

 在index.html中，我们加载刚才生成的bundle.js文件。

 

5. 在浏览器中模块化调用Nodejs函数

新建文件：

  • multiply.js: 同上面的文件
  • module.html: 用于显示的HTML网页

用browserify编译multiply.js文件到bundle.js，作为模块

 

browserify -r ./multiply.js > bundle.js

 新建文件：module.html

 

 

<!DOCTYPE html>
<html>
<head>
<title>Browserify</title>
<style>input{width:50px;}</style>
</head>
<body>
<form>
<p>
<input type="text" id="x" value="2"/> * <input type="text" id="y" value="3" /> = <span id="result"></span>
</p>
<input type="button" onclick="add()" value="M1"/>
<input type="button" onclick="add2()" value="M2"/>
</form>
<script src="bundle.js"></script>
<script>
function add(){
var x = parseInt(document.querySelector('#x').value);
var y = parseInt(document.querySelector('#y').value);
console.log(x*y);
document.querySelector('#result').innerHTML=x*y;
}

var m = require('/multiply.js');
function add2(){
var x = parseInt(document.querySelector('#x').value);
var y = parseInt(document.querySelector('#y').value);
console.log(m);
console.log(x*y);
document.querySelector('#result').innerHTML=m(x,y);
}
</script>
</body>
</html>

 在浏览器中打开module.html：

  • 点击M1，通过add1函数计算出6
  • 点击M2，通过add2函数，调用bundle.js中的multiply.js的函数，计算出6

 

 

分享到：
| Java:对象的强、软、弱和虚引用
评论
发表评论

文章已被作者锁定，不允许评论。

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics