Parcelを使ってみる

2023.04.30

設定ファイルを用意せずにビルド環境を作成できるツール「Parcel」を使ってみます。

設定方法

コマンドラインでプロジェクトディレクトリに移動後、package.jsonを作成します。

npm init -y

Parcelをインストールします。

npm install --save-dev parcel

日本語のドキュメントだとパッケージ名が「parcel-bundler」になっていますが、現在は「parcel」が正しいようです。

次にpackage.jsonを変更します。

{
  〜 略 〜
  "source": "src/index.html",
  "targets": {
    "default": {
      "distDir": "./htdocs"
    }
  },
  "scripts": {
    "start": "parcel --open",
    "build": "parcel build"
  },
  〜 略 〜
}

変更点は “main”: “index.js”, の行の削除と”scripts”内の変更、”source”と”targets”の項目の追加になります。
scriptsでは開発サーバの起動とビルドのコマンドを設定、sourceではエントリーファイルの設定、targetsではビルド先の設定を行なっています。

プロジェクトディレクトリ内にsrcディレクトリを作成して、開発用のファイルを設置します。

src/index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプルページ</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>サンプルページ</h1>
<div class="img">
  <img src="img/img01.jpg" alt="">
</div>
<script src="js/script.js"></script>
</body>
</html>

src/css/style.css

h1 {
  color: red;
}

src/js/script.js

console.log('sample');

package.json内で設定しましたが、src/index.htmlがエントリーファイルになります。

これで開発用ファイルの準備ができたので、開発サーバを起動してみます。

npm run start

distディレクトリが生成され、http://localhost:1234 でサンプルページが開けばOKです。
distディレクトリ内のファイルが開発サーバで閲覧しているファイルになります。

次にビルドのコマンドを実行してみます。

npm run build

htdocsディレクトリが生成され、その中に各ファイルが生成されました。
htdocsはpackage.jsonのtargetsで設定したディレクトリ名で、設定しなかった場合は開発サーバと同じdistになります。
Parcelでビルドしたデモページ(ファイルパスは変更しています)

ビルド時の圧縮やsourcemapの設定を変更してみます。

{
  〜 略 〜
  "source": "src/index.html",
  "targets": {
    "default": {
      "distDir": "./htdocs",
      "optimize": false,
      "sourceMap": false
    }
  },
  "scripts": {
    "start": "parcel --open",
    "build": "parcel build"
  },
  〜 略 〜
}

ビルドコマンドを実行します。

npm run build

先ほど変わって各ファイル非圧縮状態で生成され、sourcemapファイルは生成されませんでした。
Parcelでビルドしたデモページ02(ファイルパスは変更しています)

Pug/Sass/TypeScriptのビルド

次はPugとSass、TypeScriptを元にビルドを行ってみます。
まずpackage.json内で設定したエントリーファイルをindex.htmlからindex.pugに変更します。

{
  〜 略 〜
  "source": "src/index.pug",
  "targets": {
    "default": {
      "distDir": "./htdocs"
    }
  },
  "scripts": {
    "start": "parcel --open",
    "build": "parcel build"
  },
  〜 略 〜
}

次にsrcディレクトリ内の開発ファイルを変更します。
imgディレクトリ以外を削除して、以下ファイルを設置していきます。

src/index.pug

doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    title サンプルページ
    link(rel="stylesheet" href="css/style.scss")
  body
    h1 サンプルページ
    div.img
      img(src="img/img01.jpg" alt="")
    script(type="module" src="js/script.ts")

src/css/style.scss

@use "main/img";

src/css/main/_img.scss

.img {
  width: 600px;
  img {
    width: 100%;
    height: auto;
  }
}

src/js/script.ts

import {hello} from './sub';
 
let message: string;
message = hello('Miku');
console.log(message);

src/js/sub.ts

export function hello(user: string): string {
  return 'Hello, ' + user;
}

これでファイルの準備ができたので、ビルドコマンドを実行します。

npm run build

先ほどと同様、htdocsディレクトリ内にファイルが生成されました。
Parcelでビルドしたデモページ03(ファイルパスは変更しています)

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2024年11月
日 月 火 水 木 金 土
 12
3456789
10111213141516
17181920212223
24252627282930