Akses pakej tanpa Memasangnya.

Adakah anda tahu anda boleh mengakses pakej anda tanpa memasangnya?

Ya, anda boleh, dengan bantuan CDN popular seperti unpkg dan jsDelivr!

Apakah ini?

Unpkg dan jsDelivr ialah CDN yang mengehoskan pakej npm awam. Mereka membenarkan apl berasaskan penyemak imbas mengakses pakej dengan pantas secara global tanpa memerlukan pengurus pakej atau pengikat.

Bagaimana untuk Mengakses?

• Unpkg: https://unpkg.com/package-name
• jsDelivr: https://cdn.jsdelivr.net/npm/package-name

Bagaimana Ia Berfungsi?

1. Anda Terbitkan ke npm: Pakej anda dimuat naik ke pendaftaran awam npm apabila anda menjalankan npm publish.
2. CDN Ambil daripada npm:
   • Mereka mengesan versi baharu dalam pendaftaran npm.
   • Ambil bungkusan tarball dan ekstraknya.
   • Layankan fail berdasarkan medan seperti utama, unpkg atau jsdelivr dalam package.json.
3. Medan Tersuai: Medan seperti unpkg dan jsdelivr dalam package.json menentukan fail mana yang harus disediakan oleh CDN. Medan ini diabaikan oleh alatan lain melainkan disokong secara eksplisit.

Contoh: @monaco-editor/react

{
  "name": "@monaco-editor/react",
  "version": "4.4.6",
  "main": "lib/cjs/index.js",
  "unpkg": "lib/umd/monaco-react.min.js",
  "jsdelivr": "lib/umd/monaco-react.min.js"
}

unpkg dan jsdelivr ialah medan tersuai bukan medan standard dan ini boleh diabaikan oleh alatan lain melainkan mereka mengenalinya secara eksplisit. Ia digunakan untuk menentukan fail yang hendak disampaikan apabila pakej diminta melalui CDN unpkg / jsdelivr.

Kes Penggunaan

1. Aplikasi Berasaskan Pelayar

• Kes Penggunaan: Pembangun mahu memasukkan pustaka anda terus dalam fail HTML tanpa menggunakan pengurus pakej atau pengikat.

• Contoh:

  • Pemaju bahagian hadapan mahu memasukkan @monaco-editor/react dalam projek mereka tanpa menyediakan npm, Webpack atau alatan binaan lain.
  • Mereka boleh terus menggunakan:

     <script src="https://unpkg.com/@monaco-editor/react@latest/dist/monaco-react.min.js"></script>
  

• Perkaitan:

  • Ini memudahkan penggunaan untuk pembangun yang tidak menggunakan aliran kerja JavaScript moden.
  • Lazim untuk apl demo, prototaip atau projek kecil.

---

2. Cepat, Penghantaran Global

• Kes Penggunaan: Pastikan pakej anda dihidangkan dengan cepat dan boleh dipercayai di seluruh dunia.
• Contoh:
  • Tapak web yang menggunakan pustaka anda mendapat manfaat daripada pelayan kelebihan jsDelivr atau Unpkg yang diedarkan secara global, yang mengurangkan kependaman.
• Perkaitan:
  • Sesuai untuk aplikasi trafik tinggi atau semasa prestasi kritikal.

---

3. Mengelakkan Langkah Bina

• Kes Penggunaan: Sediakan versi pustaka anda yang sedia untuk digunakan untuk pengguna yang tidak mahu berurusan dengan transpilasi atau penggabungan.

• Contoh:

  • Pakej anda menyediakan binaan UMD atau IIFE yang diprabundel. Pembangun boleh memasukkannya secara langsung tanpa persediaan:

  {
    "name": "@monaco-editor/react",
    "version": "4.4.6",
    "main": "lib/cjs/index.js",
    "unpkg": "lib/umd/monaco-react.min.js",
    "jsdelivr": "lib/umd/monaco-react.min.js"
  }
  

• Perkaitan:

  • Baik untuk persekitaran pembangunan pesat atau ekosistem bukan Node.js.

---

4. Membenamkan Perpustakaan dalam Tapak Statik

• Kes Penggunaan: Permudahkan kemasukan perpustakaan dalam tapak statik tanpa persediaan yang rumit.

• Contoh:

  • Seorang blogger mahu menggunakan pemapar Markdown dalam blog mereka:

     <script src="https://unpkg.com/@monaco-editor/react@latest/dist/monaco-react.min.js"></script>
  

