LoginSignup
4

More than 5 years have passed since last update.

Parcel ハンズオン

Posted at

はじめに

parcel-front.png

parcelとは、node製のモジュールバンドラです。

特徴

  • 短いコンパイル時間 マルチコアコンパイル機能やファイルキャッシュシステムによるコンパイル時間短縮
  • zero config 一切設定ファイルを書かなくても、最低限の環境が構築できます。
  • プレビュー環境内蔵 ライブリロード対応のプレビュー環境内蔵

よく使う用語

  • npm Node.jsのパッケージ管理システム(Node Package Managerの略)
  • package.json プロジェクト毎のnpm関連の設定を記述したファイル
  • モジュールバンドラ 複数のモジュール(及び依存性)を1つ(あるいは複数)のファイルへとくっつけるツール

ハンズオン

目的

ParcelでSass(scss),Autoprefixer,Babelな構築環境を作ってみる。

環境構築

  • Node.jsをインストールする。

ディレクトリ構成

[プロジェクトのルートディレクトリ]
  ├─ package.json
  ├─ package-lock.json
  ├─ .postcssrc
  ├─ .browserslistrc
  ├─ node_modules/
  └─ src/
      ├─ index.html
      └─ assets/
          ├─ scss/
          │  └─ logo.jpg
          ├─ img/
          │  └─ style.scss
          └─ js/
              └─ app.js

package.jsonの作成

# 作業フォルダへ移動
$ cd /path/to/work/dir

# package.jsonの作成
$ npm initi
package name: (parcel) parcel_handson
version: (1.0.0)
description: parcel handson
entry point: (index.js)
test command:
keywords:
author:ohnaka@no4
license: (ISC) MIT
Is this ok? (yes)

入力した内容に従って、package.jsonが作成されます。

package.json
{
  "name": "parcel_handson",
  "version": "1.0.0",
  "description": "parcel handson",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "ohnaka@no4",
  "license": "MIT"
}

Parcelのインストール

npm install -D parcel-bundler
package.json
{
  "name": "parcel_handson",
  "version": "1.0.0",
  "description": "parcel handson",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "ohnaka@no4",
  "license": "MIT",
  "devDependencies": {
    "parcel-bundler": "^1.7.0" ←ここが追記されます。
  }
}

追加モジュールのインストール

# Sass
npm install -D node-sass
# Autoprefixer
npm install -D postcss-modules autoprefixer
# Babel
npm install -D babel-preset-env
package.json
{
  "name": "parcel_handson",
  "version": "1.0.0",
  "description": "parcel handson",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "ohnaka@no4",
  "license": "MIT",
  "devDependencies": {
    "autoprefixer": "^8.2.0", ←ここが追記されます。
    "babel-preset-env": "^1.6.1", ←ここが追記されます。
    "node-sass": "^4.8.3", ←ここが追記されます。
    "parcel-bundler": "^1.7.0",
    "postcss-modules": "^1.1.0" ←ここが追記されます。
  }
}

設定ファイルの作成

.postcssrc
{
  "modules": false,
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}
.browserslistrc
last 2 versions

ソースの作成

src/index.html
<html>
<head>
<link rel="stylesheet" href="./assets/scss/style.scss"></head>
</head>
<body>
  <img src="./assets/img/parcel-front.png">
  <a class="button error">ERROR</a>
  <a class="button warn">WARN</a>
  <script src="./assets/js/app.js"></script>
</body>
</html>
src/assets/scss/style.scss
$error-bg: #B22222 !default;
$warn-bg: #FFA500 !default;


.button {
  color:#fff;
}
.button {
  display: flex;
  user-select: none;
  &.warn {
    background-color: $warn-bg;
  }
  &.error {
    background-color:$error-bg;
  }

}
/src/assets/js/app.js
const obj = (() => {
  return {
    method() {
      alert('Hello Babel!');
    }
  };
})();

コンパイルとローカルサーバの起動

npx parcel src/index.html

ブラウザでhttp://localhost:1234へアクセスし、プレビューできることを確認する。
ファイルの変更を監視しているので、ファイルを変更すれば即時に再ビルド→ブラウザリロードが実行される。
なお、終了したい場合は、control + cで終了できる。

また、ビルドしたファイルはdistフォルダへ出力される。

まとめ

0から開発環境を構築するコストはかなり少ないと思います。
ただ、以下の点から実務導入はまだ難しいと感じました。

  • エントリーポイントが1つしか指定できない(#189→エントリポイントがglobで指定できるようになるとか。。)
  • ドキュメントが少ない
  • 対応しているpluginが少ない(ejsとか。。)

とはいえ、リリース直後で開発が非常に盛んなので、少し時間をあけて、再度触ってみようと思います。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4