最近話題のParcelをさわってみる #React

Parcelとは

parcelとは設定ファイルを必要としない高速なモジュールバンドラです。

Parcel is a web application bundler, differentiated by its developer experience. It offers blazing fast performance utilizing multicore processing, and requires zero configuration.

使ってみた個人的な感想としては
設定が容易で導入が簡単であると感じました。

目的によってできること出来ないことはあると思いますが
ファイル分割やhotloaderなどの環境を手軽に構築したい際に
webpackよりも簡単に導入でき
便利なツールです。

使い方

公式ドキュメントを参考に使い方を紹介します。
https://parceljs.org/getting_started.html

サンプルコード　　
https://github.com/YukiHayakawa/parcel-demo

package.jsonの作成

今回はyarnでインストールしていきますが
npmで行う場合は適宜変更してください。

$ yarn init -y

Parcelをインストール

公式ドキュメントではGlobalにインストールしていますが
ここではローカルにインストールして使用する前提で進めます

$ yarn add parcel-bundler

動かしてみる

index.htmlを作成

index.html

<html>
<body>
  <script src="./js/app.js"></script>
</body>
</html>

js/app.jsを作成

js/app.js

console.log('hello world');

実行

yarn run で実行。
npmでインストールされた場合はnpxコマンドなどを使用してください

$ yarn run parcel index.html
yarn run v1.3.2
$ /Users/hoge/workspace/parcel/node_modules/.bin/parcel index.html
Server running at http://localhost:1234
✨  Built in 717ms.

ブラウザからhttp://localhost:1234へアクセスし

コンソールを開いてみると

console.log

hello world

js/app.jsを更新

js/app.js

console.log('hello world');
console.log('hoge');

保存すると新しいログが出力されます。

console.log

hello world
hello world
hoge

importやexportを試してみる

js/hoge.jsを作成　

js/hoge.js

export default function hoge() {
  console.log('hoge.js');
}

js/app.jsを更新

js/app.js

import hoge from './hoge'
hoge();

保存するとhoge.jsを呼び出したログが確認できます。

ファイル追加についてもwacthを検出してくれます。

console.log

hello world
hello world
hoge
hoge.js

Reactを動かしてみる

パッケージをインストール

react
react-dom
babel-preset-env
babel-preset-react

$ yarn add react react-dom babel-preset-env babel-preset-react

.babelrcを作成

babelの設定ファイルを作成すると起動時に自動で読み込んでくれます。

.babelrc

{
  "presets": ["env", "react"]
}

index.htmlを更新

appを追加

index.html

<html>
<body>
  <div id="app"></div>
  <script src="./js/app.js"></script>
</body>
</html>

js/app.jsを更新

js/app.js

import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends Component {
  render() {
    return (
      <div>
        Hello world
      </div>
    );
  }
}
render(
  <App />,
  document.getElementById('app')
);

PostCSS（CSS modules）を使ってみる

パッケージをインストール

postcss-modules
autoprefixer

yarn add postcss-modules autoprefixer

.postcssrcを作成

.postcssrc

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true,
      "browsers": [
        "last 2 versions"
      ]
    }
  }
}

css/style.cssを作成

css/style.css

body {
  background: #efefef;
}
.grid {
  display: grid;
  grid-template-rows: 400px 150px;
  grid-template-columns: 200px 1fr;
}
.nav {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
  background: #ddd;
}
.main {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  background: #fff;
}
.foot {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  background: #666;
}

js/app.jsを更新

js/app.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import styles from '../css/style.css'
class App extends Component {
  render() {
    return (
      <div className={styles.grid}>
        <div className={styles.nav}>nav</div>
        <div className={styles.main}>main</div>
        <div className={styles.foot}>foot</div>
      </div>
    );
  }
}
render(
  <App />,
  document.getElementById('app')
);

プロダクションモードでBuildする

$ yarn run parcel build index.html

cssやjsを個別にディレクトリを設定してdistする場合はタスクを分ける必要がある

$ yarn run parcel build js/* -d dist/js
$ yarn run parcel build css/* -d dist/css

所感

導入は容易であり手軽にアプリケーションを構築する際に有用
既存のプロダクトへ組み替えを検討する際は少々面倒（アップデートに期待）

参考文献

https://qiita.com/bitrinjani/items/b08876e0a2618745f54a
https://qiita.com/soarflat/items/3e43368b2d767c730781