Vue Academy · Oppitunti

Vue-liitännäisten julkaiseminen ja tyypitys

Pakettirakenne, ComponentCustomProperties-laajennus TypeScriptillä ja npm-jakelu

Oppitunti 4/413 vaihetta

Vue-liitännäisten julkaiseminen ja tyypitys on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Pluginin paketoiminen npm:ää varten

Jakaaksenne Vue-pluginin julkaiskaa se npm-pakettina. Paketin on määriteltävä oikeat riippuvuudet, sisällettävä asianmukainen build, mukana on oltava TypeScript-tyypit ja paketti on julkaistava oikein. Tässä oppitunnissa käsitellään kaikki nämä vaiheet.

Vuen peerDependencies

Määritelkää Vue peerDependencyksi, ei tavalliseksi riippuvuudeksi. Näin isäntäsovellus tarjoaa Vuen, jolloin samaan bundleen ei päädy kahta Vue-kopiota, mikä rikkoisi reaktiivisuuden.

{
  "name": "vue-toast-kit",
  "peerDependencies": {
    "vue": "^3.4.0"
  },
  "devDependencies": {
    "vue": "^3.4.0"
  }
}

Viten library mode

Koontakaa paketti Viten library mode -tilassa. Määrittäkää build.lib-asetuksella lähtöpiste, nimi ja output-muodot (ES + UMD), ja externalisoikaa Vue, jotta sitä ei sisällytetä bundleen.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'VueToastKit',
      fileName: 'index',
      formats: ['es', 'umd']
    }
  }
})

Vuen externalisointi rollupOptionsissa

Merkitkää vue ulkoiseksi riippuvuudeksi ja yhdistäkää se globaaliin muuttujaan UMD-buildia varten, jotta käytössä on kuluttajan Vue.

build: {
  lib: { /* ... */ },
  rollupOptions: {
    external: ['vue'],
    output: {
      globals: { vue: 'Vue' }
    }
  }
}

Tyyppimääritysten generointi

Julkaiskaa .d.ts-tiedostot, jotta paketin käyttäjät saavat automaattisen täydennyksen ja tyyppitarkistuksen. Käyttäkää vite-plugin-dts-pluginia määritysten tuottamiseen library-buildin aikana.

import dts from 'vite-plugin-dts'

export default defineConfig({
  plugins: [
    vue(),
    dts({ insertTypesEntry: true })
  ]
})

package.json:n exports-kartta

Ohjatkaa paketin käyttäjät oikeisiin tiedostoihin exports-kentän avulla ja julkaiskaa ESM-build sekä tyyppimääritykset. Asettakaa type: module ESM-ensisijaisille paketeille.

{
  "type": "module",
  "main": "./dist/index.umd.cjs",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.js",
      "require": "./dist/index.umd.cjs"
    }
  }
}

Tyyppilaajennuksen julkaiseminen

Jos plugin lisää globaaleja ominaisuuksia, kuten this.$toast-ominaisuuden, sisällyttäkää ComponentCustomProperties-laajennus julkaistaviin tyyppeihin, jotta käyttäjien editorit tunnistavat sen automaattisesti.

// src/types.d.ts (included in the build)
import type { ToastService } from './toast'

declare module 'vue' {
  interface ComponentCustomProperties {
    $toast: ToastService
  }
}

export {}

Julkinen entry point

src/index.ts-entry pointin tulee viedä plugin oletusvientinä sekä kaikki composablet, avaimet ja tyypit, joita käyttäjät tarvitsevat.

import ToastPlugin from './plugin'
export default ToastPlugin

export { useToast } from './composable'
export { toastKey } from './toast'
export type { ToastService, Toast } from './toast'

files-kenttä

Käyttäkää files-kenttää julkaistaksenne vain buildin tulosteet. Näin paketti pysyy pienenä eikä sisällä lähdekoodia tai asetustiedostoja.

{
  "files": ["dist"],
  "sideEffects": false
}

Julkaiseminen provenance-tiedoin

Julkaiskaa npm:ään provenance-tiedoin. Ne yhdistävät paketin salausteknisesti CI-buildiin ja lähdecommitiin. Suorittakaa julkaisu luotetusta CI-ympäristöstä, kuten GitHub Actionsista, jolla on tarvittavat oikeudet.

# in CI (GitHub Actions)
npm publish --provenance --access public

# package.json can also set:
# "publishConfig": { "provenance": true }

Julkaisua edeltävä tarkistuslista

Tarkistakaa ennen julkaisua, että Vue on peer-riippuvuus, dist sisältää ESM-buildin ja tyypit, exports toimii oikein, versionumero on päivitetty ja dry run näyttää oikealta.

# inspect what will be published
npm publish --dry-run

# verify the tarball contents
npm pack

Pikatesti

Testatkaa, miten hyvin ymmärrätte Vue-pluginien julkaisemisen.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opitte pluginien julkaisemisen ja tyypityksen perusteet:

Määritelkää Vue peerDependencyksi, jotta Vue-kopioita ei tule useita
Koontakaa Viten library mode -tilassa ja externalisoikaa Vue
Tuottakaa .d.ts-tiedostot (vite-plugin-dts) ja julkaiskaa tyyppilaajennus
Määrittäkää exports-, files- ja type: module -asetukset
Julkaiskaa --provenance-asetuksella luotetusta CI-ympäristöstä

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 42
Oppitunnit: 156

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Vue-liitännäisten julkaiseminen ja tyypitys” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Vue-liitännäisten julkaiseminen ja tyypitys”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Vue-liitännäisten julkaiseminen ja tyypitys”?

Pakettirakenne, ComponentCustomProperties-laajennus TypeScriptillä ja npm-jakelu Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Vue-liitännäisten julkaiseminen ja tyypitys”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?

Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Liitännäisarkkitehtuuri ja app.use()
Globaalit ominaisuudet ja provide/inject liitännäisissä
Ilmoitus- ja toast-liitännäisesimerkki
Vue-liitännäisten julkaiseminen ja tyypitys

← Takaisin: Vue Academy