React+gulp+browserify模块化开发

最新推荐文章于 2024-11-02 19:19:35 发布

weixin_30879169

最新推荐文章于 2024-11-02 19:19:35 发布

阅读量92

点赞数

文章标签： javascript webpack 前端 ViewUI

原文链接：http://www.cnblogs.com/chinajins/p/5594745.html

版权

　　阅读本文需要有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'))//插入到这个目录下
});