如何创建可以导入 sveltekit 的 npm 包？

Question

我想创建一个简单的 npm 包并将其导入到 svelte 组件中，但是，我似乎无法使用索引文件来导入深度嵌套的文件，例如

// routes/test.svelte
<script lang="ts">
  import { Test } from '@my-co/my-lib/dist/folder1/folder2/test';
  const test = new Test('foo', 'bar');
</script>

有效，但是

// routes/test.svelte
<script lang="ts">
  import { Test } from '@my-co/my-lib';
  const test = new Test('foo', 'bar');
</script>

没有。我的 npm 模块的 index.ts 文件中有以下内容：

export { Test } from './folder1/folder2/test';

奇怪的是，这似乎在 ssr 中也有效（控制台中的开发服务器输出似乎正确地选择了 import {Test} from '@my-co/my-lib'），但在浏览器中却没有，我得到的错误是 Test 不是构造函数...

Npm 库 package.json：

{
  "name": "@myco/my-lib",
  "version": "0.0.2",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "tsc",
    "prepare": "npm run build"
  },
  "author": "redacted",
  "license": "ISC",
  "dependencies": {
    "@types/rosie": "0.0.40",
    "@types/slug": "^5.0.3",
    "rosie": "^2.1.0",
    "slug": "^5.1.1"
  }
}

Npm 库 tsconfig

{
  "compilerOptions": {
    "declaration": true,
    "strictNullChecks": true,
    "outDir": "dist",
    "moduleResolution": "node",
    "module": "es2015",
    "target": "es5",
    "sourceMap": true,
    "lib": ["es2015", "dom"],
    "rootDir": "src"
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

库结构

my-lib/
| dist/
| node_modules/
| src/
| | folder1/
| | | folder2/
| | | | test.ts

test.ts

export class Test {
  foo: string;
  bar: string;

  constructor(foo: string, bar: string) {
    this.foo = foo;
    this.bar = bar;
  }

  testMe() {
    console.log("foobar", this.foo, this.bar);
  }
}

Answer 1

虽然 Caleb 的回答对我的情况并没有真正的帮助，但我认为这有点说明出了什么问题。我不打算编写一个专注于纤细的组件库，而是一个通用的模型/工厂库，以便在前端和后端之间重用。

自从发生此问题后，我做了几件事，以下是我认为出了问题的列表：

• 将 npm 包本地链接到我的项目导致问题 (npm link)。我对 sveltekit 中的所有构建工具几乎没有经验，但我知道这些陈旧/无功能的库是从哪里引用的。我删除了 node-modules/.vite 文件夹，该文件夹有时可以解决我的问题（我 greped 是因为看似缓存的值导致我进入此目录。在我的开发经验中，在 node-modules 中找到构建工件非常罕见，所以这有点在那个地方很难找到）。
• 我将我的 npm 包转换为混合 ESM/CJS 模块（以前仅限 CommonJS）。我不确定这是否解决了最初的问题，但可能值得一试。

我认为主要问题是本地链接和 vite 中正在进行的某种构建缓存。

话虽如此，从那以后我就没有遇到图书馆的任何问题。

Answer 2

svelte-kit package 命令应该会自动为您完成所有工作 (docs)。

This Youtube video 应该解释一切。

它提供的发布步骤是：

1. npm init svelte@next project-name
2. cd project-name
3. 创建组件
4. npx svelte-kit package
5. cd package
6. 登录 npm / 创建帐户
7. npm publish --access public