呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
#优质博文 #前端 #工程化 #esm
Move on to ESM-only
AI 摘要：作者倡导全面转向 ESM（ECMAScript Modules），因其更优的性能、静态分析能力和未来兼容性，而 CommonJS（CJS）因同步解析和动态
via antfu
Move on to ESM-only
AI 摘要：作者倡导全面转向 ESM（ECMAScript Modules），因其更优的性能、静态分析能力和未来兼容性，而 CommonJS（CJS）因同步解析和动态
require 等问题已显局限。迁移建议包括启用 "type": "module" 并避免 CJS 专属特性。尽管部分工具仍依赖 CJS，长期来看，ESM 是更现代和可持续的选择。为了提高 ESM 采用的透明度和可见性，我最近构建了一个可视化的工具，称为 Node Module Inspector，以分析包裹的依赖关系。它提供了有关依赖性 ESM 采用状态的见解，并在迁移到 ESM 时有助于识别潜在的问题。
via antfu
Anthony Fu
Move on to ESM-only
Let's move on to ESM-only
#优质博文 #前端 #工程化 #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 相关配置：
•
• "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
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
#css #tailwind #前端 #博客更新
Tailwind CSS 的最新版本 v3.3 的一些新特性和改进： Tailwind CSS v3.3：扩展的调色板、ESM/TS 支持、新的实用类
1. 用于深色的扩展调色板：为每种颜色添加了更深的色调——950，现在有11种色调，eg：
3. 微调渐变颜色停止位置 ：可以准确指定渐变颜色中每个色标的位置。如
4. 开箱即用的 Line-clamp ：无需插件即可截断多行文本（终于整合到官方啦），如 `line-clamp-3`。 5. 🌟字体大小及行高简写 ：这个很有用，可以使用一个类设置字体大小和行高（不在预设中时），如
before:
8. 🌟新的 list-style-image 实用类： 这个也很有用，想使用图片作为您的列表项标记吗？那么现在可以使用新的 list-image-* 实用程序。eg：
听说过
使用
10. 🌟新的 caption-side 实用程序：用于控制表格内标题元素对齐的实用程序。
xLog链接🔗https://x.cosine.ren/tailwind-update-v3-3
Hexo博客地址🔗https://ysx.cosine.ren/tailwind-update-v3-3
RSS订阅📢 https://x.cosine.ren/feed/xml
Tailwind CSS 的最新版本 v3.3 的一些新特性和改进： Tailwind CSS v3.3：扩展的调色板、ESM/TS 支持、新的实用类
1. 用于深色的扩展调色板：为每种颜色添加了更深的色调——950，现在有11种色调，eg：
bg-slate-950
2. ESM 和 TypeScript 支持：使用 ESM 或 TypeScript 编写您的配置文件。（好欸，终于）3. 微调渐变颜色停止位置 ：可以准确指定渐变颜色中每个色标的位置。如
from-5%、via-35% 和 to-85% 4. 开箱即用的 Line-clamp ：无需插件即可截断多行文本（终于整合到官方啦），如 `line-clamp-3`。 5. 🌟字体大小及行高简写 ：这个很有用，可以使用一个类设置字体大小和行高（不在预设中时），如
text-lg/7、 text-sm/[17px] 、 text-[20px]/[24px]
6. 没有 var() 的 CSS 变量：任意值的新速记语法。如下使用before:
bg-[var(--brand-color)]
after: bg-[--brand-color]
7. 可配置的 font-variation-settings ：直接融入您的 font-* 实用程序。8. 🌟新的 list-style-image 实用类： 这个也很有用，想使用图片作为您的列表项标记吗？那么现在可以使用新的 list-image-* 实用程序。eg：
list-image-[url(carrot.png)]
9. 🌟新的 hyphens 实用类：用于微调断字行为。听说过
­ HTML 实体吗？在添加对这些 hyphens-* 实用程序的支持之前，我们也没听说。使用
hyphens-manual 和仔细放置的 ­ ，您可以告诉浏览器在需要跨多行分隔单词时在何处插入连字符。10. 🌟新的 caption-side 实用程序：用于控制表格内标题元素对齐的实用程序。
caption-bottom 将标题元素定位在表格的顶部，caption-bottom 将标题元素定位在表格的底部。xLog链接🔗https://x.cosine.ren/tailwind-update-v3-3
Hexo博客地址🔗https://ysx.cosine.ren/tailwind-update-v3-3
RSS订阅📢 https://x.cosine.ren/feed/xml
Tailwindcss
Tailwind CSS v3.3: Extended color palette, ESM/TS support, logical properties, and more
Tailwind CSS v3.3 is here — bringing a bunch of new features people have been asking for forever, and a bunch of new stuff you didn't even know you wanted.
