Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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で行う場合は適宜変更してください。

$ 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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした