Mac下搭建react開發環境

安裝node

1. 官網下載
   https://nodejs.org/en/
   

2. 雙擊安裝，接下來都是默認選擇即可，直至安裝成功

3. 測試是否安裝成功，分別輸入以下命令:

node -v
npm -v

如下圖所示，說明安裝成功了。

若提示沒有找到命令，則需要解決了，這里不贅述了。

安裝react

1. 設置npm源

zhanweideMacBook-Air:~ zhanwei$ npm config set registry https://registry.npm.taobao.org --global
npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /usr/local/etc
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/etc'
npm ERR!  [Error: EACCES: permission denied, mkdir '/usr/local/etc'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'mkdir',
npm ERR!   path: '/usr/local/etc'
npm ERR! }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/zhanwei/.npm/_logs/2020-04-29T15_10_56_578Z-debug.log

看到上面的報錯信息，結果顯然易見，權限不足，以失敗告終。

解決權限不足的問題

然而實際上，node官網早已對這種情況作出了合理的修改方法，並且官網強烈建議用戶不要使用root、sudo等方法覆蓋權限。鏈接如下: node官網給出的修改方法

1. 使用nvm重新安裝node

nvm 即node version manager，這是node官網的推薦方法，使用nvm安裝node時會自動申請各種權限，在之后的使用中就不會有權限問題了

安裝方法如下: node官網給出的安裝方式

2. 改變npm的默認路徑

第二個方法是我目前使用的方法，這也是不想重新安裝node的用戶可以采用的方法。可以將默認的全局安裝路徑修改到當前用戶的home目錄下

• 新建一個全局安裝的路徑

 mkdir ~/.npm-global

• 配置npm使用新的路徑

 npm config set prefix ‘~/.npm-global’

• 打開或新建~/.bash_profile文件，在末尾加入

 export PATH=~/.npm-global/bin:$PATH

• 更新系統環境變量

 source ~/.bash_profile

• PS: 如果你不想去修改.bash_profile文件的話，你也可以使用如下命令

 # 配置npm config的路徑
 NPM_CONFIG_PREFIX=~/.npm-global

以下是我執行以上命令的順序及結果：

zhanweideMacBook-Air:~ zhanwei$ mkdir .npm-global
zhanweideMacBook-Air:~ zhanwei$ npm config set prefix '~/.npm-global'
zhanweideMacBook-Air:~ zhanwei$ export PATH=~/.npm-global/bin:$PATH
zhanweideMacBook-Air:~ zhanwei$ PM_CONFIG_PREFIX=~/.npm-global

以上權限問題解決了，然后就可以來設置npm源了。

設置npm源

zhanweideMacBook-Air:~ zhanwei$ npm config set registry https://registry.npm.taobao.org --global
zhanweideMacBook-Air:~ zhanwei$ npm config set disturl https://npm.taobao.org/dist --global

安裝全局create-react-app

zhanweideMacBook-Air:~ zhanwei$ npm install -g create-react-app
/Users/zhanwei/.npm-global/bin/create-react-app -> /Users/zhanwei/.npm-global/lib/node_modules/create-react-app/index.js
+ create-react-app@3.4.1
updated 1 package in 21.579s

創建工程

在工作區下創建第一個APP，在終端輸入如下命令

create-react-app myapp

可能需要等個幾分鍾

Success! Created myapp at /Users/zhanwei/workspace/myapp
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd myapp
  npm start

Happy hacking!

到最后看到上面的輸出，代表工程創建成功了,然后進入到app根目錄中。

zhanweideMacBook-Air:workspace zhanwei$ cd myapp/

運行項目

zhanweideMacBook-Air:workspace zhanwei$ npm start

接下來我們可以看到正在編譯。。。

Compiled successfully!

You can now view myapp in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.124.4:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

如上就運行成功了，默認是3000端口，在瀏覽器上看到到畫面：