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

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

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

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

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

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

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

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

3、react項目開發(fā)環(huán)境搭建

react工程化項目創(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)建成功后會看到控制臺打印如下指令：

進入工程根目錄cd ./hello-world1

若創(chuàng)建時沒有安裝依賴成功，進入工程根目錄下手動安裝npm inatall即可

執(zhí)行指令：npm start，啟動成功后在瀏覽器輸入網(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作為工程名來構(gòu)建工程目錄。輸入指令后你會發(fā)現(xiàn)項目構(gòu)建的很快，那是因為腳手架沒有默認幫你安裝依賴，所以要進入工程目錄（cd ./hello-world2）并手動安裝依賴：npm install。依賴安裝完成后，即可啟動項目：npm run dev，同樣的，在瀏覽器輸入網(wǎng)址localhost:3000即可看到歡迎界面：

至此項目就啟動完畢了~~

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

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

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

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

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

4.2、不同的依賴安裝策略

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

4.3、使用nvm管理node版本

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

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

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

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

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

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

4.3.2、MacOS環(huá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ù)制代碼

接下來您可能不會看到安裝成功，反而會提示如下：

Failed to connect to raw.githubusercontent.com port 443

        這是因為某種神秘的東方力量導(dǎo)致的github訪問的問題，我們可以借助網(wǎng)址https://ipaddress.com/website/raw.githubusercontent.com查一下githubusercontent.com的真實IP，輸入githubusercontent.com查詢會看到：

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

1. 進入mac的host文件：sudo vim /etc/hosts

2. 最下邊追加IP映射

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

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

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

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

最后！

安裝成功的界面如下：

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

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)默認的16.13.2版本。如果想要安裝別的node版本，沒有必要再去node官網(wǎng)下載了，可以直接使用nvm指令下載。我們可以先使用nvm ls-remote看一下官方都有哪些正式版本：

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

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

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

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

5、附件

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

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

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