--- title: 最近話題のParcelをさわってみる tags: parcel webpack postcss フロントエンド React author: YukiHayakawa slide: false --- ## 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://github.com/parcel-bundler/parcel ## 使い方 公式ドキュメントを参考に使い方を紹介します。 https://parceljs.org/getting_started.html サンプルコード   https://github.com/YukiHayakawa/parcel-demo ## package.jsonの作成 今回はyarnでインストールしていきますが npmで行う場合は適宜変更してください。 ```Bash $ yarn init -y ``` ## Parcelをインストール 公式ドキュメントではGlobalにインストールしていますが ここではローカルにインストールして使用する前提で進めます ```Bash $ yarn add parcel-bundler ``` ## 動かしてみる ### index.htmlを作成 ```html:index.html ``` ### js/app.jsを作成 ```js:js/app.js console.log('hello world'); ``` ### 実行 yarn run で実行。 npmでインストールされた場合はnpxコマンドなどを使用してください ```Bash $ 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へアクセスし コンソールを開いてみると ```Bash:console.log hello world ``` ### js/app.jsを更新 ```js:js/app.js console.log('hello world'); console.log('hoge'); ``` 保存すると新しいログが出力されます。 ```Bash:console.log hello world hello world hoge ``` ## importやexportを試してみる ### js/hoge.jsを作成  ```js:js/hoge.js export default function hoge() { console.log('hoge.js'); } ``` ### js/app.jsを更新 ```js:js/app.js import hoge from './hoge' hoge(); ``` 保存するとhoge.jsを呼び出したログが確認できます。 ファイル追加についてもwacthを検出してくれます。 ```Bash:console.log hello world hello world hoge hoge.js ``` ## Reactを動かしてみる ### パッケージをインストール react react-dom babel-preset-env babel-preset-react ```Bash $ yarn add react react-dom babel-preset-env babel-preset-react ``` ### .babelrcを作成 babelの設定ファイルを作成すると起動時に自動で読み込んでくれます。 ```json:.babelrc { "presets": ["env", "react"] } ``` ### index.htmlを更新 appを追加 ```html:index.html
``` ### js/app.jsを更新 ```js:js/app.js import React, { Component } from 'react'; import { render } from 'react-dom'; class App extends Component { render() { return (
Hello world
); } } render( , document.getElementById('app') ); ``` ## PostCSS(CSS modules)を使ってみる ### パッケージをインストール postcss-modules autoprefixer ```Bash yarn add postcss-modules autoprefixer ``` ### .postcssrcを作成 ```json:.postcssrc { "modules": true, "plugins": { "autoprefixer": { "grid": true, "browsers": [ "last 2 versions" ] } } } ``` ### css/style.cssを作成 ```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: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 (
nav
main
foot
); } } render( , 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