阅读本文需要有React的基础知识，可以在React 入门实例教程和React中文官网进行基础学习。

　　没有React基础也可以学习本文，本文主要不是学习React，而是gulp+browserify进行模块化开发。

1.创建项目和环境搭建

　　我们可以先创建一个文件夹叫react_item,作为项目的根目录。

　　打开命令行，cd到项目的根目录下，我们需要通过npm安装gulp，输入：

npm install gulp -g--save-dev

　　Tip:没有安装node.js的朋友可以进入node.js中文网下载

　　gulp是前端项目的自动化构建工具，可以让我们方便的管理自己的项目，节约了我们大量的时间，详情见gulp中文网

　　接下来还需要安装browserify，和上面一样，通过npm去安装：

npm install browserify --save-dev

　　因为项目使用React进行开发，需要要安装react.js和react-dom.js。正常情况下我们不会把JS文件放在浏览器端用browser.js去编译，所以需要在本地安装reactify插件，把JSX编译成JS。我们还需要一个插件，用来把我们得到的代码转换成文件流，生成JS文件，这里使用vinyl-source-stream插件。

　　附上安装以上文件的代码：

npm install react --save-dev

npm install react-dom --save-dev

npm install reactify --save-dev

npm install vinyl-source-stream --save-dev

　　到此为止，我们项目的环境算了搭建完成了！

2.项目的部署

　　先附上项目根目录的结构图：

　　

　　我们要生成一个npm的初始化文件，以便于项目的管理，cd到项目根目录，输入：

npm init

　需要输入项目名称，项目版本号...（随便输入，无所谓）

　　输入完，你就会发现在你项目下会自动生成一个package.json文件，打开可以发现，里面是npm对于项目的一些基本配置。

　　接下来，我们打开app文件夹，在app文件夹下新建两个JS文件，分别为：layout.js和list.js，分别加入以下内容：

layout.js

var React = require('react');

var ReactDOM = require("react-dom");

var List = require("./list.js");

var Layout = React.createClass ({

    render:function(){

        return (

            <div>

                this is Layout

                <List/>

            </div>

        )

    }

})

ReactDOM.render(<Layout/>,document.body);

list.js

var React = require('react');

var List = React.createClass ({

    render:function(){

        return (

            <div>

                this is List

            </div>

        )

    }

})

module.exports=List;

　　经常使用node.js的朋友应该很熟悉里面的require和module.exports语句，require是用来请求一个文件或模块，module.exports是给当前模块设置一个对外接口，这样，其他的文件就能够通过这个接口直接require请求到这个模块了。

　　分析一下上面的代码，首先，我们在layout.js中请求了react和react-dom，和node.js一样，这里可以不用加.js后缀。还请求了list.js这个文件，因为下面我们要把list.js中的List组件插入到Layout组件中。

　　在list.js中，我们只引入了react，因为List组件不负责渲染的工作，它只需要生成虚拟DOM，并插入到Layout组件中，最后，把List组件设置成对外接口。

　　因为layout.js需要把元素插入到body内，我们需要在build文件夹内新建一个index.html，内容如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>React+gulp+borwserify</title>

</head>

<body>

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

</body>

</html>

　　这里引入了一个app.js的文件，我们会把最终的代码放到app.js中，请跟着我耐心往下看。

　　做完了这些，大家可能会想，我们是在写项目中的JS啊，并不是在写Sea.js之类的JS管理依赖文件，这些require和module.exports由谁去编译呢？

　　好的，下面我们就开始配置browserify了！

3.browserify的配置

　　我们在根目录下创建一个gulp的配置文件：

// gulp只负责文件执行功能

var gulp = require('gulp');

//browserify负责各个模块的依赖关系

var browserify = require('browserify');

//reactify 负责把JSX内容转换成浏览器可以识别的JS内容

var reactify = require('reactify');

//vinyl-source-stream是一个文件流的处理插件

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

//执行gulp命令

gulp.task('merge',function(){

    return browserify('build/layout.js')

    //这里是browserify需要管理的文件，因为layout.js依赖list.js

    //所以browserify会自动引入list.js

    .transform(reactify)//browserify下的转换功能，我们把reactify传入，表示把JSX转换成JS

    .bundle()//把所有JS代码合并成一个文件，包括react等依赖的文件，这里返回的是一个字符串

    .pipe(source('app.js'))//转换成文件流

    .pipe(gulp.dest('app'))//插入到这个目录下

});

　　上面的注释把每一步操作都做了解释，可能大家觉得很复杂，但是其实实际项目的开发中，只需要配置一次，你只需要把这段代码copy过去，按照你的项目路径修改一下就行了。

　　接下来就cd到根目录，运行gulp，在需要在命令行输入：

gulp merge

　　等待几秒钟，执行完毕后进入app目录下，你会看到一个app.js的文件，这个文件里集成了layout.js运行所依赖的组件和模块的所有代码

　　现在，只要运行index.html，如果你看到如下页面，那说明成功了！

　　

4.总结

　　直接在项目JS文件中使用require和module.exports命令，是不是很爽啊，这样就不用再一个个的引入文件了，而且还自动编译了JSX。

　　gulp+browserify并不是专门供React使用的，所有项目都可以使用它，相比较Sea.js和Require.js，它的优势在于，能在引入模块和文件的过程中做一些事。

