0Pricing
Vue Academy · Lesson

Publishing to npm and Semantic Versioning

package.json fields (main, module, exports), changelogs, semantic-release, npm publish flow.

Publishing to npm and Semantic Versioning is a free Vue Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Preparing to Publish

Publishing makes your library installable via npm install. Before that, package.json must declare the entry points correctly and you must control what files ship.

main and module

main points to the CommonJS build for older tools; module points to the ESM build so modern bundlers pick the tree-shakeable version.

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

The exports Map

The modern exports field defines conditional entry points. It takes precedence over main/module and controls subpath access.

{
  "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"
  }
}

Conditional Exports

The import, require, and types conditions let Node and bundlers resolve the right file for ESM, CommonJS, and TypeScript respectively.

Controlling Published Files

Use the files field to allowlist what ships, or a .npmignore to blocklist. Shipping dist and excluding source and tests keeps the package small.

{
  "files": ["dist"]
}

.npmignore

If you prefer a blocklist, .npmignore excludes files even when no files field is set. Without either, npm publishes nearly everything.

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

npm pack Preview

Run npm pack to create a tarball and inspect exactly what would publish - a critical safety check before going live.

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

Semantic Versioning

SemVer uses MAJOR.MINOR.PATCH. Bump patch for backward-compatible bug fixes, minor for backward-compatible features, and major for breaking changes.

npm version Commands

The npm version command bumps the version in package.json and creates a git tag in one step.

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 publish

npm publish uploads the package. Scoped public packages need the --access public flag the first time.

npm publish --access public

prepublishOnly and dist-tag

A prepublishOnly script ensures a fresh build runs before publish, and --tag next publishes pre-releases without moving the latest tag.

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

Quick Check

You add a new optional prop without breaking existing usage. Which version bump?

Recap

Configure main, module, and a conditional exports map (import/require/types), and control shipped files with files or .npmignore. Preview with npm pack, then bump versions per SemVer using npm version patch/minor/major and release with npm publish (adding --access public for scoped packages).

Frequently asked questions

Is the “Publishing to npm and Semantic Versioning” lesson free?

Yes — the full text of “Publishing to npm and Semantic Versioning” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Publishing to npm and Semantic Versioning”?

package.json fields (main, module, exports), changelogs, semantic-release, npm publish flow. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Publishing to npm and Semantic Versioning” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Vite Library Mode Configuration
  2. TypeScript Declarations for Component Libraries
  3. Tree-Shaking and Auto-Import
  4. Publishing to npm and Semantic Versioning
← Back to Vue Academy