#优质博文 #前端 #工程化 #esm #typescript
Tutorial: publishing ESM-based npm packages with TypeScript

AI 摘要：过去两年，TypeScript、Node.js 和浏览器对 ESM（ECMAScript Modules）的支持取得了显著进展。本教程介绍了一种较为现代、简化的 TypeScript npm 包发布方案，适用于无需考虑向后兼容性的项目。

主要内容：

1. 项目结构：包含 src/ （源码）、test/ （测试）、dist/ （编译输出）、docs/ （文档）等目录。

2. tsconfig.json 配置：

• outDir: "dist" ：编译后的文件存放在 dist/ 目录。
• sourceMap: true、declaration: true、declarationMap: true，确保源码映射和类型定义文件生成。
• verbatimModuleSyntax: true 及 erasableSyntaxOnly: true，提高 TypeScript 代码的可移植性。

3. package.json 相关配置：

• "type": "module" ：确保 .js 文件按 ESM 解析。
• "exports"：明确定义包的 ESM 入口，支持子路径导出。
• "files"：严格控制发布到 npm 的文件，避免上传测试代码。

4. 构建与发布：

• 使用 npm run build 清理 dist/ 目录并重新编译。
• prepublishOnly 钩子在 npm publish 之前自动执行 build，确保发布的代码是最新的。
• publishd 命令用于 npm publish --dry-run，可预览上传的文件。

5. 测试与文档：

• 采用 Mocha 进行单元测试，并支持 source-maps 以优化错误追踪。
• 使用 TypeDoc 生成 API 文档，托管于 GitHub Pages。

6. 其他工具：

• publint、arethetypeswrong 等工具检查 npm 包的兼容性和 TypeScript 类型定义的正确性。
• shx 统一跨平台 shell 命令（如 rm -rf、chmod u+x）。

本指南基于 @rauschma/helpers 包的实践经验，提供了一种现代化、易于维护的 ESM npm 包构建方法。

via 2ality – JavaScript and more

2Ality

Tutorial: publishing ESM-based npm packages with TypeScript

During the last two years, ESM support in TypeScript, Node.js and browsers has made a lot of progress. In this blog post, I explain my modern setup that is relatively simple – compared to what we had to do in the past:

#优质博文 #追番 #科普
记得以前看到过但是没存，今天下摇曳露营的时候又看到了存一下，很棒的科普？教程？总之很棒。

1. 回归本地教程——序
2. 回归本地教程①——下载与Bittorrent
3. 回归本地教程②——重新认识视频
4. 回归本地教程③——蓝光光盘Blu-ray Disc & Private Tracker
5. 回归本地教程④——BDRIP&压制组
6. 回归本地教程⑤——播放
7. 回归本地教程——后记01

如果一个个网页打开麻烦，这里有全篇的 PDF

清新小甜的个人博客

回归本地教程——序

序——看的起源 如果一个个网页打开麻烦，这里有全篇的PDF 旧题： WTF，我**刚买的大会员，你告诉我没有一个新番能看，我去哪儿看啊，本来烦闷的暑假更是火上浇油，怎么过下去啊，干脆回归本地得了。 嗨~嗨~この番组はDewsweetの提供でお送りします …… 自21年动漫先审后播的风波后，国内的大版

很难蚌的住，借用热门评论一句话，一想到我爸妈那一辈的人甚至我弟他们就是这种离谱垃圾内容的受害者我就笑不出来

鉴定热门视频DeepSeek遭网络攻击
@边亮_网络安全:
计算机技术 - 网红嘴里的DeepSeek遭黑客攻击，真实情况到底怎么回事？

Bilibili

鉴定离谱女主播热门视频：DeepSeek遭网络攻击_哔哩哔哩_bilibili

网红嘴里的DeepSeek遭黑客攻击，真实情况到底怎么回事？, 视频播放量 1529822、弹幕量 8790、点赞数 89572、投硬币枚数 22833、收藏人数 28303、转发人数 14844, 视频作者 边亮_网络安全, 作者简介 登上CCTV1的网络安全砖家
苹果微软漏洞致谢的路人甲，相关视频：聊聊美国最厉害的黑客攻击，我把云控漏洞交给厂商，厂商发了我半个牙刷兑换券...（吐槽，无广），【西工大事件】1分钟解读：美国入侵西工大之后又做了什么，专家不要看！网络安全科普：尬鉴定山寨DeepSeek网…

