如何用Vite+React構建前端線上表格

Vite是隨著Vue3一起釋出的一款新型前端構建工具，能夠顯著地提升前端開發體驗，它主要由兩部分組成：

（1） 一個開發伺服器，它基於原生 ES 模組 提供了 豐富的內建功能，例如速度快到驚人的 模組熱更新（HMR）。

（2）一套構建指令，它使用 Rollup 打包你的程式碼，並且它是預配置的，可輸出用於生產環境的高度優化過的靜態資源。

Vite意在提供開箱即用的配置，同時它的 外掛 API 和 JavaScript API 帶來了高度的可擴充套件性，並有完整的型別支援。

Vite最初發行時，僅能用來構建Vue3專案，但隨著使用群體的不斷擴大，目前能支援構建的專案越來越多，已經包含了以下幾種專案模板：

我們可以看到，目前已經支援了react以及react-ts模板。對於一個經常性使用React開發專案的“程式媛”來說，之前一直使用的是create-react-app來構建react應用，也沒有覺得有太大的問題。最開始要使用到Vite時，本葡萄的內心還是有點疑慮的，因為畢竟Vite是跟著Vue3釋出的，對於使用者而言，潛意識會覺得它和Vue更加適配；但在實際上手用了之後，才會發現Vite的搭建速度，不虧於它的名字。

接下來我們就是一起動手用Vite來建立一個基於React的線上Excel專案吧。

專案實戰

相容性提示：Vite 需要 Node.js 版本 >= 12.0.0。然而，有些模板需要依賴更高的 Node 版本才能正常執行，當你的包管理器發出警告時，請注意升級你的 Node 版本。

我們可以通過以下命令，快速地建立一個react-ts的專案，如果當前專案並不想使用ts的話，只需要將--template後的預製模板改為react即可。

檢視 create-vite 可以獲取其它模板的更多細節：vanilla，vanilla-ts，vue，vue-ts，react，react-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts。

建立一個react-ts專案僅需7.813秒，這速度已經讓很多專案望塵莫及了。接下來我們就可以按照終端中的提示，先進入到專案目錄下，之後執行npm install，安裝完成後，npm run dev就可以啟動了。這個階段如果有任何安裝問題，可以面向搜尋引擎解決，一般來說，需要指定一個其它的安裝映象。

專案預設啟動在3000埠。開啟後展示如上圖所示，到這一步我們使用Vite就已經建立好React專案了，接下來我們需要引入純前端表格控制元件，用來構建一個線上Excel。要想使用，就必須先引入元件相關資源，我們可以在package.json中新增以下內容：

新增完成後，再次進入到當前專案目錄下，執行npm install，完成新新增資源的安裝。當然，大家在引入時，可以現在npm上查詢一下SpreadJS目前最新的版本，去引入最新版本的產品。

引入完成後，我們可以將專案中不需要使用的東西刪一刪，讓頁面看起來乾淨一點。之後在src下新建components資料夾，用來存放之後我們寫的表格元件。然後，再在components資料夾下新建OnlineDesigner.tsx檔案。接下來我們就需要在OnlineDesigner.tsx檔案中去引入SpreadJS相關資源，編寫表格元件，詳細程式碼如下：

接下來，我們需要在app.tsx中引入自己定義的OnlineDesigner元件即可，詳細程式碼為：

最後，我們來看看顯示效果吧：

通過以上幾步操作，你就可以擁有一個線上的Excel系統啦~

詳情可以私信回覆“vite react”，獲取文內demo！