Vue Academy · 课时

发布到 npm 与语义化版本

package.json 字段（main、module、exports）、变更日志、semantic-release，以及 npm 发布流程

第 4 / 4 课13 个步骤

发布到 npm 与语义化版本 是 CoddyKit 上的免费 Vue Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

准备发布

发布后，您的库就可以通过 npm install 安装。在此之前，package.json 必须正确声明入口点，并且您必须控制要发布的文件。

主入口和模块入口

main 指向供旧版工具使用的 CommonJS 构建；module 指向 ESM 构建，让现代打包工具选择支持摇树优化的版本。

{
  "main": "./dist/my-ui-lib.cjs.js",
  "module": "./dist/my-ui-lib.es.js"
}

导出映射

现代的 exports 字段定义条件式入口点。它的优先级高于 main/module，并控制子路径访问。

{
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/my-ui-lib.es.js",
      "require": "./dist/my-ui-lib.cjs.js"
    },
    "./style.css": "./dist/style.css"
  }
}

条件导出

import、require 和 types 条件分别让 Node 和打包工具为 ESM、CommonJS 及 TypeScript 解析正确的文件。

控制发布的文件

使用 files 字段建立允许发布的文件列表，或使用 .npmignore 建立排除列表。发布 dist 并排除源代码和测试文件，可以保持软件包体积较小。

{
  "files": ["dist"]
}

.npmignore

如果您更喜欢使用排除列表，.npmignore 会排除文件，即使没有设置 files 字段也是如此。如果两者都没有，npm 几乎会发布所有内容。

# .npmignore
src
tests
vite.config.ts
*.log

npm pack 预览

运行 npm pack 创建压缩包，并准确检查将要发布的内容——这是正式发布前的重要安全检查。

npm pack
# inspect the listed files; nothing secret should appear

语义化版本控制

SemVer 使用 MAJOR.MINOR.PATCH。向后兼容的错误修复应提升 补丁版本，向后兼容的功能应提升 次要版本，而不兼容的变更应提升 主要版本。

npm 的版本命令

npm version 命令会更新 package.json 中的版本，并在一步操作中创建 git 标签。

npm version patch   # 1.0.0 -> 1.0.1
npm version minor   # 1.0.1 -> 1.1.0
npm version major   # 1.1.0 -> 2.0.0

npm 发布命令

npm publish 会上传软件包。范围公共软件包首次发布时需要使用 --access public 标志。

npm publish --access public

prepublishOnly 和发行标签

prepublishOnly 脚本会确保发布前运行全新的构建，而 --tag next 会发布预发行版本，同时不会移动 latest 标签。

{
  "scripts": {
    "prepublishOnly": "npm run build"
  }
}
// npm publish --tag next

快速检查

您添加了一个新的可选属性，且没有破坏现有用法。应该提升哪个版本？

在交互式课程中回答

回顾

配置 main、module 和条件式 exports 映射（import/require/types），并通过 files 或 .npmignore 控制发布的文件。使用 npm pack 预览，然后按照 SemVer 使用 npm version patch/minor/major 提升版本，并通过 npm publish 发布（范围软件包需要添加 --access public）。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 42
课程: 156

免费开始学习查看完整课程

常见问题解答

「发布到 npm 与语义化版本」课时是免费的吗？

是的 — 「发布到 npm 与语义化版本」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「发布到 npm 与语义化版本」这节课中我会学到什么？

package.json 字段（main、module、exports）、变更日志、semantic-release，以及 npm 发布流程你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「发布到 npm 与语义化版本」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy