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

隨著時間的推移，我們看到了webpack、Rollup和Parcel等工具，它們極大地改善了前端開發(fā)人員的開發(fā)體驗。然而，當我們開始構建越來越多雄心勃勃的應用程序時，我們要處理的JavaScript數(shù)量也呈指數(shù)級增長。對于大型項目來說，包含數(shù)千個模塊并不罕見。

我們開始遇到基于JavaScript的工具的性能瓶頸:啟動開發(fā)服務器通常需要很長的等待時間(有時長達幾分鐘!)，即使使用HMR，文件編輯也需要幾秒鐘才能反映到瀏覽器中。緩慢的反饋循環(huán)會極大地影響開發(fā)人員的生產力和滿意度。

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

通過本教程中，你將從頭開始構建自己的應用，分別使用Vite-Cli和云開發(fā)平臺Vite-Cli快速搭建項目。

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

Vite要求Node.js版本=12.2.0。然而，一些模板需要更高的Node.js版本才能工作，如果你的包管理器發(fā)出警告，請升級。您可以使用n、nvm或nvm-windows在同一臺機器上管理多個版本的Node。要了解如何安裝Node.js，參閱nodejs.org。如果你不確定系統(tǒng)中正在運行的Node.js版本是什么，請在終端窗口中運行node-v。

npm包管理器因為我們通常都會使用Vite提供的腳手架搭建項目結構，所以要下載并安裝npm包并且npm=6。，你需要一個npm包管理器。本指南使用npm客戶端命令行界面，該界面默認安裝在Node.js。要檢查你是否安裝了npm客戶端，請在終端窗口中運行npm-v。

你可以使用Vite-Cli生成器來創(chuàng)建項目，生成應用和庫代碼，以及執(zhí)行各種持續(xù)開發(fā)任務，比如測試、打包和部署。

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

要想創(chuàng)建一個新的初始應用項目，請執(zhí)行：

NPM：

npm create vite@latest

Yarn：

yarn create vite

PNPM:

pnpm create vite

然后按照提示操作。

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

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

#npm7+,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

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

三、啟動應用服務器

進入工作區(qū)目錄，并啟動這個應用。

cd my-project npm install npm run dev

npm run dev命令會構建本應用、啟動開發(fā)服務器、監(jiān)聽源文件，并且當那些文件發(fā)生變化時https://vitejs.dev/

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

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

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

想要一鍵部署Vite，需要以下賬號和服務：

Github賬號(https://github.com/)，阿里云賬號，并使用阿里云賬號登錄云開發(fā)平臺(https://workbench.aliyun.com/)，為保證最好的使用體驗，請使用Chrome瀏覽器。開通OSS服務。未開通阿里云OSS的用戶，點擊鏈接(https://workbench.aliyun.com/product/open?code=oss)開通OSS服務。OSS開通免費，有