发布 Svelte 3 组件：Package.json 的 "main" 和"svelte"字段的语义？

Question

我学习了 Svelte 教程，并使用状态机重写了component bindings部分中的键盘。这很可爱。

现在我想将Machine.svelte文件提取到npm包中，但不确定如何做到这一点。我找不到任何关于出版的文档。对于我从苗条的虚拟列表中看到的内容，我可能必须配置package.json的main或svelte字段：

{
"name": "@sveltejs/svelte-virtual-list",
"version": "3.0.0",
"description": "A <VirtualList> component for Svelte apps",
"main": "VirtualList.svelte",
"svelte": "VirtualList.svelte",
"scripts": {
"build": "rollup -c",
"dev": "rollup -cw",
"prepublishOnly": "npm test",
"test": "node test/runner.js",
"test:browser": "npm run build && serve test/public",
"pretest": "npm run build",
"lint": "eslint src/VirtualList.svelte"
},
"devDependencies": {
"eslint": "^5.12.1",
"eslint-plugin-svelte3": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git",
"port-authority": "^1.0.5",
"puppeteer": "^1.9.0",
"rollup": "^1.1.2",
"rollup-plugin-commonjs": "^9.2.0",
"rollup-plugin-node-resolve": "^4.0.0",
"rollup-plugin-svelte": "^5.0.1",
"sirv": "^0.2.2",
"svelte": "^3.0.0-beta.2",
"tap-diff": "^0.1.1",
"tap-dot": "^2.0.0",
"tape-modern": "^1.1.1"
},
"repository": "https://github.com/sveltejs/svelte-virtual-list",
"author": "Rich Harris",
"license": "LIL",
"keywords": [
"svelte"
],
"files": [
"src",
"index.mjs",
"index.js"
]
}

这是一个正确的假设吗？此外，我对package.json.files中不存在VirtualList.svelte这一事实感到困惑？您将如何发布一个苗条的组件？

编辑：最终要点正确导入MachineSvelte组件

Answer 1

svelte字段由 rollup-plugin-svelte 和(如果配置正确)svelte-loader 来查找源文件，以便您的第三方组件与应用程序的其余部分同时编译(并从同一内部库导入)。

在像svelte-virtual-list这样的情况下，你不能真正从JavaScript以编程方式使用它(即它必须在另一个组件中)，那么拥有一个main字段也是没有意义的;我认为这是以前版本遗留下来的东西。

但在某些情况下，你确实希望非 Svelte 用户能够将你的组件用作独立类，这就是main很有用的时候，只要它指向一个预编译的 JavaScript 文件。这可以在prepublish脚本期间使用 rollup-plugin-svelte 生成(尽管我们可以更好地围绕此生成一些标准工作流)。为了获得最大的兼容性，打算以这种方式使用的组件或组件包应该有一个pkg.main(通常index.js是 CommonJS 或 UMD 文件)和一个pkg.module(通常index.mjs是 JavaScript 模块)。

此外，我对在package.json.files中不存在VirtualList.svelte这一事实感到困惑？

无论pkg.files中的内容如何，pkg.main都将始终包含在内。由于 svelte-virtual-list 中存在错误的pkg.main，因此即使我忘记将其添加到pkg.files中，VirtualList.svelte文件也包含在包中。