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を作成
<html>
<body>
<script src="./js/app.js"></script>
</body>
</html>
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へアクセスし
コンソールを開いてみると
hello world
js/app.jsを更新
console.log('hello world');
console.log('hoge');
保存すると新しいログが出力されます。
hello world
hello world
hoge
importやexportを試してみる
js/hoge.jsを作成
export default function hoge() {
console.log('hoge.js');
}
js/app.jsを更新
import hoge from './hoge'
hoge();
保存するとhoge.jsを呼び出したログが確認できます。
ファイル追加についてもwacthを検出してくれます。
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の設定ファイルを作成すると起動時に自動で読み込んでくれます。
{
"presets": ["env", "react"]
}
index.htmlを更新
appを追加
<html>
<body>
<div id="app"></div>
<script src="./js/app.js"></script>
</body>
</html>
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を作成
{
"modules": true,
"plugins": {
"autoprefixer": {
"grid": true,
"browsers": [
"last 2 versions"
]
}
}
}
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を更新
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