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

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


## parcelと出会う前の僕

```shell: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と出会ってからの僕

```shell:terminal
yarn add parcel-bundler
```

終わり


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

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

# <font color="#009250">はじめにやる事</font>

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

```shell:terminal
mkdir sample
cd sample
yarn init
```

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

```
sample
 ┗ package.json
```


# <font color="#009250">Parcelを入れる</font>

```shell:terminal
yarn add parcel-bundler
```

# <font color="#009250">シンプルなウェブページを作る</font>

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

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

超シンプルなHTMLファイル

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

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

```shell: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](https://qiita-image-store.s3.amazonaws.com/0/57524/65f63ae9-14e5-1817-d98d-aeca0eede701.png)

表示される。

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

# <font color="#009250">Reactを使う</font>

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

```shell:terminal
yarn add react react-dom
```

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

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

```diff: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`を追加する

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

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

## ディレクトリはこんな状態
```diff
 sample
  ┣ src
+ ┃　　┣　app.js
  ┃　　┗　index.html
  ┗ package.json
```

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

```shell:terminal
npx parcel ./src/index.html
```

![スクリーンショット 2019-03-06 14.43.05.png](https://qiita-image-store.s3.amazonaws.com/0/57524/65f63ae9-14e5-1817-d98d-aeca0eede701.png)

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

# <font color="#009250">Sassを使う</font>

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

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

`h1`の文字色だけ設定

```app.scss
h1 {
  color: #009250;
}
```

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

作成した`app.scss`をimport

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

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

## ディレクトリはこんな状態
```diff
 sample
  ┣ src
+ ┃　　┣　app.scss
  ┃　　┣　app.js
  ┃　　┗　index.html
  ┗ package.json
```

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

```shell:terminal
npx parcel ./src/index.html
```

![スクリーンショット 2019-03-06 15.08.59.png](https://qiita-image-store.s3.amazonaws.com/0/57524/8beacabd-c290-350c-297b-b31446c089ec.png)

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

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

```diff: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`が入っていなければ勝手に入れるっぽいです。


# <font color="#009250">TypeScriptを使う</font>

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

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

importの部分をtypescript式に変更。

```diff: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`の読み込み部分を修正

```diff: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>
```

## ディレクトリはこんな状態
```diff
 sample
  ┣ src
- ┃　　┣　app.js
+ ┃　　┣　app.tsx
  ┃　　┗　index.html
  ┗ package.json
```

![スクリーンショット 2019-03-06 15.08.59.png](https://qiita-image-store.s3.amazonaws.com/0/57524/8beacabd-c290-350c-297b-b31446c089ec.png)

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

### ちなみにpackage.json
```diff: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が追加されていますね。

# <font color="#009250">ビルドする</font>

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

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

# <font color="#009250">その他</font>

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


# <font color="#009250">まとめ</font>

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

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


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