為什么要使用Vite

在瀏覽器中提供ES模塊之前，開發(fā)人員沒有以模塊化方式編寫JavaScript的本機(jī)機(jī)制。這就是為什么我們都很熟悉“捆綁”的概念:使用工具來抓取、處理和連接源模塊到可以在瀏覽器中運(yùn)行的文件中。

隨著時(shí)間的推移，我們看到了webpack、Rollup和Parcel等工具，它們極大地改善了前端開發(fā)人員的開發(fā)體驗(yàn)。

然而，當(dāng)我們開始構(gòu)建越來越多雄心勃勃的應(yīng)用程序時(shí)，我們要處理的JavaScript數(shù)量也呈指數(shù)級(jí)增長(zhǎng)。對(duì)于大型項(xiàng)目來說，包含數(shù)千個(gè)模塊并不罕見。我們開始遇到基于JavaScript的工具的性能瓶頸:啟動(dòng)開發(fā)服務(wù)器通常需要很長(zhǎng)的等待時(shí)間(有時(shí)長(zhǎng)達(dá)幾分鐘!)，即使使用HMR，文件編輯也需要幾秒鐘才能反映到瀏覽器中。緩慢的反饋循環(huán)會(huì)極大地影響開發(fā)人員的生產(chǎn)力和滿意度。

Vite旨在通過利用生態(tài)系統(tǒng)中的新進(jìn)展來解決這些問題:瀏覽器中本地ES模塊的可用性，以及用編譯到本地語言編寫的JavaScript工具的興起。

通過本教程中，你將從頭開始構(gòu)建自己的應(yīng)用，分別使用 Vite-Cli 和 云開發(fā)平臺(tái)

Vite-Cli 快速搭建項(xiàng)目

一、搭建本地開發(fā)環(huán)境

• Vite要求Node.js版本>=12.2.0。然而，一些模板需要更高的Node.js版本才能工作，如果你的包管理器發(fā)出警告，請(qǐng)升級(jí)。您可以使用n、nvm或nvm-windows 在同一臺(tái)機(jī)器上管理多個(gè)版本的Node。 要了解如何安裝 Node.js，參閱nodejs.org。 如果你不確定系統(tǒng)中正在運(yùn)行的 Node.js 版本是什么，請(qǐng)?jiān)诮K端窗口中運(yùn)行node -v。
• npm 包管理器 因?yàn)槲覀兺ǔ６紩?huì)使用Vite 提供的腳手架搭建項(xiàng)目結(jié)構(gòu)，所以要下載并安裝 npm 包并且npm >= 6。，你需要一個(gè) npm 包管理器。本指南使用 npm 客戶端命令行界面，該界面默認(rèn)安裝在 Node.js。要檢查你是否安裝了 npm 客戶端，請(qǐng)?jiān)诮K端窗口中運(yùn)行 npm -v 。
• 你可以使用 Vite-Cli 生成器 來創(chuàng)建項(xiàng)目，生成應(yīng)用和庫(kù)代碼，以及執(zhí)行各種持續(xù)開發(fā)任務(wù)，比如測(cè)試、打包和部署。

二、創(chuàng)建新的初始應(yīng)用

• 要想創(chuàng)建一個(gè)新的初始應(yīng)用項(xiàng)目，請(qǐng)執(zhí)行：

NPM：

npm create vite@latest

Yarn：

yarn create vite

PNPM:

pnpm create vite

然后按照提示操作

您還可以通過附加的命令行選項(xiàng)直接指定要使用的項(xiàng)目名稱和模板。例如，要腳手架一個(gè)Vite + Vue項(xiàng)目，運(yùn)行:

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue

請(qǐng)參見 create-vite 了解每個(gè)支持模板的更多細(xì)節(jié):vanilla, vanilla-ts, vue, vue-ts, react, react-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts。

三、啟動(dòng)應(yīng)用服務(wù)器

進(jìn)入工作區(qū)目錄，并啟動(dòng)這個(gè)應(yīng)用。

cd my-project
npm install
npm run dev

npm run dev 命令會(huì)構(gòu)建本應(yīng)用、啟動(dòng)開發(fā)服務(wù)器、監(jiān)聽源文件，并且當(dāng)那些文件發(fā)生變化時(shí)重新構(gòu)建本應(yīng)用，
也會(huì)打開瀏覽器，并訪問 http://localhost:3000/ 。

你會(huì)發(fā)現(xiàn)本應(yīng)用正運(yùn)行在瀏覽器中。

參考文獻(xiàn)：https://vitejs.dev/

云開發(fā)平臺(tái)一鍵部署Vite

作為Vite開發(fā)者的你，云開發(fā)平臺(tái)為你提供了一站式，全云端的開發(fā)平臺(tái)，讓你可以打開瀏覽器就完成開發(fā)，調(diào)試，上線，同時(shí)云開發(fā)平臺(tái)底層調(diào)用的是阿里云集團(tuán)Serverless產(chǎn)品，可以實(shí)現(xiàn)低門檻開發(fā)，部署，調(diào)試，降低開發(fā)上手成本，讓Vite應(yīng)用可以一鍵快速部署！

一、創(chuàng)建環(huán)境

想要一鍵部署Vite，需要以下賬號(hào)和服務(wù)：

