发布一个 svelte 3 组件：package.json 的 "main" 和 "svelte" 字段的语义？

Question

我学习了 Svelte 教程并重写了 component bindings section with a state machine. That worked lovely 中的键盘。

现在我想将 Machine.svelte 文件提取到 npm 包中，但我不确定该怎么做。我找不到任何关于发布的文档。对于我从 svelte-virtual-list 中看到的内容，我可能必须配置我的 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 这一事实感到困惑？您将如何发布一个 svelte 组件？

编辑：final gist 正确导入 Machine Svelte 组件

Answer 1

svelte 字段被 rollup-plugin-svelte and (if properly configured) svelte-loader 用于定位源文件，以便您的第三方组件与您的应用程序的其余部分同时编译（并从相同的导入内部图书馆）。

在像 svelte-virtual-list 这样的情况下，您不能真正从 JavaScript 以编程方式使用它（即它必须在另一个组件内），[=11 真的没有意义=] 字段也是如此；我认为这是以前版本遗留下来的东西。

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

Additionally I am perplexed by the fact that in the package.json.files the VirtualList.svelte is not present?

无论 pkg.files 中的内容如何，pkg.main 都将包含在内。由于 svelte-virtual-list 中有一个错误的 pkg.main，VirtualList.svelte 文件包含在包中，即使我忘记将它添加到 pkg.files.

发布一个 svelte 3 组件：package.json 的 "main" 和 "svelte" 字段的语义？

publishing a svelte 3 component: semantics for "main" and "svelte" fields of package.json?

svelte

svelte-component