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

业界作者：SegmentFault 2023-02-11 22:05:33

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 个部分：

以一个简单 Demo，进行 Vite 快速入手（同时也是补充完善实例项目未解决的问题）
对实例项目迁移，对比 Vue CLI 和 Vite，以及 Vite 构建中碰到的问题。

本文更倾向于随手可查工具文，就好比之前写过的 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，但有些本末倒置了
‍
‍

React 为什么不将 Vite 作为默认推荐？

作者：卡颂

在React文档中，对于构建新的React应用，首推的方式是CRA（create-react-app）。

CRA推出于2016年，彼时还没有成体系的React脚手架工具供大家使用，再加上这是官方工具，一经推出就受到了欢迎。截止当前，CRA仓库已经收获快10wstar。

但是，随着时间的推移，出现了很多优秀的替代品，比如parcel、vite提供的React模版。

而CRA本身的进步速度却在放缓，其上一次提交要追溯到去年9月8日：

加餐

【Vite 实践】Vite 库模式能满足你吗？或许你需要统一构建

作者：Samon

Vite 秉承了开箱即用，简化配置的思路，确实显著提升了前端开发体验。

但是在类库模式的构建上却有所欠缺，只能处理单个输入和单输入出的情况，构建场景单一，Vite 社区上目前也没有可直接使用的工具，所以才有了开发一个统一构建插件的想法。

目前 vite-plugin-build 插件已可以直接使用，也录入了 Vite 官方 awesome-vite，希望也刚好能满足一些人的需要。

如何快速从零开始搭建一个前端项目

作者：chlorine

单元测试是项目开发中比较重要的一部分，通过单元测试可以一定程度上保障项目的代码质量以及逻辑的完整性，对于 vite 创建的项目，我们选择与之匹配度比较高的测试框架 vitest 来编写测试用例，安装如下：

pnpm create vitest jsdom -D

在 vite.config.ts 中配置 vitest，选择 js-dom 环境，这里在顶部添加 vitest 的类型声明引入后，即可在 vitest 中共享 vite 的 plugins 等配置。

# SegmentFault 技术周刊 #

「技术周刊」是社区特别推出的技术内容系列，一周一主题。

每周更新，欢迎「关注」。大家也可以在评论处留言自己感兴趣的主题，推荐主题相关的优秀文章。

点击左下角阅读原文，到 SegmentFault 思否社区 和文章作者展开更多互动和交流，“公众号后台“回复“ 入群 ”即可加入我们的技术交流群，收获更多的技术文章~

- END -

‍

延伸阅读

Google 搜索引擎将加入 AI 聊天功能｜Meta 计划今年推出商用 AIGC 技术｜思否周刊

40 S 新闻速递Google 搜索引擎将加入 AI 聊天功能AI 绘画神器 MidJourney 更新：图生文功能上线Meta 计划今年推出商用 AIGC 技术Bard 转用 PaLM 模型，取代现
OpenAI 总裁回应马斯克批评：我们犯了一个错误｜ChatGPT 大热，苹果将「重新审视」人工智能开发｜思否周刊

40 S 新闻速递OpenAI 总裁回应马斯克批评：我们犯了一个错误ChatGPT 大热，苹果将「重新审视」人工智能开发Google 发布史上最大通才模型 PaLM-E，能看图说话、操控机器人微软 C
OpenAI 宣布开放API ；库克或被踢出苹果董事会；Meta 官宣深入 AI 大战！|思否周刊

40 S 新闻速递OpenAI 宣布开放 APIOpenAI 首席技术官：下一版 ChatGPT 没有传言这么牛库克或被踢出苹果董事会微软将通过 Windows 11更新的方式来推广AI必应Meta

关注公众号：拾黑（shiheibook）了解更多

赞助链接：

关注数据与安全，洞悉企业级服务市场：https://www.ijiandao.com/
四季很好，只要有你，文娱排行榜：https://www.yaopaiming.com/
让资讯触达的更精准有趣：https://www.0xu.cn/

*文章为作者独立观点，不代表 K2数据恢复大师立场

本文由 SegmentFault发表，转载此文章须经作者同意，并请附上出处( K2数据恢复大师 )及本页链接。

原文链接 https ://www.51uos.com/news/industry/6267.html

思否

关注网络尖刀微信公众号
随时掌握互联网精彩

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

Google 搜索引擎将加入 AI 聊天功能｜Meta 计划今年推出商用 AIGC 技术｜思否周刊

OpenAI 总裁回应马斯克批评：我们犯了一个错误｜ChatGPT 大热，苹果将「重新审视」人工智能开发｜思否周刊

OpenAI 宣布开放API ；库克或被踢出苹果董事会；Meta 官宣深入 AI 大战！|思否周刊