【ES6+】React + Babelifyでブラウザで動くアプリをnpm scriptで環境構築
タイトル通り。
愚痴というか背景というか
フロントエンドに限った話ではないが、環境構築が大変なことが多い。 サンプルとしてWeb上にあるものも、自分が実現したいことの組み合わせが存在しなかったり、そもそも単純な例だけだったり。 また、今日のフロントエンドの環境構築はgulpやらgrunt, webpackなど多様だったりする。これらを使用するのがデファクトスタンダードだというのはわかるのだけど、単純なレベルでもこれらを導入するのが普通だ！みたいなのはその業界以外の人間には割と真面目に辛かったりする。今回の内容とは外れるけどScalaのsbtも大変だった。JavaのMavenもアレだけど。
遊ぶだけならCDNからReactのライブラリを読み込んでHTMLでscriptタグに書いて…みたいなことで十分だし（どの記事か忘れたけどQiitaで見た記憶がある。できるらしい。）。
実務で使用するレベルでも、小規模なら特に必要がないから猶更だったりする。
まあ、必要がないってわかったのは今回いろいろ調べて構築したからなのだけど。
タスクランナー嫌ってnpm scriptのみでやっている人は一定数存在することがわかってちょっと安心ｗ
本題
使用する環境や言語、プラグイン、テーマはこんな感じ。
- React(ES6+)
- Babel ※ babelify
- Browserify
- Polyfill
- CSS Modules
- npm
これを書いている人間の開発環境も一応乗せておこう。バージョン違いでビルド通らないこととかるし。
- OS: Windows10 Pro
- console: Git Bash
- node --version : v10.15.3
- npm --version : 6.4.1
前提
- ReactはJSXを使用する
- ↑のせいでどうせbabelを使用するならそれなりに古いブラウザへの互換性も考慮する（IE11とかモバイルとか）
※ 逆を言えば、この前提を無視できる状況（モダンブラウザ + JSX無し）なら、Babelいらない気が…。もっと単純化できそう。
React + babelの準備
公式を参照する
とりあえず導入
$ pwd /d/s_react $ npm init ## 色々聞かれるけど後で手動変更するので全てEnterでOK ## 公式にある browserify script.js -o bundle.js -t [ babelify --presets [ @babel/preset-env @babel/preset-react ] --plugins [ @babel/plugin-transform-class-properties ] ] の登場人物を全て取得 ## installするものは1行で複数指定しても良い $ npm install browserify --save $ npm install babelify --save $ npm install @babel/preset-env --save $ npm install @babel/preset-react --save $ npm install @babel/plugin-transform-class-properties --save ## 多分存在しないはず。。 ## 最後のやつ存在しないって怒られるけどこれなんなの？？ ## 大量に@babel/coreを入れろと怒られるので入れる $ npm install @babel/core --save
入れてしまったら、テスト用にindex.jsとMyClass.jsの２ファイルを用意する。 == index.js ==
import MyClass from "./MyClass";
(() => {
console.log(`Hello world ${new MyClass().name()}`);
})();
==MyClass.js==
class MyClass {
name() {
return "souki";
}
}
export default MyClass;
ここまでやればこのようなファイル構成になっているはず。
$ ls index.js MyClass.js node_modules/ package.json package-lock.json
次のコマンドを発行して一つのJSファイルにして、それを実行してみると意図した結果になることが確認できる。
$ ./node_modules/.bin/browserify index.js -o bundle.js -t [ babelify --presets [ @babel/preset-env @babel/preset-react ] ] $ node bundle.js Hello world souki
とりあえず今日はここまで。 長くなりそうなので、これに追記するか、少しずつ記事にして最後にしっかり整理したものを出すか何かするか。 これ書くだけで1時間くらいかかった。頻繁に情報を公開している人は本当に凄いな…。
