如何创建可以导入 sveltekit 的 npm 包?
How do I create an npm package that I can import into sveltekit?
我想创建一个简单的 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 is not a constructor。 ..
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);
}
}
虽然 Caleb 的回答对我的情况并没有真正的帮助,但我认为它有点指向出了什么问题。我不打算编写一个专注于 svelte 的组件库,而是一个通用的 model/factory 库,可以在前端和后端之间重用。
发生这个问题后我做了一些事情,下面列出了我认为出错的事情:
- 将 npm 包本地链接到我的项目中导致出现问题 (
npm link
)。我对 sveltekit 中的所有构建工具几乎没有经验,但我知道这些 stale/non-functional 库是从哪里引用的。我删除了 node-modules/.vite
文件夹,它有时解决了我的问题(我 grep
搜索了看似缓存的值,这使我进入了这个目录。根据我的开发经验,在 node-modules
中发现构建工件非常罕见,所以在那个地方找到它有点乏味)。
- 我将我的 npm 包转换为混合 ESM/CJS 模块(以前仅限 CommonJS)。我不确定这是否解决了最初的问题,但可能值得一试。
我认为主要问题是本地链接和 vite 中正在进行的某种构建缓存。
话虽这么说,从那以后我就再也没有遇到过任何关于库的问题。
svelte-kit package
命令应该会自动为您完成所有操作 (docs)。
This Youtube video 应该解释一切。
它提供的发布步骤是:
npm init svelte@next project-name
cd project-name
- 创建组件
npx svelte-kit package
cd package
- 登录到 npm/创建一个帐户
npm publish --access public
我想创建一个简单的 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 is not a constructor。 ..
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);
}
}
虽然 Caleb 的回答对我的情况并没有真正的帮助,但我认为它有点指向出了什么问题。我不打算编写一个专注于 svelte 的组件库,而是一个通用的 model/factory 库,可以在前端和后端之间重用。
发生这个问题后我做了一些事情,下面列出了我认为出错的事情:
- 将 npm 包本地链接到我的项目中导致出现问题 (
npm link
)。我对 sveltekit 中的所有构建工具几乎没有经验,但我知道这些 stale/non-functional 库是从哪里引用的。我删除了node-modules/.vite
文件夹,它有时解决了我的问题(我grep
搜索了看似缓存的值,这使我进入了这个目录。根据我的开发经验,在node-modules
中发现构建工件非常罕见,所以在那个地方找到它有点乏味)。 - 我将我的 npm 包转换为混合 ESM/CJS 模块(以前仅限 CommonJS)。我不确定这是否解决了最初的问题,但可能值得一试。
我认为主要问题是本地链接和 vite 中正在进行的某种构建缓存。
话虽这么说,从那以后我就再也没有遇到过任何关于库的问题。
svelte-kit package
命令应该会自动为您完成所有操作 (docs)。
This Youtube video 应该解释一切。
它提供的发布步骤是:
npm init svelte@next project-name
cd project-name
- 创建组件
npx svelte-kit package
cd package
- 登录到 npm/创建一个帐户
npm publish --access public