想要快速建立一個React專案時，可以使用npx create-react-app這個工具來快速建立，還可以決定template，但是想要使用Parcel的話可能有點麻煩，因此我寫了一個腳本可以快速建立所需的資料夾與檔案。使用NPM、Visual Studio Code與本篇文章內的初始化腳本即可快速開始進行開發囉。
本篇著重在快速開始開發的方式，因此也有寫另一篇文章：前端網頁開發須知，NPM、Parcel、React、Router、Redux、Axios、Bootstrap與其他工具簡介，可以讓讀者快速了解各個套件的功能。
資料夾與檔案介紹
使用Parcel建立一個前端網頁專案，裡面包含React、React Router、React Redux、Bootstrap…等套件，我們需要一個src資料夾，裡面有store資料夾，以及index.html、index.scss、index.js、App.js、store/store.js，再加上一個提供測試與範例的簡易Redux程式名為store/appSlice.js。而專案方面需要一個.gitignore檔案，如果需要Visual Studio Code幫忙檢查JavaSciprt的型別是否正確，還需要一個jsconfig.json檔案。最後產生的成品就如下圖所示，其中global與page資料夾只是因為我的習慣而加上去的。
使用腳本
Mac與Linux用戶可以從我的GitHub下載init_react.sh檔案，將檔案透過zsh或是sh指令執行程式碼，或是使用chmod +x init_react.sh給予執行權限即可值執行檔案。本來想寫一個Windows版本的init_react.bat，但Batch的腳本寫起來好麻煩先擱置了。
補充：後來我直接在GitHub上傳了已經有index.html、App.js、store.js…等所有檔案的專案，不管是Windows、Linux、macOS的用戶都可以直接從GitHub上下載下來即可開發，可以直接看本篇文章的最後一章節即可點選下載。
初始化
首先建立一個資料夾，在裡面像平常一樣使用npm init指令來初始化專案，然後將init_react.sh複製到專案資料夾內，在Terminal視窗內執行它即可完成初始任務。再來可以使用指令code .來啟動Visual Studio Code檢查專案內容是否都正確。
npm init -y
zsh init_react.shnpm init -y
sh init_react.sh使用npm init時NPM會詢問專案細節，然後自動寫入package.json檔案內。如果使用npm init -y建立，NPM就不會詢問專案細節，可之後再自行補充package.json。
接下來需要對package.json進行一些小調整，讓NPM採用Parcel來進行編譯與打包工作。
加入scripts指令
使用Visual Studio Code開啟package.json檔案，在scripts區塊增加兩行文字，讓scripts區塊變成以下樣子。
"scripts": {
"start": "parcel src/index.html",
"build": "parcel build --no-source-maps --dist-dir build src/index.html",
"test": "echo \"Error: no test specified\" && exit 1"
},其中build指令的部分，--no-source-maps是讓Parcel打包時不要產生map檔案，而--dist-dir build是讓Parcel打包時將成果輸出到build資料夾，而不是預設的dist資料夾，這只是我的習慣而已，可以依照自己需求改變。因為原本的開發測試階段的程式碼會產生到dist資料夾，最佳化打包的成果也輸出到dist資料夾我覺得有點亂，才改成dist與build兩個資料夾各自有各自的用途。
移除main進入點
同樣在package.json檔案內，原本使用Webpack打包的時候會需要程式進入點，但是Parcel的程式進入點是寫在index.html裡面，因此需要將main的設定移除。只要將package.json檔案內以下這行文字即可。
"main": "index.js",開始使用
最後使用npm start指令即可看到成果囉。如果忘記要加入scripts與移除main也沒關係，我在init_react.sh裡面已經輸出以下的提示文字了。
Add the following 2 lines to the "scripts" section of packge.json:
"start": "parcel src/index.html",
"build": "parcel build --no-source-maps --dist-dir build src/index.html",
Remove the next line from package.json:
"main": "index.js",
Command:
npm start -> Start dev mode
npm run build -> Build the project to production如果想要更方便
在Visual Studio Code可以使用CMD+I指令自動import需要的套件到程式內，但如果是自己寫的JavaScript程式使用Visual Studio Code自動import的時候路徑會有點問題，比如需要載入../store/store.js的話，Visual Studio Code會寫成store/store.js，然後Parcel解析的時候會出問題。這只需要在package.json內增加一個alias設定就可以了，以我們在src資料夾內有global、store、page三個資料夾為例，可以在增加以下設定。
"scripts": {
"start": "parcel src/index.html",
"build": "parcel build --no-source-maps --dist-dir build src/index.html",
"test": "echo \"Error: no test specified\" && exit 1"
},
"alias": {
"page": "/src/page",
"global": "/src/global",
"store": "/src/store"
},增加一個alias裡面指定store代表/src/store，Parcel打包的時候就能理解import * from 'store/store.js'要去哪裡尋找囉。
直接從GitHub下載我的範本
最近想到都透過Script產生樣板了，乾脆將產生出來的樣板上傳到GitHub上，直接點選Download ZIP或是Git clone就可以使用囉！我在GitHub上傳的版本也處理好移除main區塊、增加start script、增加alias到package.json裡面，下載後直接使用npm start就可以執行了。