让Node模块在浏览器运行----browserify

node里可以用npm install 来安装很多的模块到项目 。

但是它们只能在node环境下才能运行。

现在用browserify模块可以实现在浏览器运行node模块。

通过 require('Xx')来加载模块,或自定义模块。

使用:

npm install -g browserify    //安装

创建目录安装 npm install uniq 

创建main.js 

var unique = require('uniq');
var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];
console.log(unique(data));

用node main.js可以看到效果 的。

现在想要浏览器看到效果 :

browserify main.js -o bundle.js   

调用模块生成js文件。在页面里引用生成文件就可以运行了。

----------

这样呢,我们可以为项目 定义一个app.js入口,里边加载模块。实现功能。

最后生成 对象的js。页面引用。

--------------

gulp 中的用法 

生成react

var browserify=require('browserify');
var source=require('vinyl-source-stream');
var reactify=require('reactify');

gulp.task('bro',function(){
	browserify({
		entries:['./app.jsx'],
		transform:[reactify]		
	}).bundle()
	.pipe(source('app.js')).
	pipe(gulp.dest('./'))
})


首先需要安装引用的三个模块

创建一个task

配置browserify:

entries 为处理的jsx

transform是添加处理的模块这里用reactify生成reactjs

bundle()生成

pipe里用source把browserify的文件生成gulp可以读取的js

最后导出




你可能感兴趣的:(让Node模块在浏览器运行----browserify)