欢迎来到第 31 期的【视界修炼 – 技术周刊】，下面是本期的精选内容简介

强烈引荐

  1. Vite4.3 – 一系列的功能优化手法
  2. 一文了解 URL 编码
  3. 英：Sass和原生CSS嵌套语法比照
  4. PNPM v8本周发布

开源资讯

  1. Framer Motion – React侧可控动效库
  2. mafs – 互动式数学图形组件库

AI东西

  1. sqlchat – AI SQL生成
  2. ChatGPT-Desktop – ChatGPT 跨途径客户端
  3. 微软的AI绘图东西

​也引荐我们重视一下最终的引荐内容（周刊的主要内容来历途径）

下面开端本期内容的介绍，估计阅览时间 10 分钟。

强烈引荐

1. Vite4.3 – 一系列的功能优化手法

截止到3月底4.3发了2个beta版了，经过changelog能够看到许多功能相关的优化（经过perf关键字过滤）

视野修炼-技术周刊第31期

下面挑几个可能用得上的介绍一下

tip:下面的fsp代表fs/promise，

① 删去文件场景运用 fs.unlink 代替 fsp.unlink假如我们不需求运用这个promise

// old
fsp.unlink(filepath)
// new 
fs.unlink(filepath)

② 写入文件运用 fsp.writeFile 代替 fs.writeFileSync

// old
fs.writeFileSync(filepath, data)
// new 
await fsp.writeFile(filepath, data)

③ 翻开浏览器指令的调用运用异步而不是同步execSync => exec

// old
execSync('xxx')
// new
await exec('xxx')

④ 运用Map替换对象{}

// old
v = {}
v[key]
// new
v = new Map()
v.get(key)

⑤ 正则表达式放在大局，而不要在某个函数中

// old
export function slash(p: string): string {
  return p.replace(/\\/g, '/')
}
// new
const windowsSlashRE = /\\/g
export function slash(p: string): string {
  return p.replace(windowsSlashRE, '/')
}

⑥ 部分startsWith和endsWith换用===

// old
str.endsWith('/')
// new
str[str.length - 1] === '/'

2. 一文了解 URL 编码

Web 项目中经常会遇到处理 Query 参数的场景

比如某个key要用传数组是用key=a&key=b仍是key[]=a&key[]=b，乃至key=a,b

经过阅览这篇文章会给你带来回答

文章较为详细的介绍了 Query String 的概念

以及 qs、query-string、URLSearchParams、乃至 querystring这几个库到底有什么区别

并顺便回答在 为什么会有%HH，为什么要运用 encodeURIComponent 进行编码，它和过时的 escape 又有何区别等等疑问

3. 英：Sass和原生CSS嵌套语法比照

sass 官博出的一篇文章，篇幅较小（契机是本周上线的Chrome112版别默许敞开CSS嵌套语法的支撑）

我们让GPT总结如下

该文为一篇关于Chrome浏览器112版别支撑新的原生CSS嵌套特性的介绍，并说到了创意来自于Sass的嵌套特性。作者表明自己和Sass团队很荣幸能够为CSS的改善做出奉献。文章同时探讨了原生CSS嵌套和Sass嵌套的差异，其中说到了三种不同的情况。Sass团队承诺不会更改现有的合法Sass代码，以便与广泛运用的浏览器不兼容。作者表明对Sass嵌套的未来持谨慎态度，并在长期计划中说到，一旦支撑98％的全球浏览器市场份额的原生CSS嵌套，他们将开端将Sass传达为:is()。最终，作者表明，除非能够提出一种与CSS更兼容的方法来表明& -后缀，否则他们不会抛弃当时的&-suffix行为。

4. PNPM v8本周发布

笔者这周在看文档的时分忽然发现，v7 的文档顶部多了一句如下的提示

视野修炼-技术周刊第31期

才意识到PNPM V8 上线了

由于有大版别的更新，在公司里也陆陆续续造成了一些 Case

大多是由于 CI/CD 途径上的 pnpm 插件没有锁版别，默许运用最新的pnpm版别

但是pnpm v8 要求 >Node16，但是打包机器的镜像仍是 Node 14

不知道各位本周有没有遭到 pnpm 发版的影响

开源资讯

5. Framer Motion – React侧可控动效库

咱们 直接看2个demo 了解一下用法

import { motion } from "framer-motion"
export const MyComponent = () => (
  <motion.div
    initial={{ opacity: 0, scale: 0.5 }}
    animate={{ opacity: 1, scale: 1 }}
    transition={{ duration: 0.5 }}
  />
)

视野修炼-技术周刊第31期

import { motion } from "framer-motion"
export const MyComponent = () => (
  <motion.div
    animate={{
      scale: [1, 2, 2, 1, 1],
      rotate: [0, 0, 270, 270, 0],
      borderRadius: ["20%", "20%", "50%", "50%", "20%"],
    }}
  />
)

视野修炼-技术周刊第31期

不明觉厉

6. mafs – 互动式数学图形组件库

这个也是React侧的一个组件库，看看Demo

import { Mafs, Point, Coordinates } from "mafs"
function SimplePoint() {
  return (
    <Mafs>
      <Coordinates.Cartesian />
      <Point x={1} y={1} />
    </Mafs>
  )
}

视野修炼-技术周刊第31期

不明觉厉+1

看了下图形都是由 SVG 制作的

AI东西

7. sqlchat – AI SQL生成

需求查表算数据的时分能够用用（笔者最近述职捞数据都是让GPT帮助写SQL）

这是个Web应用，支撑 MySQL 和 PostgreSQL（访问需求魔法，呼应很快）

下面是个比如，成果仍是很不错能直接用基本

视野修炼-技术周刊第31期

8. ChatGPT-Desktop – ChatGPT 跨途径客户端

根据 tauri + vue3 开发的跨途径桌面端应用，下面是一些卖点（能够和chatBox比照运用一下）

  • 提供了装备署理的功能，您能够经过设置署理来完成愈加灵敏的网络访问。
  • 能够选择让 app 常驻后台，快捷键(支撑自定义)一键唤醒，节省时间，提高功率。
  • 更便捷的管理和调试 prompt，构建你自己的人物预设库，使得对话愈加个性化。
  • 内置丰富的导出功能，愈加便利的共享成果！
  • 将一切对话存储到本地，方便随时查阅，留在身边最安心。

视野修炼-技术周刊第31期

视野修炼-技术周刊第31期

个人觉得绑定快捷键这个功能做得不错，唤醒很方便

9. 微软的AI绘图东西

Bing Image Creator AI 绘图东西，根据 OpenAI 的 DALL-E 模型。

现在需求用魔法才干运用，下面是一些比如

视野修炼-技术周刊第31期

视野修炼-技术周刊第31期

视野修炼-技术周刊第31期

趣图

视野修炼-技术周刊第31期

篇幅有限，假如你还没看够，可移步后边的引荐途径，持续旅游，前史周刊（<20）移步博客

⭐️强力引荐重视

  • 阮一峰: 科技爱好者周刊 – 记载每周值得共享的科技内容，周五发布
  • 云谦：MDH 前端周刊 – 前端资讯和共享
  • 童欧巴：前端食堂 – 你的前端食堂，吃好每一顿饭
  • rottenpen：FE News – 共享前端，日子
  • 常识星球：咲奈的平行时空 – 前端前沿技术、资讯、方法论共享