#Newsletter #JavaScript #前端 #安全 #react #WASM #node #CSS
JavaScript Weekly #746

AI 摘要：本期 JavaScript Weekly 聚焦于 JavaScript 生态的最新动态，包括高性能工具库 es-toolkit 对 Lodash 的取代、React/Next.js 复杂项目的重构建议、WebAssembly (WASM) 与 DOM 支持现状、npm 供应链安全问题、以及一系列重量级项目和社区新闻。此外，涵盖新版本发布、实用代码与工具、开发者经验反思、前端性能提升案例和社区趣闻等，内容丰富，覆盖了当下前端开发的热点话题和实践建议。

1. 社区与安全动态
• 细节剖析近期 JavaScript 生态的供应链安全事件，如 npm 上 is 包被劫持导致的恶意代码传播，以及 stylus 包下架风波。
• 介绍供西班牙语开发者使用的 EsJS，探索非英语语境下的 JavaScript 编程创新。
• 对比 Biome 与 Oxlint 两款 Lint 工具，在类型智能与速度上的表现差异。

2. 工具与库更新
• es-toolkit：兼容 Lodash、更快且更小（97% 体积减小），被 Storybook、CKEditor、Nuxt 推荐，利于代码体积优化。
• Bun v1.2.19：现在支持带有 bun install 的 pnpm 风格的隔离 node_modules ，提供交互式依赖更新功能等。Bun 1.3 也有望很快推出。
• React Native Reanimated 4.0、PythonMonkey 1.2、Oxlint、Jasmine 等多款工具新版本。
• Transformers.js 3.7：支持在浏览器借助 ONNX 运行时运行预训练模型，加入语音转录及 LFM2 和 ModernBERT 支持。
• npq：包安装前安全审核，集成 Snyk 漏洞库并审核包活跃度，有助于抗击恶意依赖。
• Untitled UI React：基于 Tailwind CSS 和 React Aria 的大型 UI 组件库，原生开源并配备 PRO 版本。
• ts-regexp：为 TypeScript 带来严格静态类型的正则表达式（RegExp）。 #正则
• ApexCharts 5.3：流行的 JS 图表库。现在具有数据解析功能 ，可将原始数据对象直接映射到图表。 演示
• vue-multiselect 3.3：Vue 的通用选择 / 多选 / 标记组件。 #vue
• eslint-plugin-unicorn 60.0：100+ 有用的 ESLint 规则集中在一个地方。

3. 实用开发经验与案例分享
• React/Next.js 开发最佳实践：避开 useState 与 useEffect 过度使用、数据嵌套、表单扩展及隐式状态共享陷阱。
• WASM 与 DOM：讨论 WebAssembly 直接访问 DOM 的前景，以及现代工具链对 WASM 生态的支持改进。
• 移除 SPA 的现代 CSS 实践建议，呼吁回归服务端渲染和真实页面体验利于性能与交互。
• Next.js 站点迁移到 Eleventy 提升 24% 性能，展示静态站点生成器的新优势。
• JS Event Listener 参数处理、构建字体搜索引擎、Three.js+WebGPU 的文本破坏交互等创新项目实践。

4. 社区趣闻与行业动向
• SVG 图形教程，鼓励开发者解锁矢量图形能力。
• HTML 2025 状态调查开放，鼓励开发者参与获取前沿信息。
• Google 推出 OSS Rebuild 以提升开源软件安全，MDN 庆祝 20 周年，前端表单规范问题(三个 HTTP 版本之后，表单仍然一团糟)

author JavaScript Weekly 编辑团队

Socket

npm ‘is’ Package Hijacked in Expanding Supply Chain Attack -...

The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.

#优质博文 #前端 #vue #动画
The Magic in Shiki Magic Move

【这个代码块过渡动画太酷啦！】

