浏览器原生 ES imports尝鲜

最新推荐文章于 2023-06-29 22:25:13 发布

单眼皮丶儿

最新推荐文章于 2023-06-29 22:25:13 发布

阅读量556

点赞数

分类专栏： JavaScript 浏览器

本文链接：https://blog.csdn.net/Y_wq0616/article/details/111995696

版权

JavaScript 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

浏览器

3 篇文章 0 订阅

订阅专栏

作为Vue的忠实拥护者，怎么能不知道Vite呢？

今年四月，尤大大于一条微博宣布Vite诞生：

Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打包。虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。

当然，本文不是介绍Vite的，感兴趣的网上自行搜索，推荐一篇《如何看待 Web 开发构建工具 Vite？》

我只是想玩玩浏览器原生的ES imports，哈哈。

我写了一个简单的demo

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script type="module">
        import { util } from './helper.js';
        console.log(util);
    </script>
</body>

</html>

// helper.js
export const util = 'util';

由于需要服务环境，利用node搭了一个简易服务器

var express = require("express");
// 搭建服务器
var app = express();
// 使用静态中间件
app.use(express.static("demo"));
app.listen(3000);

其中<script type="module">是核心代码，我们启动服务，浏览器访问3000端口

可见helper.js请求成功了，也成功打印了相关内容，还是挺有意思的

单眼皮丶儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器原生 ES imports尝鲜

作为Vue的忠实拥护者，怎么能不知道Vite呢？今年四月，尤大大于一条微博宣布Vite诞生：Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打包。虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。当然
复制链接

扫一扫