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 ファイルを出力することができる。
めんどくさかった上にすっきりしない。
gulpデビュー
「Reactデビュー」と言う題で書き始めたが、道が遠いので「gulpデビュー」に変えた。
gulpというのはタスクランナーの一種で、現在最も主流であるらしい。 感覚的には開発の面倒なことを自動化してくれるお助けツールだ。 一部では脱gulpの動きもあるようだが、どうも便利そうなので使っておきたい。
作成したもの
gulp build
コマンド
期待する動き
source ディレクトリのファイルを build ディレクトリへ移動する
結果
成功
手順など
npmの初期化
> npm init
gulp のパッケージをインストール
gulp 自体も ES2015+ で書きたいのでそのためのパッケージもインストール
> npm install babel --save-dev > npm install babel-preset-es2015 --save-dev > npm install gulp --save-dev > npm install gulp-babel --save-dev
必要なディレクトリ、ファイルを作成
ROOT_DIRECTORY/ + node_modules/ + build/ + source/ | + index.html | + gulpfile.babel.js + .babelrc + package.json
.babelrc
babel の設定ファイル。 babel は ES2015+ で書かれたJSファイルを古い環境でも実行できるように変換するツール。
{ "presets": [ "es2015" ] }
gulpfile.babel.js
gulp
コマンドの設定ファイル。
import gulp from "gulp"; // この部分が gulp build コマンドで動く gulp.task("build", () => { buildHTML(); }); function buildHTML() { // gulp で操作する対象ファイルを指定 // 返り値はストリームになるのでそれをパイプしていくとのこと(謎) gulp.src("source/**/*.html") // 最後は出力先を指定する .pipe(gulp.dest("build")); }
返り値はストリームになるのでそれをパイプしていくとのこと(謎)
ここな。このブラックボックス感が嫌でいつもライブラリ使わずにフルスクラッチしてるんだけど。
でもそんなこと言い出したらマシン語まで理解しないといけないような気もしてきた。 どこで妥協するかの問題か。
ここまでで gulp build
コマンドが通って期待どおりの動きとなった。
調べながらだと時間がかかる。
Reactデビューしたい
Nukindexについて
僕が携帯電話をはじめて手にした高校1年生の時、僕はインターネットに出会った。
小さい画面の中に広がる情報の海のただ中で、僕は「掲示板検索」と検索し、そこで「エッチなワード 3gp」「エッチなワード 3g2」などと打ち込んでは新しいエッチなワードと出会い、新しく出会ったそのエッチなワードを打ち込んでは更なるエッチなワードと出会う、という冒険をしていた。
月の通信料が10万円を超えてお年玉の貯金がすべて無くなり、親に金借用書を書いたあの日。もう10年以上前の話である。
光回線&WiFiなどの通信インフラの充実やスマートフォンの普及によって、10年前と比べるとインターネットへのアクセスは格段に便利になり、インターネット上のアダルトコンテンツの量は日々増大している。
僕は相変わらず毎日エッチな動画を探している。
数えてはいないが、毎日数十ページのリンクをたどり、十数個の動画を見ている。不毛な努力である。趣味はエロ動画検索です、と言っても良い。
この努力を社会貢献に役立てたいわけではない。ただ、僕自身を含めた同好の士に向けて。努力しない日があってもいいじゃないか。と、そういうメッセージを込めて。
抜けるコンテンツを抜きやすいように提供する。
これがNukindexの使命である。