パッケージの導入

ターミナル立ち上げて各々のモジュールをインストール。

React

ReactとReactDOMをインストール

npm install --save-dev react react-dom

Bebel

ES2015,ES2016で書かれたコードをブラウザで解釈できるコードに変換するツール。

npm install --save-dev babelify

React用のbabelのプリセットをインストール

npm install --save babel-preset-react //JSX記法のコンパイル
npm install --save-dev babel-preset-es2015 //ES2015記法を利用する場合

browserify

複数のjavascriptファイルの依存関係を克服して1つのjavascriptファイルにまとめてくれる。

npm install --save-dev browserify

vinyl-source-stream

browserifyのbundle()で吐き出されたオブジェクトがvinyl形式ではないのでvinyl形式に変換しなければならない。
gulpはvinylオブジェクトをイジイジしてファイルを書き出しているので、その過程でvinylオブジェクトが存在しなければならない。
そのため、このパッケージをインストールする必要がある。

$ npm install --save-dev vinyl-source-stream

browserifyの記述方法

jsファイルを複数にまとめて一つに統合できる。

例)　二つの数値を足し合わせた値を返す処理を別ファイル(add.js)に記述し、その処理を統合元のjsファイル(main.js)から実行する。

script-add.js

//addメソッドをexports(アロー関数)
export const add = (a, b) => {
  return a + b;
}

main.js

const add = require("./script-add.js"); //外部のjsファイルを参照

console.log("合計値："　+ add.add(20,50)); //script-add.jsのaddメソッドを実行

gulpfile.jsの作成

編集元のjsファイルを保存したら以下の処理を自動で実行してくれるタスクを導入

ES2015記法をbabelでコンパイルする
browserifyで一つのファイルにまとめる
最終的なjsファイルのアウトプットをdestディレクトリに吐き出す
destファイルに生成されたjsファイルを圧縮する

gulpfile.js

var gulp = require("gulp");
var uglify = require("gulp-uglify");
var source = require('vinyl-source-stream');
var browserify = require("browserify");
var rename = require("gulp-rename");
var plumber = require('gulp-plumber');
var browserSync = require("browser-sync");
var runSequence = require("run-sequence");


gulp.task("js", function(callback) {
  return runSequence("browserify","js-min",callback);
});

gulp.task("browserify", function(callback) {
  console.log("---------- babel-browserify ----------");
  return browserify(src.js + "main.js", { debug: true })
  .transform("babelify", {presets: ["es2015", "react"]})
  .bundle(function(err){
    if(err){
      //エラー時でもgulpのwatchタスクを終了させない措置
      return callback(err)
    }
  })
  .on('error', function(err){
    //jsの記法でエラーがあればログを吐き出す
    console.log("JSのエラー："　+ err.message);
    console.log(err.stack);
  })
  .pipe(source('main.js'))
  .pipe(plumber({
    errorHandler: notify.onError("Error: <%= error.message %>")
  }))
  .pipe(gulp.dest(dest.js));
});

//圧縮
gulp.task("js-min", function() {
  console.log("---------- js圧縮 ----------");
  gulp.src(dest.js + "**/*.js")
  .pipe(plumber({
    errorHandler: notify.onError("Error: <%= error.message %>")
  }))
  .pipe(uglify())
  .pipe(rename({ extname: ".min.js" }))
  .pipe(gulp.dest(dest.jsmin))
  .pipe(browserSync.reload({stream:true}));
});

reactを記述

React,ReactDOMをインポートする

import React from "react";
import ReactDOM from "react-dom";

DOMを描画する処理を入れる。

ReactDOM.render(
  <h1>ハロー世界！！</h1>,
  document.querySelector("#wrapper") //#wrapper内を<h1>ハロー世界！！</h1>に書き換える
);

react.jsの導入(Babel + browserify + Gulp)