gulpを使ってES2015+で書いたReactのファイルをトランスパイルする。

日本語がよく分からなくなってきた。「gulpを使ってES2015+で書いたReactのファイルをトランスパイルする。」もっと分かりやすい題にならないのか。

とにかく題の通り環境構築に成功した。失敗の積み重ねの上に成功した。

主にbrowserify周りの失敗だ。なんとなくWebpackが流行っている理由が分かった気がする。

作成したもの

gulp build コマンド

期待する動き

JSX と ES2015+ で書かれた依存関係のあるファイルを、ブラウザで実行可能な bundle.js ファイルとして出力する。

結果

成功

手順など

ROOT_DIRECTORY/
  + node_modules/
  + build/
  + source/
  |   + index.html
  |   + renderer.js
  |
  + gulpfile.babel.js
  + .babelrc
  + package.json

React のファイルを作成する

$ npm install react --save-dev
$ npm install react-dom --save-dev

index.html

React 描画エリアになる要素を作っておく。ここでは <div id="app"></div> のとこ。

React のファイルはコンポーネントごとに分けて作成することになるので、トランスパイル時に bundle.js としてまとめて出力し、それを HTML で読み込む予定。

<!DOCTYPE html>
<html>
<head>
  <title>Nukindex</title>
</head>
<body>
  <div id="app"></div>

  <script src="./renderer/bundle.js"></script>
</body>
</html>

renderer.js

とりあえず簡単なコンポーネントを作ってレンダリングする。

今回の目的はブラウザで読み込んで描画できる形で出力することなので複雑にしない。

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

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Nukindex</h1>
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById("app")
);

gulpfile を設定する。

$ npm install browserify --save-dev
$ npm install babelify --save-dev
$ npm install vinyl-source-stream --save-dev
$ npm install vinyl-transform --save-dev

gulpfile.babel.js

返り値はストリームになるのでそれをパイプしていくとのこと（謎）
gulpデビュー - Nukindex 開発ブログ

これな。。。こうなると思ってたけどstream関係の仕様が謎過ぎてめっちゃ時間かかった。とりあえず中身。

import gulp from "gulp";
import browserify from "browserify";
import babelify from "babelify";
import source from "vinyl-source-stream";
import transform from "vinyl-transform";

gulp.task("build", () => {
  buildHTML();
  buildRenderer();
});

function buildHTML() {
  gulp.src("source/**/*.html")
      .pipe(gulp.dest("build"));
}

function buildRenderer() {
  // ブラウザでも読み込める形にしてくれるやつ。
  // 主に require などで依存関係を持つファイルをうまいこと結合してくれる。
  browserify({
    "entries": ["source/renderer.js"],
    // 指定した拡張子を省略できる。
    // import Abc from "abc.js"; を import Abc from "abc"; と書ける。
    "extensions": ["", ".js", ".jsx"]
  }).transform(babelify).bundle()  // transform も babelify も bundle も謎
      .pipe(source("bundle.js"))  // source も謎
      .pipe(gulp.dest("build/renderer"));
}

ここらへんはググっても「これが正解！」みたいなやり方を見つけられなかった。みんな同じところで同じように困ってるみたい。

gulp.src("source/renderer.js")
    .pipe(babel({
      "target": "browser",
      "presets": ["react", "es2015"]
    })
    .pipe(rename("bundle.js"))
    .pipe(gulp.dest("source/renderer"));

とか

browserify({
  "entries": ["source/renderer.js"],
  "extensions": ["", ".js", ".jsx"],
  "presets": ["react", "es2015"]
})
    .pipe(gulp.dest("build/renderer"));

みたいな感じでシンプルにできるようにしてほしい。。。

.babelrc

わすれがち

{
  "presets": [
    "react",
    "es2015"
  ]
}

ここまでで gulp build コマンドによりブラウザで読み込める bundle.js ファイルを出力することができる。

めんどくさかった上にすっきりしない。

nukindex.com