参考にさせて頂いたページ
以前作ったgulpのプロジェクト
gulpを使う場合
WebPackを使う場合
exorcistについて
「gulp, browserify, vinyl」と「vinyl-source-stream」について
vinyl-bufferについて
.babelrcとbabel-preset-es2015とbabel-preset-reactについて
今日の環境
グローバルにインストールするモジュール
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が使える環境が整ったので、今回はここまで。