使用gulp+Browserify构建React应用

《一》、使用gulp构建React应用

一、React项目结构

.gulpfile.js
./src
    .index.html
    /js
        .App.js
        .Child.js
        .Parent.js

二、代码

index.html 和 js目录下的三个jsx文件如下

//index.html
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="app"></div>
<script src="../../../react/react.min.js" ></script>
<script src="../../../react-dom/react-dom.min.js" ></script>

<script src="js/Child.js"></script>
<script src="js/Parent.js"></script>
<script src="js/App.js"></script>
</body>
</html>
//Child.js
var Child = React.createClass({
    render: function(){
        return (
            <div>
                and this is the <b>{this.props.name}</b>.
            </div>
        )
    }
});
//Parent.js
var Parent = React.createClass({
    render: function(){
        return (
            <div>
                <div> This is the parent. </div>
                <Child name="child"/>
            </div>
        )
    }
});
//App.js
ReactDOM.render(<Parent />, document.getElementById(‘app‘));

??如上，我们创建了Child和Parent两个组件，Parent组件在App.js中被渲染时，将属性child传给子组件同时渲染子组件

三、gulp在开发和生产两套环境下构建

??1、实现功能

a、开发环境

  • 转换三个jsx文件成js文件并保存在dist/js下
  • 复制index.html到dist目录下
  • 监视jsx和html文件，一有变动执行上面转换和复制任务

b、生产环境

  • 转换jsx成js，并合并然后压缩三个js文件成一个build.min.js保存在dist/build目录下
  • 将html中的<script>标签中三个js替换成上面的build.min.js

??2、下载npm包

a、npm init生成package.json文件— —收集应用中node包信息

b、全局安装gulp： npm install --global gulp

c、其他gulp任务必需的安装node包

npm install --save-dev gulp;
npm install --save-dev gulp-concat; //合并
npm install --save-dev gulp-uglify; //压缩
npm install --save-dev gulp-react;  //jsx转js
npm install --save-dev gulp-html-replace;//更换.html文件中内容

??3、gulp任务前需准备项

在gulpfile.js顶部，需加入如下，导入用到的node_module模块

var gulp = require(‘gulp‘);
var concat = require(‘gulp-concat‘);
var uglify = require(‘gulp-uglify‘);
var react = require(‘gulp-react‘);
var htmlreplace = require(‘gulp-html-replace‘);

在深入构建不同gulp之前，需创建一个路径项，指定用到的输入文件和输出的文件路径

//指定文件输入和输出路径
var path = {
    HTML: ‘src/index.html‘,
    ALL: [‘src/js/*.js‘, ‘src/js/**/*.js‘, ‘src/index.html‘],
    //【注意】一个个按顺序地指定js，因为默认*.js默认按abc..xyz顺序拼接成build.min.js
    JS: [‘src/js/Child.js‘, ‘src/js/Parent.js‘, ‘src/js/App.js‘],
    MINIFIED_OUT: ‘build.min.js‘,
    DEST_SRC: ‘dist/js‘,
    DEST_BUILD: ‘dist/build/‘,
    DEST: ‘dist‘
};

??4、开发环境的gulp任务

a、transform转换任务；将jsx转换成js

//jsx转换成js任务
gulp.task(‘transform‘, function(){
    gulp.src(path.JS)
        .pipe(react())
        .pipe(gulp.dest(path.DEST_SRC));
});

b、copy复制任务；将index.html复制到dist目录下

//复制index.html文件
gulp.task(‘copy‘, function(){
    gulp.src(path.HTML)
        .pipe(gulp.dest(path.DEST));
});

c、watch监视任务；

//监视path.ALL下所有文件，一有变动执行transform任务和copy任务
gulp.task(‘watch‘, function(){
    gulp.watch(path.ALL, [‘transform‘, ‘copy‘]);
});

d、默认启动任务

//默认任务；启动监视任务并执行transform和copy任务
gulp.task(‘default‘, [‘watch‘,‘transform‘, ‘copy‘]);

??5、生产环境的gulp任务

a、build任务；该任务将三个js文件按指定顺序(path中的JS)合并成一个文件，然后压缩成build.min.js放在dist/build目录下

gulp.task(‘build‘, function(){
    gulp.src(path.JS)
        .pipe(react())
        .pipe(concat(path.MINIFIED_OUT))
        .pipe(uglify(path.MINIFIED_OUT))
        .pipe(gulp.dest(path.DEST_BUILD));
});

b、更替html中的script任务；替换三个<script>标签成<script src=”build/build.mins.js”>并将index.html文件输入到dist目录

首先需要更替的js需包裹成如下(index.html中)

<!-- build:js -->
<script src="js/Child.js"></script>
<script src="js/Parent.js"></script>
<script src="js/App.js"></script>
<!-- endbuild -->