• Perkaitan:

  • Sesuai untuk kegunaan berskala kecil di mana pemasangan dan pengurusan kebergantungan adalah berlebihan.

---

5. Persekitaran Legasi

• Kes Penggunaan: Dayakan pengguna yang bekerja dalam persekitaran tanpa alat binaan moden atau Node.js.
• Contoh:
  • Pemaju yang mengekalkan aplikasi warisan boleh menggunakan pustaka anda melalui pautan CDN dan bukannya mengubah suai persediaan lapuknya.
• Perkaitan:
  • Menyokong apl lama atau persekitaran JavaScript bukan moden.

---

6. Demo dan Kotak Pasir

• Kes Penggunaan: Sediakan akses pantas ke pustaka anda untuk tunjuk cara dalam talian, kotak pasir atau platform ujian.

• Contoh:

  • Pada platform seperti CodePen atau JSFiddle, anda boleh terus memuatkan pustaka anda:

     <script src="https://cdn.jsdelivr.net/npm/my-library"></script>
  

• Perkaitan:

  • Memudahkan mempamerkan dan mencuba pustaka anda.

---

7. Pemuatan Khusus Versi

• Kes Penggunaan: Benarkan pengguna memuatkan versi tertentu pustaka anda tanpa perlu risau tentang arahan pemasangan npm.

• Contoh:

  • Seorang pengguna mahukan versi 2.3.0:

  {
    "name": "@monaco-editor/react",
    "version": "4.4.6",
    "main": "lib/cjs/index.js",
    "unpkg": "lib/umd/monaco-react.min.js",
    "jsdelivr": "lib/umd/monaco-react.min.js"
  }
  

• Perkaitan:

  • Membantu pembangun menguji atau mengunci projek mereka kepada versi tertentu tanpa alat penggabungan.

---

8. Perkongsian Pakej dalam Projek Pelbagai Rangka

• Kes Penggunaan: Pakej dikongsi antara projek yang menggunakan ekosistem berbeza (React, Angular, Vue, dll.), dan pengehosan CDN mengelakkan konflik penggabungan.

• Contoh:

  • Pustaka sistem reka bentuk (my-ui-library) dihoskan pada CDN dan pasukan boleh memasukkannya terus dalam berbilang projek:

     <script src="https://unpkg.com/@monaco-editor/react@latest/dist/monaco-react.min.js"></script>
  

• Perkaitan:

  • Menggalakkan penggunaan semula tanpa overhed pengurusan pergantungan.

---

9. Sandaran atau Alternatif kepada npm

• Kes Penggunaan: Sediakan cara alternatif untuk mengakses pakej anda jika isu pendaftaran npm timbul.
• Contoh:
  • jsDelivr boleh menyediakan pakej walaupun npm tidak berfungsi buat sementara waktu.
• Perkaitan:
  • Menambahkan lebihan dan kebolehpercayaan.

---

Bila Mengelakkan CDN Hosting

• Aplikasi Moden:
  • Jika kebanyakan pengguna anda menggunakan Node.js atau pengikat moden (Webpack, Rollup, dll.), mereka mungkin tidak memerlukan CDN.
• Saiz Pakej:
  • Perpustakaan besar yang disediakan melalui CDN mungkin meningkatkan masa pemuatan penyemak imbas.
• Versi Konflik:
  • Jika berbilang versi pustaka anda mungkin dimuatkan serentak, ia boleh membawa kepada tingkah laku yang tidak dijangka.

---

Ringkasan Kes Penggunaan

Use Case	Ideal For	Example Usage
Browser Inclusion	Simplicity
Fast Delivery	High-traffic apps	Use of jsDelivr or Unpkg for caching
Avoiding Build Steps	Prototypes or small projects	UMD or IIFE pre-bundled files
Embedding in Static Sites	Blogs, lightweight sites	Markdown renderer, chart libraries
Demos and Sandboxes	Quick testing	Platforms like CodePen or JSFiddle
Sharing Across Frameworks	Multi-framework apps	Shared libraries or design systems

Penghosan CDN ialah pelengkap yang hebat kepada pengedaran npm, terutamanya untuk perpustakaan berfokuskan web. Jika anda mempunyai keperluan khusus, sila tanya!

Atas ialah kandungan terperinci Akses pakej tanpa Memasangnya.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!