日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢(xún)
選擇下列產(chǎn)品馬上在線(xiàn)溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
deno+Vite會(huì)碰撞出什么樣的火花呢？

 進(jìn)入2021年后，前端最火的是啥呢?我覺(jué)得就是尤大開(kāi)發(fā)的Vite ，這是它官網(wǎng)的 slogan ,號(hào)稱(chēng)：“下一代前端開(kāi)發(fā)與構(gòu)建工具” ，夠狂!webpack 肯定瑟瑟發(fā)抖了!

專(zhuān)注于為中小企業(yè)提供成都網(wǎng)站制作、成都做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)慶元免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000多家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

對(duì)于不了解 Vite 的讀者，我們先大概簡(jiǎn)單介紹一下, 同時(shí)建議你去看看文檔，學(xué)習(xí)了解一下!

Vite (法語(yǔ)意為 "快速的"，發(fā)音 /vit/) 是一種新型前端構(gòu)建工具，能夠顯著提升前端開(kāi)發(fā)體驗(yàn)。特點(diǎn)就是快，超級(jí)快! 它具有一個(gè)高度依賴(lài) 原生 ES 模塊的開(kāi)發(fā)服務(wù)器，以提供速度驚人的 模塊熱更新(HMR)。使其如此快速的原因之一是，它一次只能按需處理一個(gè)文件，而不是構(gòu)建整個(gè)項(xiàng)目。

默認(rèn)情況下，它可以處理 TypeScript，JSX 和 CSS 模塊，所以你可以開(kāi)箱即用。如果您想要構(gòu)建用于生產(chǎn)的應(yīng)用程序，它也可以輕松搞定，不做過(guò)多介紹了。

關(guān)于本文標(biāo)題提到的 deno ，我們也做一個(gè)簡(jiǎn)單的介紹。

了解 deno 的讀者(不了解的同學(xué)別慌，推薦大家閱讀Deno 鉆研之術(shù))知道， deno 是 JavaScript 和 TypeScript 的安全運(yùn)行時(shí)。換句話(huà)說(shuō)，它可以在沒(méi)有瀏覽器的情況下執(zhí)行 JavaScript 和 TypeScript。它之所以說(shuō)是安全的，是因?yàn)閳?zhí)行的代碼運(yùn)行在一個(gè)對(duì)系統(tǒng)的訪(fǎng)問(wèn)受到限制的環(huán)境中。如果要使用某些功能，則需要為其提供顯式訪(fǎng)問(wèn)。你把理解成一個(gè)瀏覽器環(huán)境也ok!

好了，關(guān)于deno和Vite,我相信大家有個(gè)簡(jiǎn)單的認(rèn)識(shí)了，想要進(jìn)一步學(xué)習(xí)的可以訪(fǎng)問(wèn)官網(wǎng)學(xué)習(xí)，本文不做贅述了!

deno 和 Vite 為何會(huì)有碰撞呢?

deno是一個(gè)js運(yùn)行時(shí)，Vite 是一個(gè)前端構(gòu)建工具，那么他們有啥聯(lián)系呢?容我慢慢道來(lái)!

眾所周知，deno 在誕生之日起，就不喜歡npm，處理第三方依賴(lài)項(xiàng)采用的是原生支持的方式。

在 deno 中，當(dāng)你想要使用一個(gè) package 包時(shí)候，必須使用與ES瀏覽器相同的方式，通過(guò) import 一個(gè) URL 來(lái)實(shí)現(xiàn)。差不多是這樣:

 
 
 
 
    
  
  
  
  
  1. import * as R from 'https://cdn.skypack.dev/ramda@0.27.1'; 
    2.

當(dāng)然這是沒(méi)啥問(wèn)題的，對(duì)于單個(gè)文件腳本來(lái)說(shuō)是完美的。

對(duì)于更復(fù)雜的項(xiàng)目，我們可以約定將所有內(nèi)容放入deps.ts 文件中，這不是最好的辦法，但是也可以。

還有一個(gè)實(shí)驗(yàn)功能，稱(chēng)為 import-maps ，看起來(lái)效果會(huì)更好些。

  • 從1.8.0版本開(kāi)始，deno中的 import-maps 才是穩(wěn)定的。

反正不管怎么樣，我現(xiàn)在就想要下面這種方式，寫(xiě)慣了 React項(xiàng)目，這樣才最爽!

 
 
 
 
    
  
  
  
  
  1. import * as R from 'ramda'; 
    2.

想要使用 npm包管理器來(lái)獲取 ramda。但是在 deno 中這就是一種罪過(guò)。這個(gè)時(shí)候試試尤大的Vite是不是可以幫到我呢?

Vite 助力 deno

假設(shè)我們要使用 ramda。同樣，我們要使用 npm 來(lái)獲取源代碼，因此我們執(zhí)行下面操作。

 
 
 
 
    
  
  
  
  
  1. npm install ramda@0.27.1 
    2.

現(xiàn)在讓我們創(chuàng)建腳本。我們將其稱(chēng)為 main.js。

 
 
 
 
    
  
  
  
  
  1. import * as R from 'ramda'; 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. const increment = R.map(x => x + 1); 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. console.log(increment([1, 2, 3])); 
    6.

