deno + Vite 会碰撞出什么样的火花呢?

开发 开发工具
Vite (法语意为 "快速的",发音 /vit/) 是一种新型前端构建工具,能够显著提升前端开发体验。特点就是快,超级快! 它具有一个高度依赖 原生 ES 模块的开发服务器,以提供速度惊人的 模块热更新(HMR)。

[[391271]]

 进入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 来实现。差不多是这样:

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

当然这是没啥问题的,对于单个文件脚本来说是完美的。

对于更复杂的项目,我们可以约定将所有内容放入deps.ts 文件中,这不是最好的办法,但是也可以。

还有一个实验功能,称为 import-maps ,看起来效果会更好些。

  • 从1.8.0版本开始,deno中的 import-maps 才是稳定的。

反正不管怎么样,我现在就想要下面这种方式,写惯了 React项目,这样才最爽!

  1. import * as R from 'ramda'

想要使用 npm包管理器来获取 ramda。但是在 deno 中这就是一种罪过。这个时候试试尤大的Vite是不是可以帮到我呢?

Vite 助力 deno

假设我们要使用 ramda。同样,我们要使用 npm 来获取源代码,因此我们执行下面操作。

  1. npm install ramda@0.27.1 

现在让我们创建脚本。我们将其称为 main.js。

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

现在我们来安装 vite。

  1. npm install -D vite@2.1.5 

再创建一个文件 index.html, 用来测试效果。

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3. <head> 
  4.   <meta charset="UTF-8"
  5.   <title>test</title> 
  6. </head> 
  7. <body> 
  8.   <script type="module" src="/main.js"></script> 
  9. </body> 
  10. </html> 

现在使用vite。

  1. npx vite 

如果一切顺利,则应该在屏幕上显示此内容。

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

访问 http://localhost:3000/ ,打开浏览器的 console, 你应该会得到这样子:


image-20210404183312799

  1. [ 2, 3, 4 ] 

很好。现在我们怎么样在 deno 中得到这个结果呢?

我说过,deno 可以理解为一个浏览器。我们知道浏览器是从URL中拉取资源。在你开始使用 deno之前,如果你不想 "污染 "系统中的全局缓存,我建议设置 DENO_DIR 环境变量。在 mac 中,你可以这样做:

  1. export DENO_DIR="$PWD/.cache" 
  • windows用户,对不起啦,我也不会,你们自己百度吧~

接下来,我们首先直接运行main.js

  1. deno run main.js 

结果报错:

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

直接在文件系统中运行 main.js,而是运行 Vite 为我们起的本地服务的 main.js。

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

结果,没有报错,我们成功了!

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

我们已经成功地在deno环境中使用了npm包。但不要高兴太早,我们再运行一次。没有 "Download http://..."。

现在在 main.js中改变一些内容,再次执行 main.js 。

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

是不是没有收到 hello 呢?现在你想知道为什么吗?

因为 deno 是从服务器(localhost)上抓取 main.js,所以它将源码保存在缓存文件夹(DENO_DIR)中,除非url改变,否则它不会再尝试下载。

我们该如何解决这个问题呢?有以下两个办法:

1、使用了一个querystring t 来附加一个随机数到 url上,这样每次执行命令时都会创建一个 "新" url。

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

2、使用参数 --reload

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

到现在,你已经拥有了一个带有 Vite 和 deno 的开发环境。

以防万一,有必要说一下。即使我们可以从 npm 下载任何我们想要的东西,也不意味着它能在 deno 上工作。有时候某个包就是不兼容,也没办法!

总结

这个探索性的实验虽然是有效的,但是我不鼓励大家使用这个组合来开生产应用,如果是个人实验性的学习项目完全可以的!

 

责任编辑:姜华 来源: 程序员自习室
相关推荐

2020-04-09 16:16:33

新基建智慧城市物联网

2018-06-13 13:25:01

2016-07-07 10:33:53

思科DNA视频

2017-12-15 12:49:50

2012-09-26 09:45:19

大数据在线旅游

2022-02-11 14:23:02

人工智能AI

2018-08-14 10:52:21

电竞少年

2017-11-20 09:08:13

HPC机器学习DNN

2018-09-26 20:01:17

金融大数据数据平台

2018-01-23 13:57:46

AI

2021-11-15 08:30:27

码农公务员同学

2019-04-26 14:31:27

物联网电子商务IOT

2022-08-04 13:43:52

人工智能文艺创作诗歌

2021-03-11 14:28:07

云计算云原生边缘计算

2018-08-29 10:50:29

区块链人工智能AI

2018-04-04 12:34:44

云计算区块链融合

2022-06-24 14:09:47

物联网元宇宙数字孪生

2011-11-07 19:00:57

IT听听看电影和ITIT动作电影

2016-10-18 11:10:12

存储

2021-10-25 22:21:30

区块链分布式存储技术
点赞
收藏

51CTO技术栈公众号