備忘録も兼ねて、初心者さん用にParcelを使ったビルドの仕方をまとめました。
コーディングが終わったら
コーディングが終わったら、ビルドを経て一つの大きなファイルにアウトプットし、リリースできる状態にします。
具体的には、
①ビルド
・モジュールごとに開発していたらそれをひとまとまりのファイルにアウトプット
・使わないコードを削除してファイルを圧縮
②トランスパイル/Polyfilling
・古いブラウザでもコードが読み込まれるよう、モダンJavaScriptのコードをES５の文法へ揃える
（⇨BABELというツールが行ってくれます）
これはもちろん自分でやるのではなく、ビルドツールを使い上記の作業を行っていきます。
この記事では、Parcelというビルドツールを使います。
Parcelとは
ビルドツール。
webpackはParcelより有名だが、設定ファイルなど作るのが難しい。
Parcelなら設定ファイルの作成が不要でサクッとビルドができます。
ビルドの仕方
npmを使ってツールをプロジェクトフォルダにインストールしてビルドしていきます。
①npm initをしたらparcelをインストール。
ターミナルで、npm install parcel --save-dev
(ツール系は--save-devを文末につけて、package.jsonファイルのdevDependenciesに入るようにする)
②ビルドする
npm initをしたときにできるpackage.jsonファイルにスクリプトを書いていきます。
"scripts": {
"start": "parcel index.html"
}
※ "start"の箇所は好きな文字列を入れてOK。
※ index.htmlの箇所はエントリポイントで、必要ならindex.html以外を入れてもOK。
ターミナルに戻り、npm run startとしてファイルをビルドします。
＜補足＞
私がインストールしたParcelのバージョンは1.12.4で、うまくビルドができませんでした。
別途parcel-bundlerを1.12.3でインストールするとうまくビルドができました！
npm i parcel-bundler@1.12.3
ビルドが上手くできたら、下記のようにターミナルにURLが出てきます。
Server running at http://localhost:1234
そのURLでブラウザを開くとlive-serverのようにファイル変更するたびに手動リロードなしでブラウザがリロードしてくれます
そしてプロジェクトフォルダにdistフォルダができていると思います。
それが最終的にリリースする用のフォルダになります。
③トランスパイル/Polyfilling
BABELを使いトランスパイルを行うのですが、Parcelは自動的にBABELを使いトランスパイルを行ってくれます。
（※Parcelがデフォルトで読み込んでくれるBABELは、@babel/preset-envというプリセット）
実際にdist/index.htmlが読み込んでいるscriptファイルを見ると、const等がvarに変わっているのがわかります。
ただ、BABELがしてくれることは、ES6文法をES5の文法にしてくれること。
文法はES５に変換してくれるのですが、.find()やPromiseなどES6で新たに追加された「機能」は変換してくれません。
ここでPolyfillingが必要になります。
やり方は、まずターミナルで下記のようにnpmでプロジェクトフォルダにインストール。
npm i core-js
npm i regenerator-runtime/runtime
そしてscript.jsに
import 'core-js/stable';
import 'regenerator-runtime/runtime';
を書くとライブラリを読み込みPollyfillをしてくれます。
※import 'core-js/stable';だと、実際に使用していないES6のメソッド等も追加されてしまうので、ファイルサイズを気にするなら、例えばimport 'core-js/stable/array/find';と書いて必要なものだけインポートすることもできます
※ regenerator-runtime/runtimeは、Pollyfillingを非同期にしてくれるものです。
④ファイルを圧縮
package.jsonファイルのscripts部分位に下記のスクリプトを追加します。
"build": "parcel build index.html"
ターミナルでnpm run buildとすると、distに圧縮されたファイルが確認できると思います