Webアプリケーションのビルドツールと言えば、2018年度はWebpackの独壇場でした。しかし、時代が進むにつれてあらゆるツールは進化しています。今回は設定ファイルゼロの次世代ビルドツールParcelを紹介します。
はじめに
Webpackはとても素晴らしいビルドツールです。JavaScriptのビルドに留まらず、CSSや画像などを全てJavaScriptの世界に取り込んだ発想はとても新しいものでした。今Webアプリケーションの開発を始める場合、特にフロントエンドの開発ではWebpackを使わないという選択肢は無いでしょう。そして、流行りのプラグイン方式をとっていることも大きいです。多くのデベロッパーがWebpackのプラグインを開発してWebpackのコミュニティーに間接的に貢献しています。私もプラグインを開発した一人です。
しかし、Webpackには大きな問題があります。それは、プロダクションレベルの設定ファイルを書くと、設定ファイルが複雑化してしまう点です。Webpackに限った話ではありませんが、設定ファイル地獄は誰もが経験し、うんざりしているのは事実です。
そこに目をつけてだと思いますが、「設定ファイルゼロ」を掲げて開発された次世代ビルドツールが「Parcel」です。もし設定ファイルがゼロでWebpackでできることを全て実現できるのであれば、Webpackを使う理由はありません。設定ファイルが無いほうが良いに決まっているからです。それを実現できるかどうかがParcelへの期待であり、おそらく2019年には答えが出ることでしょう。
今回は、そんな注目のParcelをささっと入門してみましょう。
Webサイトのビルド
まずは、一番ベーシックなHTMLとCSSで構成されたWebサイトをビルドしてみましょう。
ベースを作る
ベースとなるフォルダとファイルを作り、Parcelをインストールします。
$ mkdir website
$ cd website/
$ yarn init -y
$ yarn add --dev parcel-bundler
$ mkdir -p src/js
$ mkdir -p src/css
$ touch src/index.html
$ touch src/js/index.js
$ touch src/js/lib.js
$ touch src/css/index.css
$ touch .postcssrc
実装する
非常に簡単なサイトを作ってみましょう。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Parcel Tutorials</title>
</head>
<body>
<h1>Parcel Tutorials</h1>
<p>This is a tutorial for Parcel beginners.</p>
<script src="./js/index.js"></script>
</body>
</html>
index.css
h1 {
color: orange;
}
p {
font-style: oblique;
}
lib.js
const currentYear = new Date().getFullYear();
export {
currentYear
};
index.js
普通にCSSをHTMLから読み込んでも良いのですが、あまりにつまらないのでCSS Modulesを使ってJavaScriptから読み込むことにしましょう。
import { currentYear } from './lib';
import '../css/index.css';
console.log(`Hello Parcel! It's a new generation build tool in ${currentYear}.`);
.postcssrc
CSS Modulesを使用するので、PostCSSの設定ファイルを準備しましょう。
{
"modules": true
}
この状態でParcelを起動するだけでpostcss-modulesのパッケージが自動的にインストールされます。
package.json
開発用とプロダクションビルド用のコマンドを追加します。
{
...
"scripts": {
"start": "parcel src/index.html --port 8080",
"build": "parcel build src/index.html --out-dir build"
}
}
デフォルトのままでもよいのですが、せっかくなのでオプションで2箇所に変更を加えています。1つ目は、ParcelでWebサイトを動かす場合はデフォルトのポートは1234ですが、オプションで8080に変更しています。2つ目は、ParcelでWebサイトをビルドした場合のデフォルトのディレクトリはdistですが、オプションでbuildに変更しています。
動作確認
それでは実際に動かしてみましょう。
まずは開発用にHMR(Hot Module Replacement)が有効な状態でWebサイトを表示します。
$ yarn start
...
Server running at http://localhost:8080
✨ Built in 1.64s.
ブラウザから「http://localhost:8080」にアクセスすると。
正しく表示されています。
この状態で、HTML、CSS、JavaScriptを変更すると、自動的にリロードされます。
次に、このWebサイトをプロダクション用にビルドしてみます。
$ yarn build
...
✨ Built in 516ms.
build/js.78f7eff6.js 1.5 KB 50ms
build/js.78f7eff6.map 654 B 4ms
build/index.html 410 B 10ms
build/js.af1e5064.css 37 B 10ms
✨ Done in 1.31s.
$ tree build/
build/
├── index.html
├── js.78f7eff6.js
├── js.78f7eff6.map
└── js.af1e5064.css
しっかりとビルドできていますね。
SASSのビルド
次に、CSSで書いていた部分をSASSで書き直してみましょう。
ベースを修正する
CSSファイルとPostCSSの設定ファイルおよび依存モジュールを削除して、SCSSファイルを追加します。
$ rm src/css/index.css
$ rm .postcssrc
$ yarn remove postcss-modules
$ touch src/css/index.scss
ソースコードを修正する
index.scss
簡単なSCSSファイルを書きます。
$primary-color: blue;
h1 {
color: $primary-color;
}
p {
font-style: oblique;
}
index.js
CSSファイルを読み込んでいた箇所をSCSSで読み込むように修正￥します。
import { currentYear } from './lib';
import '../css/index.scss';
console.log(`Hello Parcel! It's a new generation build tool in ${currentYear}.`);
この状態でParcelを起動するだけでsassのパッケージが自動的にインストールされます。
動作確認
先ほどと同じくParcelを起動します。
$ yarn start
...
Server running at http://localhost:8080
✨ Built in 2ms.
ブラウザで「localhost:8080」を表示します。
正しくSCSSが読み込まれています。
モダンJavaScriptの構文のビルド(Babelプラグイン)
BabelプラグインでモダンなJavaScriptの構文を追加してみましょう。
ベースを修正する
Babelを使うので、設定ファイルを追加します。
$ touch .babelrc
ソースコードを修正する
.babelrc
今回はBebelプラグイン「@babel/plugin-proposal-class-properties」を追加して使います。
{
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
index.jsを修正する
Babelプラグインで追加したクラスのプロパティを使った形にファイルを修正します。
import { currentYear } from './lib';
import '../css/index.scss';
class Greeting {
message = "Hello Parcel and Babel! It's a new generation build tool in %s";
display(date) {
console.log(this.message, date);
}
}
const greeting = new Greeting();
greeting.display(currentYear);
動作確認
Parcelを起動してみましょう。
$ yarn start
...
Server running at http://localhost:8080
✨ Built in 56ms.
ブラウザで「localhost:8080」を表示します。
BabelでモダンなJavaScript構文が使用できました。
Reactアプリケーションのビルド
最後に、少しだけ実践的な話題として、簡単なReactアプリケーションをビルドしてみましょう。
Reactをセットアップする
まずは、必要なフォルダとファイルを作り、ParcelとReactのモジュールをインストールします。
$ mkdir parcel-react
$ cd parcel-react/
$ yarn init -y
$ yarn add --dev parcel-bundler
$ yarn add react react-dom
$ touch src/index.html
$ touch src/index.js
$ touch src/index.css
$ touch src/App.js
$ touch src/App.css
実装する
package.json
先程と同じく開発用とプロダクションビルド用のコマンドを追加します。
{
...
"scripts": {
"start": "parcel src/index.html --out-dir public",
"build": "parcel build src/index.html --out-dir build"
}
}
index.html
シングルページの起点となるHTMLファイルを作成します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Parcel and React</title>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>
Reactの起点となるrootクラスと、Reactの起点となるindex.jsスクリプトの読み込みを書きます。
index.js
Reactの起点となるJavaScriptを書きます。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
index.css
ページ全体に適用するCSSを書きます。
body {
margin: 0;
padding: 0;
}
App.js
簡単なJSXを書きます。
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<h1>Parcel and React</h1>
<p>It's a really easy way to build React!</p>
</div>
);
}
}
export default App;
App.css
Reactっぽい色のスタイルを書きます。
.App {
text-align: center;
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.App h1 {
color: #61dafb;
}
.App p {
color: white;
}
動作確認
それでは、Parcelを起動してReactプロジェクトが動くか見てみましょう。
$ yarn start
...
Server running at http://localhost:1234
✨ Built in 5.31s.
ブラウザで「localhost:1234」を表示します。
そして、プロダクション用にビルドもしてみましょう。
$ yarn build
...
✨ Built in 6.42s.
build/src.577091b8.map 210.56 KB 59ms
build/src.577091b8.js 104.07 KB 5.07s
build/index.html 322 B 1.23s
build/src.c71201e7.css 206 B 4.35s
✨ Done in 8.76s.
$ ls build/
index.html src.577091b8.js src.577091b8.map src.c71201e7.css
完璧ですね。ここまでで設定ファイルは完全にゼロです。
最後に
いかがでしたか？設定ファイルゼロのParcelの凄さが分かったでしょうか？Webpackに完全に入れ替わるかどうかはまだわかりませんが、JavaScript界隈は高速で古いツールを捨てていくので、可能性は高いでしょう。2019年のParcelの進化に期待ですね。それでは。
環境
- yarn: 1.10.1
- parcel-bundler: 1.10.3