用create-react-app命令初始化react專案及錯誤處理

月落梅影發表於2019-07-17
ReactAPP

建立應用程式

你需要在本地開發計算機上使用 Node >= 6（但在伺服器上不需要）。

要建立新應用，你可以選擇以下方法之一：

npx

npx create-react-app my-app
複製程式碼

(npx 來自 npm 5.2+ 或更高版本, 檢視 npm 舊版本的說明)

npm

npm init react-app my-app
複製程式碼

npm init <initializer> 在 npm 6+ 中可用

Yarn

yarn create react-app my-app
複製程式碼

yarn create 在 Yarn 0.25+ 中可用

此外還可以全域性安裝腳手架

npm install -g create-react-app
create-react-app my-app
複製程式碼

輸出

執行任何這些命令都會在當前目錄中建立一個名為 my-app 的目錄。在該目錄中，它將生成初始專案結構並安裝依賴項：

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
複製程式碼

從上面目錄結構看出，沒有配置或複雜的資料夾結構，只是構建應用程式所需的檔案。因為在預設情況下 create-react-app 將 webpack 的所有配置檔案全部隱藏了，如果我們需要執行命令開啟所有的配置檔案，方面我們自己的配置，執行下面的命令：

npm run eject
複製程式碼

執行該命令後，它會讓你再確認一下，我們輸入 y 然後回車即可。

安裝完成後，你可以開啟專案目錄：

cd my-app
複製程式碼

初始化過程遇到的問題

按照上面的命令初始化react專案的時候，會遇到以下的問題，安裝某個包不成功：

用create-react-app命令初始化react專案及錯誤處理
在網上搜了幾個答案

  • 使用 npm install -g npm@latest 更新下npm，之後使用管理執行npm 重新試下就ok了。

試了該方法無效

  • 把npm的映象源改成淘寶映象
npm config get registry
//檢視預設的映象源
npm config set registry https://registry.npm.taobao.org
//改成淘寶映象源
複製程式碼

該方法也無效

  • 最後在GitHub上找到了一個解決辦法，最終解決了問題
npm cache clean --force
複製程式碼

該命令是清除npm快取

因為我是Mac系統，需要在前面加上sudo才可以

sudo npm cache clean --force
複製程式碼

最後按照上面4種方式之一建立react新專案即可。

相關文章