AI 摘要：这篇文章介绍了 Shiki Magic Move 的原理和实现方法。Shiki Magic Move 是一个用于代码块动画过渡的工具，灵感来自 Keynote 的 Magic Move 功能。文章详细解释了如何使用 Shiki 和 Vue 的 <TransitionGroup> 组件实现代码块中单词（token）的平滑过渡，包括进入（Enter）、移动（Move）和离开（Leave）三种动画效果。为了解决动画中遇到的挑战，作者采用了文本差异算法来精确匹配变化前后的 token，以及开发了一个自定义渲染器来处理特定的动画效果。Shiki Magic Move 已开源，鼓励社区为不同框架贡献更多集成。

via Anthony Fu

#优质博文 #前端 #tailwind #vue
新年福利!TailWindCSS+Vite+Vue3打造个性化在线简历项目

【这个主要是讲 tailwind 在 vue 里的使用，跟简历没关系2333，我一开始还以为是制作在线简历的项目】

AI 摘要：这篇文章介绍了如何使用 TailWindCSS、Vite 和 Vue3 创建一个个性化在线简历项目。作者分享了在失业后为提升技术栈和求职准备而开始的项目经历，重点介绍了 TailWindCSS 的学习和应用，强调了其在项目中的灵活性和优化性能。文章通过实际案例，展示了如何通过 TailWindCSS 快速实现响应式设计和状态处理，以及如何结合 Vue3 和 Vite 进行项目实践，最终创建了一个可自定义的在线简历模板。文章还讨论了 TailWindCSS 的核心概念，包括效用优先、处理状态、响应式设计等，旨在帮助读者快速掌握并应用 TailWindCSS。

via 掘金 霪霖笙箫

juejin.cn

新年福利!TailWindCSS+Vite+Vue3打造个性化在线简历项目 - 掘金

笔者以实际项目为例，带着读者学习TailwindCSS，并运用到项目中，举一反三，进行优化实践。Vite+Vue3+TS+TailWindCSS打造个性化在线简历项目。

#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
我说我忘掉了什么
科技爱好者周刊（第 286 期）：蓝色指示灯的解决方案

1. 网络推送揭秘（英文） 📓 作者写了一个简单的实现，解释渐进式 Web 应用程序的网络推送（Web Push），即怎么向用户推送通知。
2. 、VisActor 🧰 一个字节出品的前端数据可视化解决方案，分成图表库 VChart 和表格库 VTable。 #组件库
3. h5player for tampermonkey 🧰 一个油猴脚本，为 H5 视频网站增强功能（多级播放速度、截图、画中画、调节亮度、饱和度、对比度等），支持各大主流视频网站。
4. UShare 🧰 一款生成代码和文本分享卡片的网页工具，可以设定字体和字型大小。
5. Vue DevTools Next 🧰 Vue 官方开发者工具的下一个迭代，旨在增强 Vue 开发者体验。 #vue
6. yft-design 🧰 基于 fabric.js 的名片编辑应用。
7. ant-codeAI 🧰 通过 OpenAI、Gemini 等模型，生成 Web（React，Vue，Tailwind CSS）和 native（react native）代码。 #AI
8. Read Copilot 🧰 一个苹果设备的阅读器 App，支持 RSS 和 Read It Later 功能，并可以用 AI 生成总结、文章大纲和翻译。 #rss
9. vscode-common-intellisense 🧰 VS Code 插件，为主流的前端框架提供代码提示（intellisense）。 #vscode
10. Yazi 🧰 一款运行在终端里面的文件管理器，跨平台，支持图片预览，使用 Rust 语言开发，速度快。
11. 齐思 🧰 一个中文的每日科技新闻的集合网站，由 AI agent 在后面维护整理。【看了下还挺有意思的】 #AI

「软件需要有人通盘理解它的运作机制，所以单个工程师有可能比一个职业开发团队造出更好的产品。因为单个工程师花时间，完整理解了他要构建的软件，而职业开发团队总是从一个项目转移到另一个项目。

这也是为什么接手不熟悉的项目，比重建该项目要困难得多，以及为什么软件外包的质量总是如此糟糕。

-- 《突然间我懂了软件》」

PQVST

Demystifying Web Push Notifications

For my recent One Day Build: Expense Tracking project I wanted to enable notifications in a progressive web app. ChatGPT struggled to generate any good code for me, and I also struggled to find any minimal clear explanations online.

#优质博文 #前端 #react #vue
React 还是 Vue？我对 Web 前端现状的看法

