参考にさせて頂いたページ
以前作った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が使える環境が整ったので、今回はここまで。
