Web框架后端前端【免费下载链接】kitweb development, streamlined项目地址https://gitcode.com/gh_mirrors/kit/kit点击查看免费下载sveltejs/package是 SvelteKit 仓库中负责将src/lib源码编译为可分发包dist的官方工具其命令行入口为svelte-package。本文以该包在仓库中的 CHANGELOG.md 为主线结合 src 下的真实实现代码与 test/index.spec.js 测试用例系统梳理从 2.x 到 3.0.0-next 的关键能力演进、CLI 参数、别名解析、类型声明生成、server-only 文件防护等核心机制。读完本文你将能理解svelte-package的构建流水线原理并掌握写出可直接发布的 Svelte 组件库所需的全部配置细节。1. 定位构建 Svelte 包的正确姿势sveltejs/package的目标是用正确格式构建 Svelte 包见 README.md。它把通常位于src/lib下的组件与模块源码扫描并处理所有.svelte、.ts、.js文件将.ts转译为 JS、剥离lang/type预处理标签生成类型声明.d.ts/.d.mts/.d.cts解析路径别名如$lib、#开头的 import为相对导入复制静态资源最终输出到dist目录。包入口定义在 package.json 的bin字段svelte-package: svelte-package.js该脚本仅一行import ./src/cli.js见 svelte-package.js真正的参数解析与命令分发都在 src/cli.js 中完成。与 SvelteKit 应用不同svelte-package面向的是组件库/工具库作者产出物必须能被任意 Svelte 项目甚至非 SvelteKit 项目正常消费。2. 版本基调3.0.0-next 的破坏性变化CHANGELOG 记录了sveltejs/package3.x 预发布阶段的几项重大调整其中最关键的是两条Major Changes2.1 要求 Node 22 或更高3.0.0-next.0与3.0.0-next.5两次声明breaking: require Node 22 or newer。这一点与 package.json 中的engines: { node: 22 }完全一致。如果你在 CI 或本机使用旧版 Node需要先升级到 Node 22 再运行svelte-package。2.2 依赖收敛移除 sade 与 kleur3.0.0-next.4和3.0.0-next.5连续移除了sade命令行解析库与kleur颜色输出库改用 Node 内置能力。从 src/cli.js 可以看到如今参数解析使用node:util的parseArgs彩色输出使用styleText——这既减少了依赖树体积也让包在 Node 22 下的行为更一致。2.3 配置读取迁移到sveltejs/load-config3.0.0-next.8将配置读取改为通过sveltejs/load-config完成。对应实现是 src/config.js 中的load_config()它从当前工作目录查找vite.config或svelte.configtraverse: false表示不向父目录遍历加载结果中的config对象即被用于打包。这也意味着svelte.config.ts天然可用详见第 7 节。3. CLI 实战完整参数清单与用法svelte-package的命令行帮助文本定义在 src/cli.js全套参数如下参数短选项默认值说明--input input-isrc/lib或配置中的files.lib输入目录--output output-odist输出目录--preserve-output-pfalse打包前不删除输出目录--types-ttrue是否生成类型声明--watch-wfalse监听文件变化并增量重建--tsconfig path—自动向上搜索指定 tsconfig/jsconfig 路径--version-v—打印版本号--help-h—打印帮助典型用法组件库项目内# 一键构建到 dist svelte-package # 指定输入输出并保留 dist 中已有的静态资源 svelte-package -i src/lib -o dist -p # 开发时增量构建 svelte-package -w # 指定 tsconfig当多个 tsconfig 并存时 svelte-package --tsconfig tsconfig.build.json # 关闭类型声明生成纯 JS 库提速 svelte-package --types false从 src/cli.js 可以看到选项与配置的合并逻辑input取命令行参数未提供时回退到config.files?.lib最终默认src/liboutput默认dist。此外若检测到config.package存在会直接报错——这是 2.0.0 移除的旧配置项提示读者查阅迁移说明见第 7 节。4. 别名解析把$lib/#导入变成相对导入这是 CHANGELOG 中出现频率最高的功能主题贯穿 2.x 与 3.x3.0.0-next.3/3.0.0-next.5feat: transform import aliases into relative imports in files2.5.12.5.4连续四轮修复覆盖import/export * (as ...)、import/export name, { ... }等语法形态并防止误替换false-positive alias replacement2.5.5resolve aliases before transpiling for rewriteRelativeImportExtensions保证别名解析在 TS 转译之前完成让 TS 的扩展名重写也能作用于解析后的路径。4.1 别名从哪来src/index.js 的normalize_options展示了别名来源options.config.alias中的配置别名之外还会读取项目package.json的imports字段把#开头的导入含#foo/*通配形式自动注册为别名。例如{ imports: { #utils/*: ./src/lib/utils/*, #constants: ./src/lib/constants.js } }这样源码里的import { x } from #utils/math.js在打包时会被解析为相对路径天然支持 Node 的 subpath imports 约定。4.2 替换算法核心实现在 src/utils.js 的resolve_aliases对每个 import 路径依次与别名做前缀匹配命中后用path.relative计算目标文件相对当前文件的相对路径并确保以./开头。adjust_imports同文件 L63-L107则用正则覆盖了六种语法形态具名导入/导出import { a } from .../export { a } from ...命名空间import * as All from .../export * as ns from ...纯 re-exportexport * from ...动态导入import(...)副作用导入import ...测试用例 test/index.spec.js 明确验证了$lib/...、/...等多种别名与上述语法形态的组合是排查别名问题的第一手参考。5. server-only 文件保护与包校验器3.0.0-next.2/3.0.0-next.5新增能力warn when using a .server. file or file inside a server directory without importing a server-only module。这是为在 SvelteKit 应用内使用组件库设计的防护。5.1 判定规则src/validate.js 中定义文件名包含.server.或位于server/目录下的文件被视为 server-only如果该文件或其传递可达的相对导入链没有导入$app/server或$app/env/private这两个模块在客户端导入时会抛错就输出警告。传递性检查由reaches_guard_import同文件 L120-L140配合resolve_relative_import完成遍历整个相对导入图。5.2 其他内置校验validate()src/validate.js还会检查并给出黄色警告使用$app/env但目标用户可能不基于 SvelteKit —— 建议改用esm-env使用import.meta.env仅 Vite 应用可用—— 建议改用esm-env使用了$app/导入或sveltejs/kit却未在dependencies/peerDependencies声明sveltejs/kit包含 Svelte 文件却未声明svelte依赖缺少exports字段、Svelte 文件缺少svelte导出条件、pkg.svelte字段与exports不一致。validate()本身不是build()的硬失败条件——src/index.js 在do_build完成后调用validate()仅打印警告避免 watch 模式下因告警而中断开发。6. 类型声明生成与 TypeScript 转译6.1emit_dts基于 svelte2tsx 的声明产出--types默认开启true。声明生成走 src/typescript.js 的emit_dts调用svelte2tsx的emitDts把.d.ts写入临时目录再经别名解析resolve_aliases与声明 map 路径修正后拷贝到输出目录。有一个细节值得注意svelte_dep从peerDependencies/dependencies读取后会用semver.intersects判断是否兼容 Svelte 3从而在svelte-shims.d.ts与svelte-shims-v4.d.ts之间选择对应 2.2.0 的use Svelte 4 typings when packaging特性。遇到latest、next等非 semver 版本串时2.3.12的修复保证了不崩溃回退为按 Svelte 4 处理。6.2 手写声明优先emit_dts会跳过与源码中手写.d.ts冲突的文件并给出提示Using $lib/xxx instead of generated .d.ts file。因此对需要精细控制公开类型的模块直接提供手写.d.ts是受支持的做法。6.3 TS → JS 转译transpile_tssrc/typescript.js使用 TypeScript 的transpileModule并强制module: ESNext、moduleResolution: NodeNext。注释中说明这是为了解决NodeNext在transpileModule下被误判为 CommonJS 的已知问题2.2.3的overwrite nodenext option when transpiling正是该修复。若rewriteRelativeImportExtensions开启还会通过自定义 transformer 把import.meta.glob(./*.ts)之类的相对 glob 中的.ts重写为.js同时处理字符串字面量与模板字符串两种形态。6.4 tsconfig 的查找与指定未指定时load_tsconfigsrc/typescript.js从文件所在目录逐级向上查找最近的tsconfig.json/jsconfig.json并带缓存2.3.0起可通过--tsconfig或编程 API 的tsconfig选项显式指定3.0.0-next.4/3.0.0-next.5修复了tsconfig 位于 package root 上方时也能正确生成声明的问题emit declarations when the tsconfig lives above the package root——对应测试可在 test/index.spec.js 的 fixtures如typescript-esnext、typescript-nodenext中看到端倪。6.5 扩展名重写rewriteRelativeImportExtensions2.5.6修复了 Svelte 文件中相对导入.ts → .js的重写。实现上是 src/utils.js 的resolve_ts_endings对以./或../开头、以.ts结尾的导入路径统一替换为.js。在 Svelte 5 中script langts原生可用因此strip_lang_tags同文件 L115-L128会保留 Svelte 5 下的ts标签同时保留application/ldjson等typeapplication/...属性对应1.0.0-next.4/next.5的修复历史。7. 配置读取与 Svelte 2.x 遗留项7.1 支持svelte.config.ts2.4.0起支持svelte.config.tsCHANGELOG 附带了重要提示运行环境必须支持导入 TS 文件。在 Node.js 中Node 22.6.0 需要--experimental-strip-types标志Node 23.6.0 无需标志即可直接使用。这与第 2 节要求 Node 22相互呼应。7.2 可用的配置项从 src/types.d.ts 的Options.config可以看出svelte-package实际消费的字段配置项类型说明aliasRecordstring, string路径别名配合第 4 节的相对化转换extensionsstring[]视为 Svelte 组件的扩展名默认[.svelte]outDirstring临时输出目录默认.svelte-kit最终产物仍到distpreprocessPreprocessorGroup打包前对 Svelte 文件执行的预处理与vitePreprocess等配合files.libstring已废弃旧版输入目录配置7.3 2.0.0 的破坏性变更2.0.0移除了package.json的生成能力与svelte.config.js中的package配置项输出目录固定为dist。因此现在不推荐再写config.packageCLI 会直接报错并提示迁移打包用的package.json元数据exports、svelte条件等完全由你在项目根目录自行维护。8. 构建与监听流水线视角8.1 一次性构建buildsrc/index.js 的do_build展示了完整流水线normalize_options解析输入/输出/临时目录、扩展名、别名、tsconfig校验输入目录存在清空并重建临时目录scan遍历输入目录全部文件见 src/utils.js 的scan/analyzedest规则.svelte保持、.d.ts原样、其余.ts变.js若types开启先emit_dts生成声明逐文件process_file预处理 →resolve_aliases→ TS 转译/扩展名重写 → 写入除非preserve_output否则删除dist后整体拷贝临时目录输出形如src/lib - dist的绿色日志。--preserve-output2.5.0新增对应 src/index.js跳过输出目录的整目录删除便于把静态资源预置在dist中。测试 test/index.spec.js 演示了先往dist/assets写入文件再以preserve_output: true打包产物中该文件得以保留。8.2 监听模式watchwatchsrc/index.js基于chokidar当前依赖chokidar5对应2.5.7的升级文件删除时同步删除dist中对应产物及关联的.d.ts/.d.mts/.d.cts并清理空目录add/change事件以 100ms 防抖批量重处理tsconfig/jsconfig 变化会清空 tsconfig 缓存并全量重建声明单文件处理出错不会中断监听对应2.2.2的崩溃修复2.2.1起清空dist被延后到构建成功之后避免失败时破坏已有产物。9. 发布质量与生态细节CHANGELOG 中还沉淀了一批发布侧的工程实践值得组件库作者借鉴软件来源证明provenance2.3.3/2.3.4为发布启用 provenance增强供应链可信度npm 可发现性2.3.2为包添加 keywords方便 npm 搜索命中仓库 URL 规范2.4.1在package.json的 repository 地址补上.git后缀依赖完整性检查1.0.0-next.6起若打包产物涉及 Svelte 但package.json未声明svelte依赖会发出警告3.0.0-next.1将typescript声明为可选 peer dependency使包在 strict node-linkers如 pnpm 严格模式下也能安装使用。10. 写出可发布组件库的清单结合第 5 节校验器与源码行为一个合格的 Svelte 库package.json应满足{ name: my-svelte-lib, svelte: ./dist/index.js, exports: { .: { svelte: ./dist/index.js, types: ./dist/index.d.ts, default: ./dist/index.js } }, files: [dist], peerDependencies: { svelte: ^5.0.0 } }要点必须提供exports字段且包含svelte条件否则工具链无法识别这是 Svelte 包svelte字段指向的入口要与exports[.]中实际导出的文件一致校验器会逐字核对使用了$app/导入或import.meta.env时要么声明对应依赖要么改用esm-env这类跨打包器方案server-only 文件文件名含.server.或在server/目录务必通过import $app/server建立客户端防护。结语从 2.x 到 3.0.0-nextsveltejs/package的演进主线非常清晰依赖瘦身sade/kleur → Node 内置、配置现代化sveltejs/load-config、svelte.config.ts、别名与扩展名处理的健壮化以及面向组件库被 SvelteKit 应用消费场景的 server-only 防护。理解这些机制的落脚点都在 packages/package/src 这套不过百行级的模块化实现中——对库作者而言它就是一份可直接对照的行为规范对希望深入 SvelteKit 工具链的开发者而言也是一个极佳的精读范本。赞分享Web框架后端前端【免费下载链接】kitweb development, streamlined项目地址https://gitcode.com/gh_mirrors/kit/kit点击查看免费下载相关推荐使用 sveltejs/package 构建与发布 Svelte 组件库SvelteKit 打包指南使用 sveltejs/package 构建与发布 Svelte 组件库SvelteKit 打包指南 导读本文围绕 SvelteKit 官方文档「PackWeb框架后端前端Cosmic IDEAndroid上的桌面级JVM开发环境完全指南Cosmic IDEAndroid上的桌面级JVM开发环境完全指南 你是否曾想过在手机上编写、编译和运行Java/Kotlin代码Cosmic IDE正是为MobileFace人脸检测完全指南从YOLOV3到实时50fps的优化之路MobileFace人脸检测完全指南从YOLOV3到实时50fps的优化之路 MobileFace是一个专为移动设备设计的人脸识别解决方案它集成了人脸检测、Web框架后端前端上一篇告别版本混乱nvm个性化Node.js版本管理指南下一篇现代Web应用中的动态进度可视化ProgressBar.js深度解析与技术实践创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考