Parcel 快速建置React開發環境

“A blurry shot of a moving train from the platform in Leicester Square Station.” by Adrien Ledoux on Unsplash

Parcel 作為一個零配置的打包工具，使用起來比Webpack 需要諸多設定及Loader舒服。

React新手常常會遇到的問題就是環境架設，而Webpack 學習並沒有這麼快速，所以往往還沒寫到React就放棄了。

雖然我們有提供simple_react_start_kit_2017 供大家使用，不過今天我們就來用Parcel快速建置一個React環境吧。

1. 建立專案資料夾後，先初始化npm

npm init

2. 安裝Parcel 及 React

npm install --save parcel-bundler react react-dom

3. 建立index.html和index.js

我們建立index.html，裡面載入包含React程式的index.js檔案。

4. 設定package.json

"scripts": {
    "start": "parcel -p 8080 index.html",
    "build": "parcel build index.html"
},

Parcel可以使用html或者js檔案當作打包進入點，這裏我們使用index.html當作進入點。

指令如下

npm run start // 開發使用
npm run build // 打包產品

a. 開發使用

使用 -p 可以指定port，執行指令後打開瀏覽器http://localhost:8080，就有包含Hot Reload功能的開發伺服器了。

b. 打包產品

Parcel提供了build功能，當打包產品時就會將一些開發才需要的套件移除，執行完成就會看到 dist資料夾，內含打包後的程式。

上面步驟都做完後，我們可以執行 npm run start指令來看畫面囉，如果有看到下面畫面那就代表你成功囉！

到目前為止，我們已經完成一個React的環境架設了，是不是很簡單啊！

成功畫面

那接下來我們針對Babel在做進階的設定

5. Babel安裝及設定

yarn add --dev babel-cli babel-preset-env babel-preset-es2017 babel-preset-react babel-preset-stage-0

然後建立一個.babelrc設定檔案

{
   "presets": [ "env", "es2017", "stage-0", "react" ]
}

設定完成後，就可以在程式中使用ES6/7語法了喔。

總結

看完官方文件後就可以快速上手Parcel這點我覺得很棒，不像Webpack的設定往往讓新手卻步。

Parcel 內建許多轉譯器達到零配置的目的，之後小專案應該都會改用Parcel來打包。

不過因為零配置的缺點是假如有效能或更進階的配置想調整，可能就無法設定，期待Parcel 越來越厲害！！