• Github賬號(hào) (https://github.com/)，
• 阿里云賬號(hào)，并使用阿里云賬號(hào)登錄云開發(fā)平臺(tái) (https://workbench.aliyun.com/) ，為保證最好的使用體驗(yàn)，請(qǐng)使用Chrome瀏覽器。開通OSS服務(wù)。
• 未開通阿里云OSS的用戶，點(diǎn)擊鏈接 (https://workbench.aliyun.com/product/open?code=oss) 開通OSS服務(wù)。OSS開通免費(fèi)，有一定的免費(fèi)額度，超過額度之后按量付費(fèi)。

file

二、創(chuàng)建Vite應(yīng)用

• 創(chuàng)建前端應(yīng)用。打開快速開始 https://workbench.aliyun.com/app ，找到Vite點(diǎn)擊創(chuàng)建「創(chuàng)建應(yīng)用」按鈕。

file

• 云資源訪問授權(quán)。如果您之前沒有使用過云開發(fā)平臺(tái)，會(huì)出現(xiàn)云資源授權(quán)管理的選項(xiàng)，往下拉出現(xiàn)直至同意授權(quán)的字樣，點(diǎn)擊「同意授權(quán)」后出現(xiàn)授權(quán)成功，點(diǎn)擊進(jìn)入「下一步」。

file

• 綁定Github賬號(hào)。授權(quán)完成后選擇來源倉(cāng)庫(kù)為Github，按照提示點(diǎn)擊去綁定，綁定GitHub帳號(hào)，登錄后并點(diǎn)擊Authorize Aliyunworkben允許云開發(fā)平臺(tái)構(gòu)建、發(fā)布你的GitHub代碼為可訪問的網(wǎng)站。

file

• 選擇fork好的“Vite”代碼倉(cāng)庫(kù)。選擇第一步中的代碼倉(cāng)庫(kù)，主干分支，并點(diǎn)擊下一步。主干分支一般指的是代碼的master或main等分支。

file

填寫基本信息，完成創(chuàng)建。填寫基本信息并點(diǎn)擊「完成」。成功后進(jìn)入到應(yīng)用詳情和部署界面。

file

三、在日常環(huán)境部署

• 一鍵進(jìn)行應(yīng)用部署。在應(yīng)用詳情頁(yè)面點(diǎn)擊日常環(huán)境的「部署」按鈕進(jìn)行一鍵部署，部署狀態(tài)變成綠色已部署以后可以點(diǎn)擊訪問部署網(wǎng)站查看效果。

file

• 訪問Vite網(wǎng)站。日常環(huán)境的測(cè)試域名也是可以訪問的，點(diǎn)擊訪問已部署網(wǎng)站按鈕會(huì)出現(xiàn)一個(gè)彈出，點(diǎn)擊彈出上的立即訪問就能夠訪問已經(jīng)部署好的站點(diǎn)了。在部署完成后，可以繼續(xù)本地編碼，并將代碼push到應(yīng)用的“基本信息”中對(duì)應(yīng)的代碼倉(cāng)庫(kù)內(nèi)。

file

阿里云開發(fā)平臺(tái)多端應(yīng)用

構(gòu)建工具不管是日常工作、學(xué)習(xí)都會(huì)涉及到的領(lǐng)域，既如此挑選一款適合自己的應(yīng)用不止操作起來更順暢同時(shí)也使身心愉悅，帶來一天的好心情。

• 那諸多的應(yīng)用怎么去挑選合適自己的呢？
• 每一個(gè)都去下載、去看相關(guān)操作文檔去實(shí)驗(yàn)？
• 又或者聽取同學(xué)、同事的建議用著其中一款？
• 可是每個(gè)人的使用場(chǎng)景、需求、特征都一樣嗎？
• ······

帶著以上諸多疑惑進(jìn)入云開發(fā)平臺(tái)，有多種框架映入眼簾例如：Vue.js、React、Nuxt.js、Next.js、AntDesign等，其中還能看到一些內(nèi)容管理平臺(tái)例如：Hexo、Docusaurus、VuePress、Sapper等。在此條件下我們先挑一個(gè)較為感興趣的應(yīng)用點(diǎn)開去嘗試部署，會(huì)發(fā)現(xiàn)在原來線上部署應(yīng)用真的像在手機(jī)上下載APP一樣簡(jiǎn)單、快速。一個(gè)如此、其他便皆是大同小異了，多嘗試一些應(yīng)用發(fā)現(xiàn)每個(gè)的相同與不同，自然而然挑選最適合自己需求的應(yīng)用去在日常所用即可。

忙不完的活，做不完的工作，工作效益最高化是個(gè)人都在追求的，那勞逸結(jié)合必是肯定的。云開發(fā)平臺(tái)也有一些小游戲去幫助大家緩解小心情，類似頭像生成器、2048等。玩著自己部署出來的應(yīng)用成就感可就加倍呢，如果不喜歡游戲的整體布局、顏色等，那也可以根據(jù)從云開發(fā)平臺(tái)部署的經(jīng)驗(yàn)在去原有代碼基礎(chǔ)上去修改、部署等。這樣專屬自己的一款游戲就出來了呢，如果有心愛之人送給她這也合成不是一種浪漫呢！

file