　　不过真正的React项目开发，还是使用webpack去管理项目比较好，毕竟这是FB专门为React量身定制的，下次有时间再写个webpack+react的简单项目实例吧。

React+gulp+browserify模块化开发的更多相关文章

  1. 前端模块化开发学习之gulp&browserify篇

     随着web应用的发展,前端的比重占得越来越多,编写代码从而也越来越复杂.而通常我们需要将不同功能或者不同模块的代码分开写,最后在html中一起加载,这样做是可以的,但是当你需要进行维护或者是二次开发 ...

  2. 前端模块化开发篇之grunt&webpack篇

    几个月前写了一篇有关gulp和browserify来做前端构建的博客,因为browserify用来做js的打包时可能有些麻烦(特别是在写React的时候),所以这里再强烈推荐一款js打包工具-webp ...

  3. 【转】使用gulp 进行ES6开发

    原谅地址:https://segmentfault.com/a/1190000004394726 一说起ES6,总会顺带看到webpack.babel.browserify还有一些认都不认识的blab ...

  4. seajs进行模块化开发

    seajs进行模块化开发 模块化前端开发入门指南(二) 2015-08-26 15:23 by paseo, 370 阅读, 0 评论, 收藏, 编辑 概览 使用seajs模块化加载器进行模块化开发, ...

  5. 基于Gulp + Browserify构建es6环境下的自动化前端项目

    随着React.Angular2.Redux等前沿的前端框架越来越流行,使用webpack.gulp等工具构建前端自动化项目也随之变得越来越重要.鉴于目前业界普遍更流行使用webpack来构建es6( ...

  6. JAVAScript：前端模块化开发

    目录 一:前端模块化概要 1.1.模块化概要 1.2.函数封装 1.3.对象封装 1.4.立即执行函数表达式(IIFE) 1.5.模块化规范 1.5.1.CommonJS 1.5.2.AMD((Asy ...

  7. JavaScript学习总结(六)——前端模块化开发

    早期的javascript版本没有块级作用域.没有类.没有包.也没有模块,这样会带来一些问题,如复用.依赖.冲突.代码组织混乱等,随着前端的膨胀,模块化显得非常迫切. 前端模块化规范如下: 一.前端模 ...

  8. 使用gulp 进行ES6开发

    使用gulp 进行ES6开发 一.新建项目 项目结构如下: /app -- /js -- /css /dist -- /js -- /css -- index.html gulpfile.js 我们的 ...

  9. 实例讲解基于 React+Redux 的前端开发流程

    原文地址:https://segmentfault.com/a/1190000005356568 前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 s ...

随机推荐

  1. Android Binder机制中的异步回调

    “Binder通信是同步而不是异步的”,但是在实际使用时,是设计成客户端同步而服务端异步. 看看Framwork层的各service类java源码便会知道,在客户端调用服务端的各种方法时,通常会传递一 ...

  2. 03-CSS中的选择器

    高级选择器分为: 后代选择器 子代选择器 并集选择器 交集选择器 后代选择器 使用空格表示后代选择器 , 顾名思义  父元素的后代(包括儿子,孙子,重孙子) 中间空格隔开 是后代 .container ...

  3. 配置key认证登陆Ubuntu （下）

    梗概: 使用证书登陆,可以减少密码的使用,避免密码泄露,证书登陆更加方便.安全. Secure CRT 和Putty 原理相同,生成 密钥对(Key pair)操作有所不同. 1.生成key pair ...

  4. oracle——存储过程参数

    oracle 存储过程类型: 1.in:输入类型,即由应用程序将数据传入oracle存储过程中:这种参数在存储过程中是只读参数,在存储过程中无法对该类型的参数进行修改: 2.out:输出参数,是在存储 ...

  5. 主表当中明细表字段的金额计算问题，操作控件是在gridview+aspnetPage

    做这个例子,主要是我在工作当中遇到一个主表的明细表的操作计算问题,也用了不少时间.操作计算的方式是这样的. 这个功能是在.net语言当中实现,操作过程当点击添加行,添加第一行时,当我输入金额的时候,累 ...

  6. Win10系统windows mobile设备中心无法连接WinCE采集器

    1.开始-->运行,输入services.msc回车 2.在打开的服务界面中,找到“基于Windows Mobile 2003的连接设备” 3.右击属性,修改成自动 4.点击登陆选项卡,选择本地 ...

  7. How to fix apt-get GPG error NO_PUBKEY Ubuntu 14

      This morning when I do apt-get update on my new Ubuntu 14.04 server, I got these error messages: R ...

  8. 当一个SQL语句同时出现了where,group by,having,order by的时候，执行顺序和编写顺序

    当一个查询语句同时出现了where,group by,having,order by的时候,执行顺序和编写顺序 1.执行where xx对全表数据做筛选,返回第1个结果集. 2.针对第1个结果集使用g ...

  9. 使用DevStack安装openstack（单机环境）

    DevStack是一系列可扩展的脚本,用于根据git master的最新版本快速启动完整的OpenStack环境.它以交互方式用作开发环境,并作为OpenStack项目功能测试的基础. 参考源码. 警 ...

  10. libevent源码深度剖析一

    libevent源码深度剖析一 ——序幕 张亮 1 前言 Libevent是一个轻量级的开源高性能网络库,使用者众多,研究者更甚,相关文章也不少.写这一系列文章的用意在于,一则分享心得:二则对libe ...