Parcelでお手軽React環境構築

2019.4.19

何を今更Parcelやってるんだという感じはしますが、さくっとReactの環境構築が必要な機会があったので備忘録としてまとめておきます。Parcelは軽いものをちゃちゃっと作りたいときに便利ですね。

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

npm i -D parcel

必要なbabelのモジュールをインストールします。

npm i babel-preset-react-app

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

npm i react react-dom

.babelrcを作成して以下を記述します。

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

エントリーポイントの作成。webpackと違ってhtmlファイルがエントリポイントになります。

index.html

<html>
  <body>
    <div id="app"></div>
    <script src="./index.js"></script>
    <link rel="stylesheet" href="./style.css"></link>
  </body>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';

const Application = () => {
  return <h1 className="title">Hello parcel..</h1>
}

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

style.css 

.title {
  color: pink;
}

起動

./node_modules/.bin/parcel ./src/index.html

これでlocalhost:1234にアクセスするとページが開きます。デフォルトでソースマップもホットリロードも走ります。

Hello Parcel

ビルドしてhtml/js/cssを出力する場合はbuildコマンドをたたきます。

./node_modules/.bin/parcel build ./src/index.html
© 2019-2024 kwst.site.