#tools #云数据库 #postgresql #prisma
Prisma Postgres: The Future of Serverless Databases

独立开发者穷鬼N件套又更新了（逃）不知道能免费多久hhh

Prisma推出了 Prisma Postgres，免费计划 10 个免费数据库，1GB 免费存储空间。

https://fixupx.com/javay_hu/status/1886670684853837884

FxTwitter / FixupX

Indie Maker Hu (@javay_hu)

🤨 什么？Prisma推出了pg数据库！

免费计划看起来也非常慷慨，10个免费数据库，1GB免费存储空间，爱了 ❤️

Quoting Prisma (@prisma)

🎉 Prisma Postgres is production-ready!

It's the first database built on unikernels and comes with these features:

✅ No cold starts
✅ Global cache
✅ Real-time events…

#博客更新 #前端 #tailwind #astro #css #升级
Tailwind CSS v4.0 升级与 Astro 5.2 项目迁移记录

是迁移过程小记和一些主要更新翻译，比较水，后续要是还有问题也丢这篇里边。

🔗 xLog链接
🔗 新版 Astro 博客链接
🔗 Follow - 余弦の博客

我重写了 Windows 的右键菜单 | 「Breeze」好看丝滑可拓展
@MicroBlock:
软件应用 - 项目首页： https://breeze.microblock.cc/
喜欢的话三连/Star支持一下呀~ヾ(≧▽≦*)o

#组件库 #tools #前端 #react #tailwind
star 🌟 Emoji Picker - A composable React emoji picker component with Tailwind styling

https://fixupx.com/0xferruccio/status/1885676696541581769

#优质博文 #前端 #typescript
在 TypeScript 中使用元组进行计算

AI 摘要：这篇文章介绍了 TypeScript 元组（Tuple）的概念及其应用。主要内容包括：

1. 元组基础：元组是一种固定长度、元素类型已知的数组。例如，[number, string] 代表一个两元素元组，要求第一个元素是 number，第二个是 string。
2. 可选元素：可以使用 ? 标记某些元素为可选，例如 [number, string?]，表示第二个元素可以省略。
3. 变长元组：通过 ... 语法支持变长参数，例如 [string, ...number[]] 允许第一个元素是 string，后续元素是 number。
4. 元组的实际应用：包括函数返回多个值、定义结构化数据等。
5. 类型推导与模式匹配：TypeScript 能根据元组推断类型，结合解构赋值使用更灵活。

总体而言，文章深入探讨了 TypeScript 元组的语法与应用，适合希望优化数据结构和类型安全性的开发者。

via 2ality

2Ality

Computing with tuple types in TypeScript

JavaScript’s Arrays are so flexible that TypeScript provides two different kinds of types for handling them: Array types for arbitrary-length sequences of values that all have the same type – e.g.: Array<string> Tuple types for fixed-length sequences of values…

#碎碎念
今天是什么日子呀，怎么看完哪吒 2 出门逛街一家店都没开门啊乌漆嘛黑😭

ip 属地： 广东深圳

#前端 #工程化 #优质博文
https://fixupx.com/himself_65/status/1885219450900939133

如何评价 node_modules 的设计？

并且很多时候，你压根找不到“刚好能完成所需功能”的某个 Package，而为了这点功能重复造轮子又没有意义，这时你就只能为了所需的那一点功能去引入一个巨大的依赖，从而造成最终 node_modules 膨胀的问题了。况且很多开发者也不一定有这个减小依赖的意识——lodash-es 出了这么多年，不还是有很多项目在用 lodash？即使其中一些项目本身已经利用了 ES6 之后的语言特性。

我觉得某种意义上，这大概是一种“幸福的烦恼”——npm 良好的生态使开发者们互相引用依赖几乎没有负担，但也造成了潜在的 node_modules 膨胀问题。看看 C++ 那边的情况，一个库为了做得容易引入几乎不能引入任何外部依赖（如果有，也一般是直接放在代码里），需要自己造大量的轮子，真有人觉得这就是好事吗？我反正不觉得……

写的真的挺好的

FxTwitter / FixupX

面包🍞 (@himself_65)

如何评价 node_modules 的设计？ - Snowflyt的回答 - 知乎
https://www.zhihu.com/question/36697792/answer/3575608392

#前端 #组件库 #tools #react #tailwind #headless
star ⭐ react-international-phone