現(xiàn)在我們來(lái)安裝 vite。

 
 
 
 
    
  
  
  
  
  1. npm install -D vite@2.1.5 
    2.

再創(chuàng)建一個(gè)文件 index.html, 用來(lái)測(cè)試效果。

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4.    
    5. 
  
  
  
  
  5.   test 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7.  
    8. 
  
  
  
  
  8.    
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10.  
    11.

現(xiàn)在使用vite。

 
 
 
 
    
  
  
  
  
  1. npx vite 
    2.

如果一切順利，則應(yīng)該在屏幕上顯示此內(nèi)容。

 
 
 
 
    
  
  
  
  
  1. vite v2.1.5 dev server running at: 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. > Local:    http://localhost:3000/ 
    4. 
  
  
  
  
  4. > Network:  http://172.20.10.11:3000/ 
    5. 
  
  
  
  
  5. > Network:  http://192.168.138.17:3000/ 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7. ready in 3724ms. 
    8.

訪(fǎng)問(wèn) http://localhost:3000/ ，打開(kāi)瀏覽器的 console, 你應(yīng)該會(huì)得到這樣子：

image-20210404183312799

 
 
 
 
    
  
  
  
  
  1. [ 2, 3, 4 ] 
    2.

很好?，F(xiàn)在我們?cè)趺礃釉?deno 中得到這個(gè)結(jié)果呢?

我說(shuō)過(guò)，deno 可以理解為一個(gè)瀏覽器。我們知道瀏覽器是從URL中拉取資源。在你開(kāi)始使用 deno之前，如果你不想 "污染 "系統(tǒng)中的全局緩存，我建議設(shè)置 DENO_DIR 環(huán)境變量。在 mac 中，你可以這樣做:

 
 
 
 
    
  
  
  
  
  1. export DENO_DIR="$PWD/.cache" 
    2.
  • windows用戶(hù)，對(duì)不起啦，我也不會(huì)，你們自己百度吧~

接下來(lái)，我們首先直接運(yùn)行main.js

 
 
 
 
    
  
  
  
  
  1. deno run main.js 
    2.

結(jié)果報(bào)錯(cuò)：

 
 
 
 
    
  
  
  
  
  1. error: relative import path "ramda" not prefixed with / or ./ or ../ Imported from "file:///Users/wangweidong/V2021/denoAndVite/main.js" 
    2.

直接在文件系統(tǒng)中運(yùn)行 main.js，而是運(yùn)行 Vite 為我們起的本地服務(wù)的 main.js。

 
 
 
 
    
  
  
  
  
  1. deno run "http://localhost:3000/main.js" 
    2.

結(jié)果，沒(méi)有報(bào)錯(cuò)，我們成功了!

 
 
 
 
    
  
  
  
  
  1. Download http://localhost:3000/main.js 
    2.

我們已經(jīng)成功地在deno環(huán)境中使用了npm包。但不要高興太早，我們?cè)龠\(yùn)行一次。沒(méi)有 "Download http://..."。

現(xiàn)在在 main.js中改變一些內(nèi)容，再次執(zhí)行 main.js 。

 
 
 
 
    
  
  
  
  
  1. import * as R from 'ramda'; 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. const increment = R.map(x => x + 1); 
    4. 
  
  
  
  
  4. - 
    5. 
  
  
  
  
  5. - console.log(increment([1, 2, 3])); 
    6. 
  
  
  
  
  6. + console.log('hello'); 
    7.

是不是沒(méi)有收到 hello 呢?現(xiàn)在你想知道為什么嗎?

因?yàn)?deno 是從服務(wù)器(localhost)上抓取 main.js，所以它將源碼保存在緩存文件夾(DENO_DIR)中，除非url改變，否則它不會(huì)再?lài)L試下載。

我們?cè)撊绾谓鉀Q這個(gè)問(wèn)題呢?有以下兩個(gè)辦法：

1、使用了一個(gè)querystring t 來(lái)附加一個(gè)隨機(jī)數(shù)到 url上，這樣每次執(zhí)行命令時(shí)都會(huì)創(chuàng)建一個(gè) "新" url。

 
 
 
 
    
  
  
  
  
  1. deno run "http://localhost:3000/main.js?t=$RANDOM" 
    2.

2、使用參數(shù) --reload

 
 
 
 
    
  
  
  
  
  1. deno run --reload "http://localhost:3000/main.js" 
    2.

到現(xiàn)在，你已經(jīng)擁有了一個(gè)帶有 Vite 和 deno 的開(kāi)發(fā)環(huán)境。

以防萬(wàn)一，有必要說(shuō)一下。即使我們可以從 npm 下載任何我們想要的東西，也不意味著它能在 deno 上工作。有時(shí)候某個(gè)包就是不兼容，也沒(méi)辦法!

總結(jié)

這個(gè)探索性的實(shí)驗(yàn)雖然是有效的，但是我不鼓勵(lì)大家使用這個(gè)組合來(lái)開(kāi)生產(chǎn)應(yīng)用，如果是個(gè)人實(shí)驗(yàn)性的學(xué)習(xí)項(xiàng)目完全可以的!


當(dāng)前名稱(chēng)：deno+Vite會(huì)碰撞出什么樣的火花呢？
瀏覽路徑：http://www.5511xx.com/article/djcoehp.html