今更だけどparcelの素振り

JavaScript

parcel + react + reduxを動かしてみる

環境構築

セットアップの仕方は公式サイトに親切に書いてある

🍰 Recipes

parcelをグローバルインストール

$ yarn global add parcel-bundler

ディレクトリを作成

$ mkdir parcel & cd parcel
$ yarn init -y

まずはドキュメント通り、react + parcelだけの必要最小限のパッケージをインストールする

$ yarn add react react-dom
$ yarn add --dev parcel-bundler babel-preset-env babel-preset-react

.babelrc

{
  "presets": ["env", "react"]
}

コードを書く

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'

class Hello extends React.Component {
  render() {
    return <div>hello world</div>
  }
}

const app = document.getElementById('app')
ReactDOM.render(<Hello />, app)

実行

$ parcel index.html

エラーなく立ち上がれば http://localhost:1234 で繋がるようになる

f:id:rskull:20180212234043p:plain

アクセスしてブラウザにhello worldが表示されていれば成功

reactもちゃんと動いてる

ビルド後のソースは dist フォルダに生成される

dist
├── index.html
├── parcel.js
└── parcel.map

reduxを導入する

$ yarn add redux react-redux

最小限だとこれだけで動く

前書いた記事のreduxの最小限の構成を輸入したら

問題なく動いてたので成功した

https://github.com/rskull/parcel-react

感想

簡単

素振りおそすぎた

追記 (2018/02/14)

本番ビルドだと動かなかった

メソッドがないよってエラーが出る

なぜ

https://rskull-sandbox.github.io/parcel-react/