完成したもの
https://github.com/superyusuke/webDevStarterKit
Contents
背景
React の開発環境には create-react-app をいつも使っていて、全く不便がないし、ちょっとした変更で必要なことはすべてできていた。さらに自分の React 大好きの勢いに乗じて、静的なウェブサイトさえも、React のコンポーネントベースで作成できる Gatsby を用いて作ってしまいたいと検討していた。
しかし React ベースで静的なサイトを作る問題は、他の人が修正しずらい、ということである。React ベースで作られるサイトは、基本的に HTML ではなく、JavaScript で書いていくことになるので、一般的なウェブサイト制作メインのエンジニアのスキルから少し外れることになる。HTML, CSS, JavaScript からあまり外れない、ということが共同作業においては有効になる。
そこで改めてウェブサイト制作のための開発環境作りをする必要がある。以下の要件を満たしたい。
- ES2015+ で書ける。
- Sass をトランスコンパイルする。
- WebPack ではなく Parcel を使うことで、なるべく設定を減らす。
- WebPack の image バンドルはしない。
- さしあたってテンプレートエンジンは使わなくてもいい。
ウェブパックを使って画像や CSS をバンドルする方が速度や軽さの点で有利なのは間違いないが、そこまでやるのであれば Gatsby で SPA + 静的ファイルのほうが断然早い。ので、パフォーマンスの最適化は、別の手法で達成したいと思う。
あくまで第三者が後から見た時に修正しやすい、ということを重視する。
ES2015+ のトランスコンパイル+バンドル
ES2015+ を ES5 にコンパイルするためには Babel 周りが必要。さらに js-module をバンドルする(import/exportを使って行く) ためには Browserify を以前は使っていた。
以前は具体的には、browserify でバンドルするわけだが、その際に ES2015+ を ES5 にコンパイルするために、babelify を用いていた。さらにファイル変更を監視するために watchify も使っていた。
browserify, babelify, watchify, さらに本体の babel と非常に設定が多い。
なのでこれを Parcel に置き換えたい。ただし Parcel は JS だけを担当させ、Sass や画像の処理は担当させない。というのも、Sass のソースマップを出力できないようだったので これはさすがに不便だと思ったからだ。JS だけ担当させるなら早いと思う。
まず package.json を作って、
npm init -y
以下をインストール
npm i -D parcel-bundler
以下のようなファイル構造
scripts に以下を追加
- parcel watch は parcel 独自の開発サーバーを立てずにウォッチ
- 出力先、出力ファイル名を設定
"js:watch": "npx parcel watch ./src/js/entry.js --out-dir ./src/assets --out-file app.js"
さらに babel のプリセットを設定していく。
npm i -D babel-preset-env
その後 .babelrc を作成し以下のように記述
{
"presets": ["env"]
}オブジェクトスプレッドに対応していないので、これも入れる。
npm i -D babel-plugin-transform-object-rest-spread.babelrc を以下のように追加
{
"presets": ["env"],
"plugins": ["transform-object-rest-spread"]
}
これで開発は OK。完パケ用はあとで作る。
sass をコンパイルする
これは簡単。
npm i -D node-sass
スクリプトに以下を追加
"css:watch": "node-sass --watch ./src/sass/index.sass ./src/assets/screen.css --source-map true --include-path ./src/sass"
ソースマップ付きで、./src/assets/screen.cssに出力
開発用サーバーを browser-sync で立てる
npm i -D browser-sync
"server:watch": "browser-sync start --server ./src/assets --files ./src/assets"
–server でルートを設定
–files でリロードの監視先を設定
パラレルシリアルでスクリプトを動かす
npm は && & でパラレル/シリアルにnpm-script を走らせることができるが、これはシェルに依存するとのこと。mac / win / Linux 等どれでも動かすためには npm-run-all を使う。
"start:dev": "npm run watch",
"watch": "npm-run-all -p js:watch css:watch server:watch",
"js:watch": "npx parcel watch ./src/js/entry.js --out-dir ./src/assets --out-file app.js",
"css:watch": "node-sass --watch ./src/sass/index.sass ./src/assets/screen.css --source-map true --include-path ./src/sass",
"server:watch": "browser-sync start --server ./src/assets --files ./src/assets"
全体としては以下のようにした。
build では完全に異なるディレクトリにソースを出力した。ソースマップを取り除き、圧縮している。
"scripts": {
"start:dev": "npm run watch",
"watch": "npm-run-all -p watch:js watch:css watch:server",
"watch:js": "npx parcel watch ./src/js/entry.js --out-dir ./src/assets --out-file app.js",
"watch:css": "node-sass --watch ./src/sass/index.sass ./src/assets/screen.css --source-map true --include-path ./src/sass",
"autoprefixer:assets": "postcss ./src/assets/screen.css --use autoprefixer --replace",
"watch:server": "browser-sync start --server ./src/assets --files ./src/assets",
"build": "npm-run-all -s build:clean build:copy -p build:js build:css",
"build:js": "npx parcel build ./src/js/entry.js --out-dir ./build --out-file app.js",
"build:css": "npm-run-all -s build:sass build:autoprefixer",
"build:sass": "node-sass ./src/sass/index.sass ./build/screen.css --include-path ./src/sass --output-style compressed",
"build:autoprefixer": "postcss ./build/screen.css --use autoprefixer --replace --no-map",
"build:clean": "rimraf ./build",
"build:copy": "cpx \"./src/assets/**/!(*.js|*.css|*.map)\" ./build"
}
