Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / アーカイブparcel

2018年10月22日 By KD コメントを書く

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

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」にアクセスすると。

NewImage

正しく表示されています。

この状態で、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」を表示します。

NewImage

正しく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」を表示します。

NewImage

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」を表示します。

NewImage

そして、プロダクション用にビルドもしてみましょう。

$ 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

カテゴリ : 技術 Tips & Tutorials タグ : build-tool, parcel, webpack

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • 爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
    爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • [tips][perl] Perlで文字コードをいい感じに処理する方法
    [tips][perl] Perlで文字コードをいい感じに処理する方法
  • バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
    バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
  • PythonでWebスクレイピング入門(Scrapy+Selenium編)
    PythonでWebスクレイピング入門(Scrapy+Selenium編)
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法
  • SpringBootのProfile毎にプロパティを使い分ける3つの方法
    SpringBootのProfile毎にプロパティを使い分ける3つの方法

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes