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

webpackに疲れた僕を救ってくれたparcelがすばらしい

More than 1 year has passed since last update.

前段

Node.jsでWebサービス作ろってなるとまず環境構築がめんどくさすぎたんですが
ここ最近parcelというのを使ってみてなかなか良かったので
基本的な使い方や、ReactとかTypeScript使うための環境構築だったりをご紹介。

parcelと出会う前の僕

terminal
yarn add webpack webpack-cli webpack-dev-server babel-loader css-loader file-loader node-sass sass-loader @babel/core etc...

もっとたくさんあれこれいれてwebpack.config.js職人としての人生が始まり
その人生の先にようやくクリエイターとしての道が開かれる。

parcelと出会ってからの僕

terminal
yarn add parcel-bundler

終わり

環境

この記事に書かれてる事は以下の環境でやってます。

  • Mac
  • VSCode
  • Node.js v10.9.0
  • yarn 1.9.4
  • npx 6.2.0

はじめにやる事

適当なディレクトリを作って移動して、下ごしらえ

terminal
mkdir sample
cd sample
yarn init

この時点でフォルダの中はこうなっているね

sample
 ┗ package.json

Parcelを入れる

terminal
yarn add parcel-bundler

シンプルなウェブページを作る

とりあえすsrcフォルダ作って、その中にindex.htmlを作りましょう。

 sample
+ ┣ src
+ ┃  ┗ index.html
  ┗ package.json

超シンプルなHTMLファイル

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Parcel</title>
  </head>
  <body>
    <h1>Parcelのご紹介</h1>
  </body>
</html>

ターミナルで以下のコマンドを実行

terminal
npx parcel ./src/index.html

Server running at http://localhost:1234
Built in 42ms.

こんな感じでサーバーが立ち上がるので、ブラウザでhttp://localhost:1234にアクセスする。

スクリーンショット 2019-03-06 14.43.05.png

表示される。

parcelは指定されたファイル、ここでは./src/index.htmlを起点に関連するファイルをバンドルしてくれる。
特に指定しなければdistというディレクトリにビルドしたものが出力される。

Reactを使う

一旦サーバーを落としておきましょう(Ctrl + Cで終了できます)
とりあえずreactreact-domを追加

terminal
yarn add react react-dom

sample/src/index.htmlを編集する

Reactから要素を入れ込むためのdivとスクリプトの読み込みを追加

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Parcel</title>
  </head>
  <body>
-    <h1>Parcelのご紹介</h1>
+    <div id="app"></div>
+    <script src="app.js"></script>
  </body>
</html>

sample/src/app.jsを追加する

app.js
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Parcelのご紹介</h1>,
  document.getElementById('app')
);

ディレクトリはこんな状態

 sample
  ┣ src
+ ┃  ┣ app.js
  ┃  ┗ index.html
  ┗ package.json

ターミナルで以下のコマンドを実行

terminal
npx parcel ./src/index.html

スクリーンショット 2019-03-06 14.43.05.png

Reactがもう動きました。
素晴らしい、Fantastic!

Sassを使う

また一旦サーバーを落としておきましょう。

sample/src/app.scssを追加する

h1の文字色だけ設定

app.scss
h1 {
  color: #009250;
}

sample/src/app.jsを編集する

作成したapp.scssをimport

app.js
import React from 'react';
import ReactDOM from 'react-dom';
+ import './app.scss';

ReactDOM.render(
  <h1>Parcelのご紹介</h1>,
  document.getElementById('app')
);

ディレクトリはこんな状態

 sample
  ┣ src
+ ┃  ┣ app.scss
  ┃  ┣ app.js
  ┃  ┗ index.html
  ┗ package.json

ターミナルで以下のコマンドを実行

terminal
npx parcel ./src/index.html

スクリーンショット 2019-03-06 15.08.59.png

CSSが反映されました。
素晴らしい! Awesome!

ちなみにpackage.jsonはこうなっている

package.json
{
  "name": "sample",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "parcel-bundler": "^1.11.0",
+   "sass": "^1.17.2"
  },
  "dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4"
  }
}

いれた覚えのないsassが勝手に追加されていました。
こんな感じでparcelは必要なnpmが入っていなければ勝手に入れるっぽいです。

TypeScriptを使う

また一旦サーバーを落としておきましょう。

sample/src/app.jsの拡張子を変更してapp.tsxにする

importの部分をtypescript式に変更。

app.tsx
- import React from 'react';
- import ReactDOM from 'react-dom';
+ import * as React from 'react';
+ import * as ReactDOM from 'react-dom';
import './app.scss';

ReactDOM.render(
  <h1>Parcelのご紹介</h1>,
  document.getElementById('app')
);

sample/src/index.htmlを編集する

ファイルの拡張子変えたのでsrcの読み込み部分を修正

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Parcel</title>
  </head>
  <body>
    <h1>Parcelのご紹介</h1>
    <div id="app"></div>
-    <script src="app.js"></script>
+    <script src="app.tsx"></script>
  </body>
</html>

ディレクトリはこんな状態

 sample
  ┣ src
- ┃  ┣ app.js
+ ┃  ┣ app.tsx
  ┃  ┗ index.html
  ┗ package.json

スクリーンショット 2019-03-06 15.08.59.png

TypeScriptでもうまく動きました。
素晴らしい! Amazing!

ちなみにpackage.json

package.json
{
  "name": "sample",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "parcel-bundler": "^1.11.0",
    "sass": "^1.17.2",
+   "typescript": "^3.3.3333"
  },
  "dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4"
  }
}

typescriptが追加されていますね。

ビルドする

terminal
npx parcel build ./src/index.html --out-dir=build

これで指定したフォルダにビルドしてバンドルされた結果のファイルが出力されます。
とりあえずこれをサーバーにアップすればデプロイ完了ですね。
GitHub Pagesで即公開とかも可能ですね。

その他

tsconfig.jsonを置いておけばその内容がちゃんと認識される。(というかこれはparcelとか関係ないよね)
Jestを使ったテストも普通に今まで通りに動く。
npx parcel ./src/index.jsとかすれば普通にjsがバンドルされるのでライブラリ開発とかもいけちゃうね

まとめ

webpackに心底疲れていた僕はparcelに感激しました。
parcelは良きコンパイラです。

今後ParcelがWeb界の未来を背負っていくかどうかはわかりませんが
少なくとも、gulpwebpackといった手動設定コンパイラが
parcelのような自動設定コンパイラというものに置き換わっていくのは歴史を振り返っても間違い無いでしょう。

というわけでParcelのざっくりとした紹介でした。
より詳しく知りたい方はこちらへどうぞ → https://parceljs.org/

Nekonecode
◆将来の夢 プログラムの先生 ◆経歴 Web屋→ゲーム屋→フリー→正社員+フリー
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