摘要: 本文由一位长期的前端开发者撰写，主要对比了React.js和Vue.js这两种流行的前端框架。作者分享了自己使用Vue/Nuxt及React的经验，强调没有完美的框架，每种框架都有各自的优缺点。在市场产品现状方面，国际化产品和SaaS更倾向于使用React。在设计工程师中，React同样占据优势。多用性方面，React在非Web领域的应用更广泛。开发者体验（DX）上，Vue提供了更平滑的学习曲线和更全面的官方文档。生态方面，React和Vue都有各自的优势，React拥有丰富的工具库和社区支持，Vue则在核心团队和社区共建上表现突出。总体上，虽然目前React在多个方面领先，但Vue的发展前景依然可观，需要更多开发者和企业的参与和支持。

via Cali Castle

cali.so

React 还是 Vue？我对 Web 前端现状的看法

作为一名长期的前端开发者，我想聊聊我对前端框架 React.js 和 Vue.js 的一些个人看法以及不同方面的对比。

#阮一峰的科技周刊 #前端
科技爱好者周刊（第 276 期）：内容行业的衰落

#优质博文
1. 我如何在网上保持匿名（英文） 📓 作者介绍自己在网上防止被追踪而采取的各种措施。
2. Remix、Next.js 和 Gatsby 的比较（英文） 📓 标题里面的三个框架都基于 React，自带后端，本文比较了它们的特点。
3. Instagram 的早期架构（英文） 📓 Instagram 在2010年10月发布，一年之内就拥有了1400万用户。它那时只有3个工程师，他们怎么设计后端架构，支持这么多用户。 #后端
4. 64位整数够放货币吗？（英文） 📓 这篇文章讨论一个有趣的问题：货币该用什么类型的数据来储存。

#资源推荐 #tools
1. 雷池（SafeLine） 🧰 开源国产免费 Web 安全网关，它可以灵活地设定各种规则，过滤网络请求，防止黑客攻击你的网站，相当于一层自定义的软件防火墙。
2. Fantastic-admin 🧰 一款开箱即用的 Vue3 中后台管理系统框架。 #vue
3. ScratchCard 🧰 一个刮刮卡的 React 组件。 #react #canvas
4. tldraw 🧰 一个 Web 白板工具，支持多人实时协作。【感觉还不错】
5. tailspin 🧰 一个命令行工具，实时高亮显示日志文件。
6. YouTube Dubbing 🧰 一个 Chrome 插件，可以将 YouTube 视频的英文语音，转成中文语音。
7. pyvideotrans 🧰 一个 Windows 应用，跟上一个软件作用相似，可以将本地视频文件的语音，翻译成另一种语言，比如英文旁白改成机器语音合成的中文。

Mellow Root

How I stay reasonably anonymous online

I'm not wanted by the FBI, nor am I worried about my ISP watching me, and I don't care about Google knowing what I search for. What I worried about is crazy...

#前端 #优质博文 #阮一峰的科技周刊 #资源推荐 #tailwind #vue #chatgpt
科技爱好者周刊（第 265 期）：WiFi 的后面是 LiFi
1、Equal UI：基于 Tailwind CSS 的一套 Vue 3 组件库
2、emaction：一个 Web Component，生成类似 GitHub 的 Emoji 反馈栏
3、AI Code Translator：该网站可以将一种语言的程序，转换成另一种语言。用户也可以描述想要什么程序，它来生成代码

equal-ui.github.io

Equal UI

Equal UI – open-source Vue 3 components system for your next project

#优质博文 #前端 #vue
写给初中级 Vue 工程师的高级进阶指南

偶尔也看看 vue 学习路线
万一以后项目需要了嘞
ssh的文章一直可以的

juejin.cn

写给初中级 Vue 工程师的高级进阶指南，一起干爆 Vue3！ - 掘金

前言 很多读者会来问我，Vue 该怎么规划学习路线，或者大概进行到某个阶段了，该怎样继续深入。所以我决定根据我自己学习的心路历程，总结一篇 Vue 从入门到精通的路线。 跟着这篇文章走下来，对 Vue