Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

gulp+browserify+watchify+babelifyを導入してReact.jsのプロジェクトを作る

参考にさせて頂いたページ

以前作ったgulpのプロジェクト

gulpを使う場合

WebPackを使う場合

exorcistについて

「gulp, browserify, vinyl」と「vinyl-source-stream」について

vinyl-bufferについて

.babelrcとbabel-preset-es2015とbabel-preset-reactについて

今日の環境

  • Windows10
  • node v4.4.7
  • npm 2.15.8
  • gulp CLI version 3.9.1
  • browserify 13.0.1
  • その他 package.json 参照

グローバルにインストールするモジュール

gulp

browserify

watchify

babel

プロジェクトにインストールするモジュール

gulp browserify watchify gulp-babel babelify

react react-dom

babel-preset-es2015 babel-preset-react

Babelで書いたReactのJSXがNo Display Nameになる - はらへり日記」によると、「babel-preset-es2015」はES2015のコンパイルに必要とのこと。

「babel-preset-react」はJSXをコンパイルするのに必要とのこと。

gulp-uglify vinyl-source-stream vinyl-buffer

gulp-sourcemaps exorcist

インストールしていく

プロジェクトディレクトリとして、仮にreact-introductionディレクトリを作成して、進めることにする。

まず任意の場所に作成したreact-introductionディレクトリの中でinitして、package.jsonを作る

npm init

グローバルな領域にインストールする。既にインストールしている場合は良い。

npm install -g gulp browserify watchify babel

プロジェクトにインストールする

npm install --save-dev gulp browserify watchify gulp-babel babelify

npm install --save-dev react react-dom

npm install --save-dev babel-preset-es2015 babel-preset-react

npm install --save-dev gulp-uglify vinyl-source-stream vinyl-buffer

npm install --save-dev gulp-sourcemaps exorcist

この段階でのpackage.jsonの記述内容

{
  "name": "react-introduction",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babelify": "^7.3.0",
    "browserify": "^13.0.1",
    "exorcist": "^0.4.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-uglify": "^1.5.4",
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^3.7.0"
  }
}

gulpfile.jsの作成とその記述内容

/************************************************
 * コマンドラインから実行するtaskとその概要
 ************************************************/
 /**
  * コマンド : gulp browserify
  *     - jscompile()を実行
  */

 /**
  * コマンド : gulp watchify
  *     - JS__SRC__PATHの変更をトリガーにして、jscompile()を繰り返し実行
  */



/************************************************
 * モジュール読み込み
 ************************************************/
 var gulp        = require('gulp');
 var babel       = require('gulp-babel');
 var sourcemaps  = require('gulp-sourcemaps');
 var browserify  = require('browserify');
 var watchify    = require('watchify');
 var babelify    = require('babelify');
 var uglify      = require('gulp-uglify');
 var source      = require('vinyl-source-stream');
 var buffer      = require('vinyl-buffer');



/************************************************
 * path設定
 ************************************************/
var JS__SRC__PATH             = './src/js';
var JS__RESULT__PATH          = './result/js'; // 完成品のJSが出力されるディレクトリ



/************************************************
 * tasks
 ************************************************/

/**
 * JS__SRC__PATHに対するコンパイルを一回実行するタスク
 *
 * @return {Object} gulp ストリーム
 */
gulp.task('browserify',function(){
  return jscompile(false);//引数がfalseなので監視しない
});

/**
 * JS__SRC__PATHを監視して、JS__SRC__PATHに対するコンパイルを繰り返し実行するタスク
 *
 * @return {Object} gulp ストリーム
 */
gulp.task('watchify',function(){
  return jscompile(true);//引数がtrueなので監視する
});

// jscompile関数を定義
function jscompile(is_watch){
  // 変数bundlerにwatchify()またはbrowserify()を格納
  var bundler;
  if(is_watch){
    bundler = watchify(browserify(JS__SRC__PATH + '/main.js'));
  }else{
    bundler = browserify(JS__SRC__PATH + '/main.js');
  }
  //関数rebundleを定義
  function rebundle(){
    return bundler
      .transform(babelify, {"presets": ["es2015", "react"]})
      .bundle()
      .on("error", function (err) { console.log("Error : " + err.message); })
      .pipe(source('main.js'))
      .pipe(buffer())
      .pipe(uglify())
      .pipe(gulp.dest(JS__RESULT__PATH));
  }

  bundler.on('update',function(){
    rebundle();
  });
  bundler.on('log',function(message){
    console.log( message );
  });
  return rebundle();
}

./src/js/main.jsの作成とその記述内容

import React from 'react';
import ReactDom from 'react-dom';
import Hoge from './child/react-components/hoge';

ReactDom.render(<Hoge />, document.getElementById('example'));

./src/js/react-components/child/hoge.jsの作成とその記述内容

import React, {Component} from 'react'

export default class Hoge extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return(
      <div className='hoge'>
        hoge element.
      </div>
    );
  }
}

react-introduction.htmlの作成とその記述内容

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>react-tutorial</title>
<link rel="stylesheet" href="">
</head>
<body>

  <div id="example"></div>

<script type="text/javascript" src="./js/main.js"></script>
</body>
</html>

watchifyタスクでビルドしてみる

gulp watchify

できた。

react-introduction.htmlをブラウザで開いてみると、以下の要素が表示されている。

<div data-reactroot="" class="hoge">hoge element.</div>

これでES2015でReact.jsが使える環境が整ったので、今回はここまで。