gulpfile文件中更替任务

gulp.task(‘replaceHTML‘, [‘build‘], function(){
    gulp.src(path.HTML)
        .pipe(htmlreplace({
            ‘js‘: ‘build/‘ + path.MINIFIED_OUT
        }))
        .pipe(gulp.dest(path.DEST));
});

包装启动生产任务

gulp.task(‘production‘, [‘replaceHTML‘]);

源码地址：https://github.com/mqy1023/react-basejs/tree/master/src/demo2

《二》、使用gulp + Browserify构建React应用

1、为什么使用Browserify？

??上面纯gulp实现React应用有一些缺点，会注意到App.js Parent.js Child.js因为加载顺序问题需要小心翼翼添加(如：Child.js必须在Parent.js前加载，因为Parent.js依赖Child.js，同样App.js要在Parent.js加载后)；还有当你调试时在jsx中加入debugger，浏览器加载的是jsx转换后的js，所以调试时我们不能定位到原jsx中的具体位置，这对于我们来说很不理想。

2、理解Browserify

??Browserify能帮我们解决上述&其他更多问题。Browserify工具可以让我们类似commonjs模块化加载，即React组件中可以require进其他React组件；模块化改造的js （【注意】module.exports & require & 木有.js后缀）：

//Child.js文件
var Child = React.createClass({
    render: function(){
        return (
            <div>
                and this is the <b>{this.props.name}</b>.
            </div>
        )
    }
});
module.exports = Child;
//App.js文件
var Child = require(‘./Child‘);
var Parent = React.createClass({
    render: function(){
        return (
            <div>
                <div> This is the parent. </div>
                <Child name="child"/>
            </div>
        )
    }
});
module.exports = Parent;
//Math.js
var Parent = require(‘./Parent‘);
ReactDOM.render(<Parent />, document.getElementById(‘app‘));

一、实现功能

a、开发环境

  • 连接起js文件
  • 转换jsx成js
  • 保存在dist目录

b、生产环境

  • 转换jsx成js，并实现合并后压缩，输出到dist目录

二、Browserify + Gulp + React (Development Tasks)开发环境下的tasks

1、卸载gulp-concat

npm uninstall gulp-concat;

2、安装新的NPM包

首先npm install -g browserify全局安装browserify

//others
npm install vinyl-source-stream --save-dev
npm install browserify --save-dev
npm install watchify --save-dev
npm install reactify --save-dev
npm install gulp-streamify --save-dev

【注意】吓尿了。–save-dev要放在后面才行，不明觉厉。。如：npm install --save-dev browserify; //报找不到文件

3、gulpfile导入模块和指定路径

var gulp = require(‘gulp‘);
var uglify = require(‘gulp-uglify‘);
var htmlreplace = require(‘gulp-html-replace‘);
var source = require(‘vinyl-source-stream‘);
var browserify = require(‘browserify‘);
var watchify = require(‘watchify‘);
var reactify = require(‘reactify‘);
var streamify = require(‘gulp-streamify‘);

var path = {
  HTML: ‘src/index.html‘,
  MINIFIED_OUT: ‘build.min.js‘,
  OUT: ‘build.js‘,
  DEST: ‘dist‘,
  DEST_BUILD: ‘dist/build‘,
  DEST_SRC: ‘dist/src‘,
  ENTRY_POINT: ‘./src/js/App.js‘
};

4、copy任务

gulp.task(‘copy‘, function(){
  gulp.src(path.HTML)
    .pipe(gulp.dest(path.DEST));
});

5、watch主任务

gulp.task(‘watch‘, function() {
  gulp.watch(path.HTML, [‘copy‘]);

  var watcher  = watchify(browserify({
    entries: [path.ENTRY_POINT], //入口.js
    transform: [reactify],//jsx转换成js，调试能定位显示原jsx错误具体位置
    debug: true,
    cache: {}, packageCache: {}, fullPaths: true //watchify官网显示此行必须
  }));

  return watcher.on(‘update‘, function () { //更新
    watcher.bundle()
      .pipe(source(path.OUT))
      .pipe(gulp.dest(path.DEST_SRC))
      console.log(‘Updated‘);
  })
    .bundle() //一执行gulp watch，需要bundle和pipe itself to the dist目录
    .pipe(source(path.OUT))
    .pipe(gulp.dest(path.DEST_SRC));
});

6、default任务

gulp.task(‘default‘, [‘watch‘]);

三、Browserify + Gulp + React (Production Tasks)生产环境下的tasks

任务都差不多，这里不再赘述