☎︎ react-international-phone：电话号码输入组件 —— 您不仅可以选择一个国家，而且还可以在可能的情况下从数字中猜测该国。 react-phone-number-input 是该领域的另一个选择。

via React Status #415

GitHub

GitHub - ybrusentsov/react-international-phone: ☎️ International phone input component for React

☎️ International phone input component for React. Contribute to ybrusentsov/react-international-phone development by creating an account on GitHub.

#前端 #组件库 #设计 #终端 #react #tools
好酷的组件库！

SRCL 是一套整洁的新React组件，用于创建具有等宽字体、终端风格美学的Web应用程序。

via Node Weekly #564

www.sacred.computer

srcl

SRCL is an open-source React component and style repository that helps you build web applications, desktop applications, and static websites with terminal aesthetics.

cosine - 前端人の日常频道

Ciallo～(∠・ω< )⌒★ 下面是余弦 の 除夕小贴士： 🥰 祝大家新的一年： • 年终奖比 node_modules 还膨胀！ • 快乐不加 !important 也能最高优先级  • 生活永远不报 Uncaught TypeError console.table({    好运: "∞%",    可爱: "↑↑↑",    摸鱼力: "React Forget自动优化",    暴富: localStorage.getItem('压岁钱') ?? '🈵🈵🈵'  })  渲染完毕…

除夕快乐！

虽然大除夕的因为亲戚在家里打架还叫110了这种破事闹得很不愉快，但是还是祝大家除夕快乐喵，家和万事兴！！

唉，现在才缓过来好点儿了。

Ciallo～(∠・ω< )⌒★ 下面是余弦 の 除夕小贴士：

🥰 祝大家新的一年：

• 年终奖比 node_modules 还膨胀！
• 快乐不加 !important 也能最高优先级 
• 生活永远不报 Uncaught TypeError

console.table({ 
  好运: "∞%", 
  可爱: "↑↑↑", 
  摸鱼力: "React Forget自动优化", 
  暴富: localStorage.getItem('压岁钱') ?? '🈵🈵🈵' 
}) 

渲染完毕 ★ 除夕快乐！（Version: SpringFestival_v2.0.25）
渲染完毕 ★ 除夕快乐！（Version: SpringFestival_v2.0.25）

#优质博文 #前端 #css #容器查询
Container Queries Unleashed

AI 摘要：文章探讨了CSS容器查询在响应式设计中的应用，允许开发者根据容器大小而非视口大小调整布局，提供了比传统媒体查询更灵活的设计方式。作者通过实例展示了如何利用容器查询实现动态布局切换，避免使用脆弱的“魔法数字”断点，并介绍了其渐进增强特性，确保旧浏览器兼容性。容器查询为UI设计带来了更多可能性，鼓励开发者积极探索这一技术以提升用户体验和开发效率。

via Josh W Comeau

Joshwcomeau

Container Queries Unleashed • Josh W. Comeau

Container queries expand the universe of designs that can be implemented, giving us whole new superpowers. Now that container queries are broadly available, I think it’s time we start exploring this potential! In this post, I’ll share the “killer pattern”…

更新：这个系列是之前就有的，简单来说就是大模型视觉生成/读取端到端，现在这个比之前的效果好了很多（见评论区图），不过还是比不上专注图片生成领域的 Top（SD等），大概只是为了以后多模态的更大的模型探路
分辨率只有 384x384（输入输出都是），技术文档还没出，我瞎猜一下，可能是把 RectifiedFlow，SigLIP，SDXL-VAE 的架构整合进了 transformer decoder/encoder，然后一起训练来对齐语义向量

这个活没那么大，并没有 V3 和 R1 那么震撼，ds 一般小活，不过可以期待一下日后的表现

Memordust

DeepSeek发布统一图像理解与生成的Janus-Pro系列模型 1月27日晚，DeepSeek发布了Janus-Pro系列，旨在统一图像理解和生成，并将其整合在单个模型中。该模型框架采用极简架构，将自回归语言模型与生成建模领域的前沿方法Rectified Flow相结合。 据涩橘的Telegram频道，Rectified Flow可以直接在大型语言模型框架内进行训练，无需复杂的架构修改。JanusFlow是一个支持图像多模态的LLM，参数量为70亿（7B），方便本地运行。训练方式采用传统的预训练和…

deepseek 怎么大除夕的还在卷 😭
tql