Gulp+Browserify 构建 react 项目

本文适用人群:

  • 已经掌握相关 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]);

  前端 gulp react.js