Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

サクッとParcel

あぁ

サクッと画面がみたい、TS書きたい、動かしたい。。。
そんな時にParcelが便利だったのでその感動を残す。。。

Parcelとは

コンフィグレスを謳ったバンドラー。公式
tsconfigとか、webpack.configとかすっ飛ばしてシンプルに動かせる。

なにはともあれ

見てもらうのが早い。
適当にディレクトリを切って、npm init します(あ、nodejs、npmは入ってる前提です)。

mkdir parcel_hoge
npm init -y

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

npm i -D parcel-bundler

devDependenciesに parcel-bundler を入れます。

簡単にディレクトリ構成を整えます。今回は下記のようにしましたがお好みで。

parcel_hoge/
 ├ node_modules/
 ├ src/
 │ └ index.html
 │ └ scripts/
 │     └ index.ts
 │     └ sub.ts
 └ package.json

それぞれの中身はこんな感じ

index.ts
// subから受け取ったmessageを画面に描画
import { message } from "./sub";
document.write(message);
sub.ts
// messageとしてmomentを渡している
import moment from "moment";
export const message = moment();

index.html
<!-- ここでTSを直接指定していることに地味に驚く -->
<script src="scripts/index.ts">

package.jsonに加筆します。
globalにparcelがあれば直接叩いてもいいです。

package.json抜粋
  "scripts": {
    "web": "parcel ./src/index.html",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

さて、お立ち会い。
コマンドを叩くと、必要なモジュールのインストールが行われ(!)、localhostにサーバーが立ち上がります。
スクリーンショット 2020-11-26 13.05.06.png

ブラウザで確認すると。。。
スクリーンショット 2020-11-26 13.11.56.png
動いている!

package.jsonを確認すると。。。
スクリーンショット 2020-11-26 13.10.34.png
使ったモジュールがインストールされてる!

っとまぁ、これといった設定ファイル無しでも
さらには必要なパッケージのインストールを事前に行わなくても
TS→JSへのトランスパイルやモジュールのバンドルを賢く捌いてくれます!

補足

  • エントリーポイントはHTML以外でもOK
  • nodejsらしくサーバーサイド実装する場合は注意が必要。
    下記のようにビルド時に --target node オプションを指定しないと、node向けのビルドになってくれず困ったことになる(fsすらうまく動かず苦労しました。。。)。
parcel build src/scripts/index.ts --target node
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
0
Help us understand the problem. What are the problem?