Frontend Academy · Pelajaran

Pemberian Versi dan Publikasi ke npm

Gunakan pemberian versi semantik, otomatisasi pembuatan changelog dengan Changesets atau standard-version, lalu publikasikan pustaka ke npm atau registri privat.

Pelajaran 3 dari 415 langkah

Pemberian Versi dan Publikasi ke npm adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Mengapa Mempublikasikan ke npm?

Jika sistem desain Anda digunakan oleh lebih dari satu aplikasi, publikasikan sebagai paket. Pengguna memasangnya dengan npm/yarn/pnpm, mengunci versinya, dan memperbaruinya sesuai jadwal mereka.

Penerapan Versi Semantik (SemVer)

Versi mengikuti MAJOR.MINOR.PATCH. MAJOR: perubahan yang memutus kompatibilitas. MINOR: fitur baru yang kompatibel dengan versi sebelumnya. PATCH: hanya perbaikan masalah.

Kapan Menaikkan Versi

Mengganti nama properti? MAJOR. Menambahkan properti opsional baru? MINOR. Memperbaiki masalah CSS? PATCH. Rilis sebelum 1.0 (0.x.y) dapat menyebabkan kerusakan pada MINOR — tetapi tetaplah bijaksana.

package.json — Manifes

Konfigurasikan tampilan paket Anda di npm.

{
  "name": "@yourorg/design-system",
  "version": "1.4.2",
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "exports": {
    ".": { "import": "./dist/index.esm.js", "require": "./dist/index.cjs.js" },
    "./theme": "./dist/theme.js"
  },
  "files": ["dist", "README.md"],
  "peerDependencies": { "react": "^18.0.0" }
}

Keluaran Build

Sertakan CommonJS, ESM, dan deklarasi tipe. Alat seperti tsup atau vite build --lib dapat menanganinya.

// tsup.config.ts
export default {
  entry: ['src/index.ts'],
  format: ['cjs', 'esm'],
  dts: true,
  clean: true,
  external: ['react', 'react-dom']
};

// package.json: "build": "tsup"

peerDependencies

Daftarkan React/Vue/dan lainnya sebagai peerDependencies agar pengguna menggunakan versinya sendiri. Menandainya sebagai dependensi biasa akan membundelnya dua kali — kait dan konteks menjadi rusak.

Ramah terhadap Penghapusan Kode Tak Terpakai

Gunakan ekspor ESM dan hindari efek samping agar pembundel dapat menghapus komponen yang tidak digunakan. Tandai dalam package.json: "sideEffects": false (atau cantumkan berkas tertentu seperti CSS).

Mempublikasikan ke npm

Masuk sekali, lalu publikasikan.

npm login

# Bump version + publish:
npm version patch   # 1.4.2 -> 1.4.3
npm publish

# Or scoped public package:
npm publish --access public

Mengotomatiskan Rilis dengan Changesets

Changesets adalah perangkat modern untuk publikasi monorepo dan pustaka. Permintaan tarik menyertakan berkas 'changeset' yang menjelaskan perubahan; CI rilis menaikkan versi dan memublikasikannya.

npm install -D @changesets/cli
npx changeset init

# In each PR:
npx changeset
# pick package, type (major/minor/patch), describe change
# commits .changeset/<random>.md

# CI on main:
npx changeset version  # bumps versions in package.json + generates changelog
npx changeset publish  # publishes to npm

Changelog Otomatis

Changesets secara otomatis menghasilkan CHANGELOG.md untuk setiap paket berdasarkan deskripsi changeset — pengguna dapat membaca perubahan pada setiap versi.

Tag Distribusi npm

Gunakan tag distribusi untuk prarilis: npm publish --tag beta memublikasikan tanpa menimpa versi terbaru. Pengguna dapat memilihnya dengan npm install @yourorg/design-system@beta.

Registri Privat

Paket internal dapat menggunakan GitHub Packages, GitLab Package Registry, atau Verdaccio yang dihosting sendiri. Konfigurasikan dengan .npmrc: @yourorg:registry=https://npm.pkg.github.com.

Menghentikan Versi Lama

Tandai versi sebagai usang untuk memperingatkan penginstal.

npm deprecate @yourorg/design-system@1.0.0 'Use 2.x for React 18 support'

Pemeriksaan Singkat

Jika Anda mengganti nama properti pada komponen yang diekspor, kenaikan versi SemVer seperti apa yang diperlukan?

Jawab di pelajaran interaktif

Ringkasan: Penerapan Versi dan Publikasi

SemVer: MAJOR.MINOR.PATCH — perubahan yang memutus kompatibilitas, fitur, perbaikan. Buat CJS + ESM + tipe (tsup, vite --lib). React/Vue sebagai peerDependencies. sideEffects:false untuk menghapus kode yang tidak digunakan. Gunakan npm publish atau otomatisasikan dengan Changesets. CHANGELOG dibuat secara otomatis. Gunakan tag distribusi untuk versi beta. Registri privat untuk paket internal.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 41
Pelajaran: 163

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pemberian Versi dan Publikasi ke npm” gratis?

Ya — teks lengkap “Pemberian Versi dan Publikasi ke npm” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pemberian Versi dan Publikasi ke npm”?

Gunakan pemberian versi semantik, otomatisasi pembuatan changelog dengan Changesets atau standard-version, lalu publikasikan pustaka ke npm atau registri privat. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Pemberian Versi dan Publikasi ke npm” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Storybook: Story, Kontrol, dan Dokumentasi
Token Desain dengan Style Dictionary
Pemberian Versi dan Publikasi ke npm
Menggunakan Sistem Desain

← Kembali ke Frontend Academy