deno + Vite 會碰撞出什么樣的火花呢？
進入2021年后，前端最火的是啥呢?我覺得就是尤大開發的Vite ，這是它官網的 slogan ,號稱：“下一代前端開發與構建工具” ，夠狂!webpack 肯定瑟瑟發抖了!
對于不了解 Vite 的讀者，我們先大概簡單介紹一下, 同時建議你去看看文檔，學習了解一下!
Vite (法語意為 "快速的"，發音 /vit/) 是一種新型前端構建工具，能夠顯著提升前端開發體驗。特點就是快，超級快! 它具有一個高度依賴 原生 ES 模塊的開發服務器，以提供速度驚人的 模塊熱更新(HMR)。使其如此快速的原因之一是，它一次只能按需處理一個文件，而不是構建整個項目。
默認情況下，它可以處理 TypeScript，JSX 和 CSS 模塊，所以你可以開箱即用。如果您想要構建用于生產的應用程序，它也可以輕松搞定，不做過多介紹了。
關于本文標題提到的 deno ，我們也做一個簡單的介紹。
了解 deno 的讀者(不了解的同學別慌，推薦大家閱讀Deno 鉆研之術)知道， deno 是 JavaScript 和 TypeScript 的安全運行時。換句話說，它可以在沒有瀏覽器的情況下執行 JavaScript 和 TypeScript。它之所以說是安全的，是因為執行的代碼運行在一個對系統的訪問受到限制的環境中。如果要使用某些功能，則需要為其提供顯式訪問。你把理解成一個瀏覽器環境也ok!
好了，關于deno和Vite,我相信大家有個簡單的認識了，想要進一步學習的可以訪問官網學習，本文不做贅述了!
deno 和 Vite 為何會有碰撞呢?
deno是一個js運行時，Vite 是一個前端構建工具，那么他們有啥聯系呢?容我慢慢道來!
眾所周知，deno 在誕生之日起，就不喜歡npm，處理第三方依賴項采用的是原生支持的方式。
在 deno 中，當你想要使用一個 package 包時候，必須使用與ES瀏覽器相同的方式，通過 import 一個 URL 來實現。差不多是這樣:
- import * as R from 'https://cdn.skypack.dev/ramda@0.27.1';
當然這是沒啥問題的，對于單個文件腳本來說是完美的。
對于更復雜的項目，我們可以約定將所有內容放入deps.ts 文件中，這不是最好的辦法，但是也可以。
還有一個實驗功能，稱為 import-maps ，看起來效果會更好些。
- 從1.8.0版本開始，deno中的 import-maps 才是穩定的。
反正不管怎么樣，我現在就想要下面這種方式，寫慣了 React項目，這樣才最爽!
- import * as R from 'ramda';
想要使用 npm包管理器來獲取 ramda。但是在 deno 中這就是一種罪過。這個時候試試尤大的Vite是不是可以幫到我呢?
Vite 助力 deno
假設我們要使用 ramda。同樣，我們要使用 npm 來獲取源代碼，因此我們執行下面操作。
- npm install ramda@0.27.1
現在讓我們創建腳本。我們將其稱為 main.js。
- import * as R from 'ramda';
- const increment = R.map(x => x + 1);
- console.log(increment([1, 2, 3]));
現在我們來安裝 vite。
- npm install -D vite@2.1.5
再創建一個文件 index.html, 用來測試效果。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>test</title>
- </head>
- <body>
- <script type="module" src="/main.js"></script>
- </body>
- </html>
現在使用vite。
- npx vite
如果一切順利，則應該在屏幕上顯示此內容。
- vite v2.1.5 dev server running at:
- > Local: http://localhost:3000/
- > Network: http://172.20.10.11:3000/
- > Network: http://192.168.138.17:3000/
- ready in 3724ms.
訪問 http://localhost:3000/ ，打開瀏覽器的 console, 你應該會得到這樣子：
image-20210404183312799
- [ 2, 3, 4 ]
很好。現在我們怎么樣在 deno 中得到這個結果呢?
我說過，deno 可以理解為一個瀏覽器。我們知道瀏覽器是從URL中拉取資源。在你開始使用 deno之前，如果你不想 "污染 "系統中的全局緩存，我建議設置 DENO_DIR 環境變量。在 mac 中，你可以這樣做:
- export DENO_DIR="$PWD/.cache"
- windows用戶，對不起啦，我也不會，你們自己百度吧~
接下來，我們首先直接運行main.js
- deno run main.js
結果報錯：
- error: relative import path "ramda" not prefixed with / or ./ or ../ Imported from "file:///Users/wangweidong/V2021/denoAndVite/main.js"
直接在文件系統中運行 main.js，而是運行 Vite 為我們起的本地服務的 main.js。
- deno run "http://localhost:3000/main.js"
結果，沒有報錯，我們成功了!
- Download http://localhost:3000/main.js
我們已經成功地在deno環境中使用了npm包。但不要高興太早，我們再運行一次。沒有 "Download http://..."。
現在在 main.js中改變一些內容，再次執行 main.js 。
- import * as R from 'ramda';
- const increment = R.map(x => x + 1);
- -
- - console.log(increment([1, 2, 3]));
- + console.log('hello');
是不是沒有收到 hello 呢?現在你想知道為什么嗎?
因為 deno 是從服務器(localhost)上抓取 main.js，所以它將源碼保存在緩存文件夾(DENO_DIR)中，除非url改變，否則它不會再嘗試下載。
我們該如何解決這個問題呢?有以下兩個辦法：
1、使用了一個querystring t 來附加一個隨機數到 url上，這樣每次執行命令時都會創建一個 "新" url。
- deno run "http://localhost:3000/main.js?t=$RANDOM"
2、使用參數 --reload
- deno run --reload "http://localhost:3000/main.js"
到現在，你已經擁有了一個帶有 Vite 和 deno 的開發環境。
以防萬一，有必要說一下。即使我們可以從 npm 下載任何我們想要的東西，也不意味著它能在 deno 上工作。有時候某個包就是不兼容，也沒辦法!
總結
這個探索性的實驗雖然是有效的，但是我不鼓勵大家使用這個組合來開生產應用，如果是個人實驗性的學習項目完全可以的!
