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

【问题标题】：publishing a svelte 3 component: semantics for "main" and "svelte" fields of package.json?发布一个 svelte 3 组件：package.json 的“main”和“svelte”字段的语义？
【发布时间】：2019-11-06 14:26:23
【问题描述】：

我学习了 Svelte 教程并使用状态机重写了 component bindings 部分中的键盘。那个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 不存在这一事实感到困惑？你会如何发布一个苗条的组件？？

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

【问题讨论】：

标签： svelte svelte-component

【解决方案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，因此 VirtualList.svelte 文件包含在包中，即使我忘记将其添加到 pkg.files。

【讨论】：