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