/***************生产版**********
gulp.task(‘build‘,  function(){
    browserify({
        entries: [path.ENTRY_POINT],
        transform: [reactify]
    })
        .bundle()
        .pipe(source(path.MINIFIED_OUT))
        .pipe(streamify(uglify(path.MINIFIED_OUT)))
        .pipe(gulp.dest(path.DEST_BUILD));
});

gulp.task(‘replaceHTML‘, function(){
    gulp.src(path.HTML)
        .pipe(htmlreplace({
            ‘js‘: ‘build/‘ + path.MINIFIED_OUT
        }))
        .pipe(gulp.dest(path.DEST));
});

gulp.task(‘production‘, [‘replaceHTML‘, ‘build‘]);

源码地址：https://github.com/mqy1023/react-basejs/tree/master/src/demo3


参考链接：

http://tylermcginnis.com/reactjs-tutorial-pt-2-building-react-applications-with-gulp-and-browserify/

建议英文可以查看原文，老外的文章就是有很多有用的”废话”；有点遗憾的是，该文章中有些错误，可以老外原文的评论就知道，不知道为什么作者一直没改；本文已针对本人发现的错误做了改正，照着老外原文出错的地方可以回到本文找到解决方案的哈

时间： 2024-10-28 14:56:10

使用gulp+Browserify构建React应用的相关文章

使用Webpack构建React应用

前面写过一遍<使用gulp+Browserify构建React应用>,本文来看看更强大的构建工具- -Webpack.先来看看webpack强大之处介绍 1.将css.图片以及其他资源打包到同一个包中 2.在打包之前对文件进行预处理(less.coffee.jsx等) 3. 根据入口文件的不同把你的包拆分成多个包 4.支持开发环境的特殊标志位 5.支持模块代码"热"替换 6.支持异步加载 ??Webpack不仅帮助你打包所有的Javascript文件,还拥有其他应用需要的资

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&amp;browserify篇

 随着web应用的发展,前端的比重占得越来越多,编写代码从而也越来越复杂.而通常我们需要将不同功能或者不同模块的代码分开写,最后在html中一起加载,这样做是可以的,但是当你需要进行维护或者是二次开发的时候,你会觉得十分费劲,因为你不知道文件之间复杂的关系,所以我们需要利用一些插件来配合进行模块化的开发. 所谓模块化的开发,写过nodejs的人都知道,文件之间的依赖可以用require()实现,但是浏览器端是不支持这样的依赖形式的,而browserify却可以解决这个问题,再加上gulp这个强大

gulp进阶构建项目由浅入深

阅读目录 gulp基本安装和使用 gulp API介绍 Gulp.src(globs[,options]) gulp.dest(path[,options]) gulp.task(name[,deps],fn); gulp.watch(glob[,opts],tasks) gulp一些常用插件 gulp-rename(重命名) gulp-uglify(JS压缩) gulp-minify-css(css文件压缩) gulp-minify-html(html压缩) gulp-concat(JS文件合

【React】使用 create-react-app 快速构建 React 开发环境

create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + ES6 . 1.$ cnpm install -g create-react-app 2.$ create-react-app my-app 3.$ cd my-app/ $ npm start 项目目录 create-react-app 执行慢的解决方法

gulp+webpack构建前端项目

本文将介绍如何利用gulp+webpack构建一个基本的前端项目.假设你已经安装了node环境并且会使用简单的命令行 1.gulp安装 (1)全局安装 npm install gulp -g (2)查看gulp是否安装成功 gulp -v (3)进入本地目录,新建gulpfile.js 2.安装gulp-webpack插件 基于gulp的插件非常多,建议大家查看npm官网https://www.npmjs.com (1)安装 webpack的用途主要是模块化+打包.安装敲入命令 npm inst

做一个合格的前端，gulp自动化构建工具入门教程

我的新作观点网http://www.guandn.com (观点网是一个猎获新奇.收获知识.重在独立思考的网站),它前端js.css的压缩.合并.md5命名等就使用了gulp自动化构建技术,gulp很小巧使用起来很舒服.ps:接下来我会逐一开源观点网开发过程中的前后端技术,如:lucene全文索引.自定义富文本编辑器.图片上传压缩水印等等. 一.什么是gulp gulp是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.例如:css.js的合并与压缩(减少http请求,缩小文

使用create-react-app 快速构建 React 开发环境以及react-router 4.x路由配置

create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + ES6 执行命令如下: npm install create-react-app -g // 全局安装create-react-app,如果不想全局安装,则不要-g.可能会很慢,可以使用cnpm来安装 create-react-app my-app // my-app是项目名 cd my-app np

快速构建 React 开发环境

使用 create-react-app 快速构建 React 开发环境 create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + ES6 . 执行以下命令创建项目: $ cnpm install -g create-react-app $ create-react-app my-app $ cd my-app/ $ npm start npm 安装资源国内慢