webpack | Casual Developers Notes

Webpack時代の終焉か？設定ファイルゼロのビルドツールParcelクイック入門

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

完璧ですね。ここまでで設定ファイルは完全にゼロです。