1、node環(huán)境與開(kāi)發(fā)工具準(zhǔn)備

        前端工程化開(kāi)發(fā)，本地啟動(dòng)開(kāi)發(fā)環(huán)境都是基于nodejs的，命令行里輸入指令node -v可以幫助確認(rèn)您的電腦上是否安裝了node，如果沒(méi)有安裝，則可以去 node官網(wǎng) 下載安裝包，如下圖所示：         不管是在windows還是在mac環(huán)境下，都是一鍵傻瓜式安裝，甚至連環(huán)境變量都不需要手動(dòng)配置，這里就不過(guò)多介紹了。

2、開(kāi)發(fā)工具準(zhǔn)備

        前端的開(kāi)發(fā)工具，常見(jiàn)的有VSCode、WebStorm、Atom等，只需用其中之一便足可以完成您的開(kāi)發(fā)任務(wù)。這里筆者給出常用編輯器的對(duì)比。

        筆者接下來(lái)的開(kāi)發(fā)就以VSCode為準(zhǔn)。

        vsCode作為目前最為流行的輕量級(jí)開(kāi)發(fā)工具，廣受前后端程序員的喜愛(ài)，其插件庫(kù)也是十分的豐富，可以供開(kāi)發(fā)的進(jìn)行自定義配置，而且提供了插件開(kāi)發(fā)的功能，使得開(kāi)源作者能夠更加輕松的自定義自己的插件，并且有支持遠(yuǎn)程開(kāi)發(fā)等優(yōu)點(diǎn)。相比于webStorm和sublime這種需要購(gòu)買(mǎi)正式版（sublime雖然不買(mǎi)也沒(méi)什么關(guān)系）的產(chǎn)品，其最直接的優(yōu)點(diǎn)是他是免費(fèi)的！ vsCode官網(wǎng)地址為：https://code.visualstudio.com/，開(kāi)發(fā)者可以下載自己所需的版本：

國(guó)內(nèi)用戶未翻墻的可能會(huì)出現(xiàn)下載緩慢的問(wèn)題，這里作者提前下載好了國(guó)內(nèi)版本放在文章末尾供大家下載。

        atom也是免費(fèi)的開(kāi)發(fā)工具，這個(gè)根據(jù)自己的喜好來(lái)使用。作者一開(kāi)始寫(xiě)網(wǎng)頁(yè)也是用的atom，但是當(dāng)你下載了官網(wǎng)的安裝包，看到他的大小后，或者在使用很長(zhǎng)一段時(shí)間后打開(kāi)資源管理器后，你可能就會(huì)像作者一樣棄用它！這里還是給出其官網(wǎng)地址https://atom.io/，他的界面作者還是挺喜歡的。

3、react項(xiàng)目開(kāi)發(fā)環(huán)境搭建

react工程化項(xiàng)目創(chuàng)建的腳手架工具這里作者介紹主流的兩種：create-react-app和vite.

3.1、create-react-app構(gòu)建

        這里使用npx安裝：npx create-react-app <工程名>。 注意工程名稱使用字母數(shù)字連接線的形式(范例參考：create-react-app.dev/docs/gettin…)，這里作者使用hello-world1. 構(gòu)建成功后會(huì)看到控制臺(tái)打印如下指令：

進(jìn)入工程根目錄cd ./hello-world1

若創(chuàng)建時(shí)沒(méi)有安裝依賴成功，進(jìn)入工程根目錄下手動(dòng)安裝npm inatall即可

執(zhí)行指令：npm start，啟動(dòng)成功后在瀏覽器輸入網(wǎng)址localhost:3000即可看到歡迎界面：

3.2、vite構(gòu)建

終端輸入指令

# npm 6.x npm init vite@latest <工程名> --template <模板名> # npm 7+ npm init vite@latest <工程名> -- --template <模板名> 復(fù)制代碼

        這里我們當(dāng)然使用react作為模板名、hello-world2作為工程名來(lái)構(gòu)建工程目錄。輸入指令后你會(huì)發(fā)現(xiàn)項(xiàng)目構(gòu)建的很快，那是因?yàn)槟_手架沒(méi)有默認(rèn)幫你安裝依賴，所以要進(jìn)入工程目錄（cd ./hello-world2）并手動(dòng)安裝依賴：npm install。依賴安裝完成后，即可啟動(dòng)項(xiàng)目：npm run dev，同樣的，在瀏覽器輸入網(wǎng)址localhost:3000即可看到歡迎界面：

至此項(xiàng)目就啟動(dòng)完畢了~~

        如果您只是想快速開(kāi)發(fā)一個(gè)項(xiàng)目，環(huán)境配置到這里就結(jié)束了。以下內(nèi)容為選擇性觀看內(nèi)容，如果您覺(jué)得依賴安裝比較慢，又或者需要管理不同版本的node，可以繼續(xù)往下看。

4、依賴安裝的方式(選讀)

        上邊章節(jié)中，作者主要使用npm install的方式安裝依賴，但是有時(shí)候，尤其是網(wǎng)絡(luò)不太好的情況下，依賴總是不能被正確安裝，出現(xiàn)安裝錯(cuò)誤。這個(gè)時(shí)候可能就需要進(jìn)行下一步操作。

