开发Svelte npm包时，如何添加多文件示例项目？

针对你不想让主包承担示例依赖、又不想分仓的需求，业内常用的落地方案如下：

• 用工作区（Workspaces）在仓库内隔离示例与主包
  在根目录的package.json中配置工作区，将示例放在独立子目录（比如examples/）下，每个示例作为单独子项目维护自己的package.json：

  {
    "name": "mymodule",
    "private": true,
    "workspaces": [
      ".",
      "examples/*"
    ]
  }
  

  示例的依赖会单独安装在子目录的依赖树中，完全不会污染主包。同时子项目可以直接引用本地主包（比如在示例的package.json中设置"mymodule": "workspace:.."），开发时能实时调试主包代码。

• 用SvelteKit搭建文档站承载交互式示例
  在主仓库内维护docs/目录作为独立SvelteKit项目，把示例集成到文档中：

  • 每个示例对应文档站的一个路由页面，比如docs/src/routes/examples/with-form/，页面内直接渲染示例组件，同时展示对应的源码（可通过导入代码文件或插件实现）。
  • 文档站的依赖单独维护在docs/package.json，和主包彻底分离，发布主包时无需处理文档相关内容。

• 按真实项目结构组织多文件示例
  对于需要多文件的SvelteKit示例（比如包含+page.server.js、hooks.server.js的场景），直接在examples/下创建对应子目录，完全模拟真实项目结构：

  mymodule/
  ├── src/
  ├── package.json
  └── examples/
      ├── with-auth/
      │   ├── +page.svelte
      │   ├── +page.server.js
      │   └── hooks.server.js
      └── with-database/
          ├── +page.svelte
          └── +page.server.js
  

  可以在主包的README.md中添加示例目录的导航说明，引导用户查看具体示例的代码结构。

• 发布时主动排除示例目录
  在主包的package.json中配置files字段，明确指定发布到npm的内容，排除示例、文档等非核心目录：

  {
    "files": [
      "src",
      "dist",
      "package.json",
      "README.md"
    ]
  }
  

  确保发布的npm包体积干净，只包含核心功能代码。

内容的提问来源于stack exchange，提问作者Anna