本文适用人群:

  • 已经掌握相关 Gulp 知识
  • 已经或准备开始学习 react.js 知识

react真是一个好东西,不过 组件化开发 会导致最重要引入很多很多的js文件,像这样:

    <script src='js/component1.jsx'></script>
    <script src='js/component2.jsx'></script>
    <script src='js/component3.jsx'></script>
    <script src='js/component4.jsx'></script>

这样子会给以后代码的维护带来一定的麻烦,同时也为客户端访问网页增加了不少的Get请求.

为了消除以上的问题,我们可以使用 browserify 来将所有有依赖关系的js文件打包成单独的一个文件 compile.png

一.代码准备

先写两个简单的react组件:

Child.jsx

    var Child = React.createClass({
      render: function(){
        return (
          <div> The Child </div>
        )
      }
    });
    
    module.exports = Child;

Parent.jsx

    var Child = require('./Child.jsx');
    
    var Parent = React.createClass({
      render: function(){
        return (
          <div>
            <div> Hello World </div>
            <Child/>
          </div>
        )
      }
    });
    
    module.exports = Parent;

然后写主页面(index.html)和主页面的入口文件(app.js)

index.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Webpack Sample Project</title>
    </head>

    <body>
        <div id="app"></div>
        <script src="react.min.js"></script>
        <script src="react-dom.min.js"></script>
        <!--以上两个库去网上随便找下载或者直接使用cdn哈-->
        <script src='js/bundle.js'></script>
        <!--注意这里的bundle.js是之后用gulp+browserify生成的-->
    </body>

</html>

app.js

var Parent = require('./Parent.jsx');
ReactDOM.render(
    <Parent />, 
    document.getElementById('app')
);

二.安装Gulp及其相关依赖

npm install --save-dev gulp browserify vinyl-source-stream babelify babel-preset-react

三.编写 gulpfile.js

var gulp = require("gulp");
    var browserify = require("browserify");
    var babelify = require("babelify");
    var source = require("vinyl-source-stream");
    
    gulp.task('browserify', function(){
      return browserify('./src/js/app.js')
             .transform(babelify,{presets:['react']}) //预处理代码
             .bundle() //打包
             .pipe(source('bundle.js'))
             .pipe(gulp.dest('src/js')); //输出最终文件
    });

然后在命令行中运行 gulp browserify 就可以啦~

bundle.js文件长这样子:

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
    var Child = React.createClass({
      displayName: "Child",
    
      render: function () {
        return React.createElement(
          "div",
          null,
          " The Child "
        );
      }
    });
    
    module.exports = Child;
    
    },{}],2:[function(require,module,exports){
    var Child = require('./Child.jsx');
    
    var Parent = React.createClass({
      displayName: 'Parent',
    
      render: function () {
        return React.createElement(
          'div',
          null,
          React.createElement(
            'div',
            null,
            ' Hello World '
          ),
          React.createElement(Child, null)
        );
      }
    });
    
    module.exports = Parent;
    
    },{"./Child.jsx":1}],3:[function(require,module,exports){
    var Parent = require('./Parent.jsx');
    ReactDOM.render(React.createElement(Parent, null), document.getElementById('app'));
    
    },{"./Parent.jsx":2}]},{},[3]);