4.1、npm國(guó)內(nèi)鏡像配置

        國(guó)內(nèi)npm鏡像可以繞開(kāi)被墻的困擾，作者推薦taobao的鏡像。你可以這樣執(zhí)行命令： npm install -g cnpm --registry=https://registry.npm.taobao.org，這樣就全局安裝了使用的taobao國(guó)內(nèi)鏡像的cnpm指令。你在項(xiàng)目根目錄下試試cnpm install就會(huì)快很多。
        你還可以這樣配置鏡像： npm config set registry https://registry.npm.taobao.org，這樣你即使使用npm指令安裝，也會(huì)走國(guó)內(nèi)鏡像安裝。

4.2、不同的依賴安裝策略

        前端工程化項(xiàng)目依賴安裝不只有npm方式，還有他的各種變種。比如安裝速度快，版本能夠更好統(tǒng)一的yarn或者運(yùn)行速度更快的pnpm。細(xì)心的讀者可以發(fā)現(xiàn)，上面create-react-app安裝的方式使用了npx，而沒(méi)有使用npm -g這種全局指令方式。在npm 5.2以后的版本默認(rèn)會(huì)安裝npx命令，它可以避免全局安裝模塊。這些不同的策略在之后的文章中會(huì)提及，在這里不做過(guò)多的贅述。

4.3、使用nvm管理node版本

        nvm是目前比較主流的node版本管理工具，類似的還有nodist（https://github.com/nullivex/nodist/releases）。這里以nvm為準(zhǔn)進(jìn)行介紹。

4.3.1、windows環(huán)境安裝

        進(jìn)入官網(wǎng)下載鏈接https://github.com/coreybutler/nvm-windows/releases，下載assets中的安裝包（文章末尾提供安裝包）。

        這里可以直接下載setup版的，解壓后雙擊就可安裝。當(dāng)然也可以選擇noinstall版本的，通過(guò)手動(dòng)配置環(huán)境來(lái)達(dá)到相同的目的。這里以安裝版為例。下圖為安裝界面：

一路next到底完成安裝即可。環(huán)境變量已經(jīng)自動(dòng)配置好了。 在命令行中檢查是否安裝成功：

看到版本說(shuō)明已經(jīng)正確安裝！！

4.3.2、MacOS環(huán)境安裝（需翻墻）

        進(jìn)入官網(wǎng)下載鏈接https://github.com/nvm-sh/nvm#installing-and-updating，可以看到安裝指引，我們遵從官方給的指令直接執(zhí)行即可：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash 復(fù)制代碼

接下來(lái)您可能不會(huì)看到安裝成功，反而會(huì)提示如下：

Failed to connect to raw.githubusercontent.com port 443

        這是因?yàn)槟撤N神秘的東方力量導(dǎo)致的github訪問(wèn)的問(wèn)題，我們可以借助網(wǎng)址https://ipaddress.com/website/raw.githubusercontent.com查一下githubusercontent.com的真實(shí)IP，輸入githubusercontent.com查詢會(huì)看到：

        我們找下邊查到的IP其中一個(gè)即可（如果不行就換著試試），執(zhí)行下述步驟：

1. 進(jìn)入mac的host文件：sudo vim /etc/hosts

2. 最下邊追加IP映射

        經(jīng)過(guò)這兩步后再次嘗試一哈，就可以執(zhí)行成功了。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash 復(fù)制代碼

        如果很不幸你叒叕出現(xiàn)了如下錯(cuò)誤，不要驚慌，應(yīng)該是沒(méi)有檢測(cè)到你的github賬戶，你只需要打開(kāi)github主頁(yè)登錄賬號(hào)重試即可。

unable to access 'github.com/nvm-sh/nvm.…': LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443

最后！

安裝成功的界面如下：

        此時(shí)先不要著急，全局的nvm指令還沒(méi)有加入環(huán)境變量中，需要你來(lái)手動(dòng)添加。執(zhí)行命令(以zsh終端為例) sudo vim ~/.zshrc，進(jìn)入編輯后，追加：

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm 復(fù)制代碼

然后生效配置文件：source ~/.zshrc即可。

現(xiàn)在就試試nvm指令：

成功！

4.3.3、nvm基礎(chǔ)使用

我們可以使用nvm list命令查看當(dāng)前node的版本列表

        可以看到，當(dāng)前只有系統(tǒng)默認(rèn)的16.13.2版本。如果想要安裝別的node版本，沒(méi)有必要再去node官網(wǎng)下載了，可以直接使用nvm指令下載。我們可以先使用nvm ls-remote看一下官方都有哪些正式版本：

列出的版本都是可以安裝的，我們這里可以安裝穩(wěn)定版：nvm install stable

        可以看到截止作者寫(xiě)這篇文章時(shí)，node的穩(wěn)定版本是17.4.0，nvm會(huì)自動(dòng)切換進(jìn)安裝的版本上。如果想要自定義版本號(hào)安裝，可以使用指令nvm install <版本號(hào)>

        這里我們安裝了12.22.10版本，再次nvm list可以看到已經(jīng)有三個(gè)版本了。想要在多個(gè)版本之間切換，只需使用指令nvm use <版本號(hào)>即可一鍵切換！

至此，前端工程化項(xiàng)目的環(huán)境配置已經(jīng)結(jié)束！

5、附件

附件清單：vscode安裝包、nvm安裝包（win）、atom安裝包（mac）。
下載鏈接：

鏈接: pan.baidu.com/s/1zD2s9UjX…  提取碼: 5diu

作者：小肚肚肚肚肚哦
鏈接：https://juejin.cn/post/7069976788822130718
來(lái)源：稀土掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。