Parcelがめちゃめちゃ便利かもしれない。

Parcelとは

詳しくは急上昇のこれを見てみると良いかも。

Reactを使っていたのでWebpackは当然使ってたんですが、ちょっと開発するにはどうしても面倒で自分用にboilerplate用意したりしていました。それでもWebpackのバージョンが上がったら使えなくなったりするし、出回ってる情報も古くなっていたして、、割とハードルがある気がしています。

Parcelでは、設定ファイルも不要。Webpackであったようなloaderなどのpluginとかも基本は不要。開発用の配信サーバーも含まれているオールインワン。

内容チラ裏的な感じですが、ちょっと感動したので書いてみる。

boilerplate的なあれ

https://github.com/haradakunihiko/parcel-boilerplate に、いくつか作って見たので、触って見たい方はこちらを見てもらえれば！

js
ts
react (HMR)
react (ts × HMR)
vue (js)
vue (ts)

らへんがあります。vueは基本的にビルドツールなくても書けるものなんですが、シングルファイルコンポーネントを使ったり、テンプレートを使うためにはやはりビルドツールが必要になってきます。今の所シングルファイルコンポーネントには対応していないのでhtmlを別ファイルに切り出したりして import するなどしてみましたが、htmlファイルのimportにも少し癖があるようで、正直まだ使えないかな、、、

Reactを書いてみる

ということで、React書くための準備を追ってみるとこんな感じ。
まずparcelインストールします。

npm install -g parcel

React周りのモジュールインストールして、

npm install --save react react-dom
npm install --save-dev babel-preset-react-app

.babelrc書いて、

.babelrc

{
  "presets": ["react-app"]
}

index.htmlとindex.js書いて、

index.html

<html>
    <body>
      <div id="app"></div>
      <script src="./index.js"></script>
    </body>
  </html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
const Application = () => {
  return <h1>Hello world!</h1>
}
ReactDOM.render(<Application />, document.getElementById('app'));

parcelを実行する。

parcel index.html

デフォルトだと、 localhost:1234 にアクセスできるようになります。

なんとこれで終わり。。 index.html をビルドするってのが少し風変わりですが、割とこれが便利な気がしています。
さて、ビルドされると、

 - dist
   - index.html
   - f6db8e4a9e4ad2bca9f441b0f7e3d3e6.js

のようなファイルが生成されます。index.htmlに書いていた src="index.html" が上記のjsファイルのパスに変更される感じ。ちなみにjsをビルドしたいだけだったら index.js を指定すればOKです。

これだけでいわゆるdev server(js/htmlの配信サーバー)が起動するので、jsを変更すればリロードがかかって便利。

あと、ReactをHMRに対応するには、babelのpluginの react-hot-loader を入れる必要があります。

npm install --save-dev react-hot-loader

.babelrc

{
  "presets": ["react-app"],
  "plugins": ["react-hot-loader/babel"]
}

index.js

import 'react-hot-loader/patch';
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader'

const Application = () => {
  return <h1>Hello world!</h1>
}

ReactDOM.render(<AppContainer><Application /></AppContainer>, document.getElementById('app'));

これだけでできるなんて、便利な世の中だ。。
最近のWebpack事情はわからないけど、当初は (これ)[https://qiita.com/haradakunihiko/items/40486ec2b6b9aea119bb]

Parcel触ってみた（React編）

Parcelとは

boilerplate的なあれ

Reactを書いてみる