SegmentFault 思否技术周刊 Vol.80 — 玩转新时代前端构建工具

SegmentFault思否 · 公众号 · 程序员 · 2023-02-11 12:01

正文

Vite 是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

Vite 提供了一套原生 ESM 的 HMR API。具有 HMR 功能的框架可以利用该 API 提供即时、准确的更新，而无需重新加载页面或清除应用程序状态。Vite 内置了 HMR 到 Vue.js 单文件组件（SFC）和 React Fast Refresh 中。

文章推荐

迁移 Vue v2.x 版本到 Vite

作者： jsliang

本次「迁移 Vue v2.x 项目到 Vite」将分为 2 个部分：

本文更倾向于随手可查工具文，就好比之前写过的 Webpack 4 文章一样，它很快会石沉大海，但是我们将碰到的问题都反馈出来后，会让后面的人少跑弯路，这是很棒的事情。

vite3 + vue3如何封装健壮的【SVG插件】?

作者： 代码诗人_

概念： SVG是一种基于XML的矢量图形格式，SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体,用于在Web和其他环境中显示各种图形；它允许我们编写可缩放的二维图形，并可通过CSS或JavaScript进行操作。它由万维网联盟制定，是一个开放标准。

优点：可伸缩性，响应性，交互性，可编程性，体积小性能高。

因为SVG是基于矢量的，所有在放大图形时不会出现任何降低或丢失保真度的情况。它只是重新绘制以适应更大的尺寸，这使得它非常适合多语境场景，例如响应式Web设计。而且性能也极佳，与栅格图形（如GIF，JPG和PNG）相比，SVG图形通常是较小的文件。

浏览器支持度： svg对市面上常见的浏览器已经有很好的支持度。

为什么 qiankun 不能和 vite 一起使用？

作者： winter

vite2 不支持 runtime publicPath，这项能力在 webpack 中由内置变量__webpack_public_path__提供，runtime publicPath是 qiankun 加载子应用的核心 (由 import-html-entry 模块提供) ，用于预加载及引入异步脚本
esm 会使 qiankun 的 js 沙箱失效，qiankun 内部的 js 沙箱使用将 window 对象进行了代理，以防止全局作用域被污染，但 esm 模块始终具有自己独立的顶级作用域，也就是说它访问到的 window 是全局作用域下的，而不是 qiankun 沙箱中提供的代理 window，虽然可以通过在生产环境打包为 umd 格式的方式来避免使用 esm，但有些本末倒置了

‍

‍