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書いて、
{
"presets": ["react-app"]
}
index.htmlとindex.js書いて、
<html>
<body>
<div id="app"></div>
<script src="./index.js"></script>
</body>
</html>
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
{
"presets": ["react-app"],
"plugins": ["react-hot-loader/babel"]
}
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]