Day-8 專案演練-建立新專案

記得第六天的時候提過，我比較喜歡的開發環境，會以那時說的內容為基底，建置 MyNote 這個小應用，今天這篇文章會提到詳細的順序，除了建置過程，我還會講解資料夾結構。

初始化環境

在專案開始製作前，總要先把環境先架設好，二話不說，立刻 hello world 就對了。

在 Day-5 的時候有提到 CRA 創新專案的方式，所以現在造搬過來使用，並且把專案名稱改掉 :

npx create-react-app my-note --template typescript

架構長好之後，這邊我的習慣是會把用不到的檔案都刪掉，並且在畫面顯示 hello world，流程如下 :

1. 保留跟目錄底下的 App.tsx、index.tsx 等必要的檔案，接著其他用不到的通通刪掉
2. 按造錯誤訊息修掉所有找不到的檔案
3. 清掉 App.tsx jsx 改成 hello world
4. run 專案能看到 hello world，就算是完成了

這邊的步驟我有做成模板，不過大部分的時候我還是會做一次，已經背得很熟了。

指令設置

預設狀態下，只要在終端機裡面輸入指令npm start，就能夠啟動專案。這裡想提醒大家，其實這個指令可以自己調整成喜歡的樣子。

自從嘗試了 next.js 之後，我習慣用 pnpm run dev 或者 npm run dev 來啟動專案。

在 package.json 裡面的 scripts 底下做修改。

改成這樣:

  "scripts": {
    "dev": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

資料夾結構

不管如何，身為前端工程師，架構可以依照實際需求，與自己的習慣去做調整，我覺得這個是軟體開發中，讓我感到特別喜歡的環節。

在 CRA 的官網裡面，對這資料夾結構有詳盡的解說，他是這樣講的:

• public/index.html 是頁面模板 :意味著所有的頁面外框是共通的，通常我只有在要改標題、icon 的時候才會進來 public 做修改
• src/index.js 是所有 JavaScript 進入點，意味著有些套件(例如: redux 的 Provider)，要安裝時，要在 src/index.js 把他嵌套進去(因為我用 typescript 所以是在 index.ts)
• webpack 會處理 src 中的檔案，意味著我們的所有作業幾乎都會在 src 裡面進行，例如撰寫新的元件

插曲

改成使用 pnpm來做開發時，發生了兩件事：

1. 路徑錯誤

我平常在工作時，用的是公司配的電腦，在開發時把 npm 改成 pnpm 沒什麼毛病，回到家用自己的電腦（系統是mac OSX）做 side project 就碰上麻煩了，終端機顯示：Error: Cannot find module ，於是我花了點時間除錯。

錯誤原因：MacOS zsh 的路徑錯誤

解決辦法：在指令 pnpm 的前面加上 npx，例如：npx pnpm -v

2. 誤刪了 public

因為要改用 pnpm 來安裝 package ，要先刪掉node_modules、package-lock.package.json（這個不刪沒影響，我習慣刪掉），這次我不小心刪掉了public 資料夾，專案就 run 不起來了。

解決辦法：從其他用 CRA 創的專案把 public 複製貼回來就好了 XDD

結語

初始化專案的過程，除了找到自己喜歡跟習慣的方式以外，跟自己要做的專案適配程度也是需要考慮的地方。

光是一個 CRA 創出來的專案就有那麼多學問了，真的非常有趣呢，多點耐心把它搞懂，以後想要做甚麼架構上的變化，就可以改的動，多多嘗試吧。

參考資料

• CRA 創建專案步驟
• CRA 資料夾結構