你的位置:首页 > Java教程

[Java教程]React+gulp+browserify模块化开发


  阅读本文需要有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-devnpm install react-dom --save-devnpm install reactify --save-devnpm 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的简单项目实例吧。