Membuat perpustakaan dari komponen VUE dan menerbitkan ke NPM

Saya telah mengembangkan di Vue.js untuk waktu yang lama, tetapi saya tidak perlu mengemas komponen untuk publikasi. Baru-baru ini muncul ide untuk komponen yang menarik dan saya memutuskan untuk membagikannya dengan komunitas. Tetapi kenyataannya adalah bahwa saya tidak dapat menemukan panduan lengkap tentang topik ini di Internet Rusia. Oleh karena itu, setelah mempelajari masalah ini, saya memutuskan untuk membagikan solusi saya tentang topik ini.

Selain itu, saya memutuskan bahwa akan menyenangkan untuk melampirkan penerapan komponen demo ke halaman github, demi kenyamanan pengembang yang memutuskan untuk melihat cara kerja komponen ini.

Dokumentasi memiliki bagian yang menjelaskan proses penerbitan cli.vuejs.org/en/guide/deployment.html , tetapi tidak cocok untuk membangun perpustakaan + demo + npm

Instalasi dan pembuatan proyek

Kami akan menggunakan Vue CLI untuk membuat paket. Saya tidak akan menjelaskan ini secara rinci, saya hanya akan menambahkan tautan ke bagian dokumentasi:

• Instal sesuai dengan dokumentasi: cli.vuejs.org/ru/guide/installation.html
• Buat proyek: cli.vuejs.org/ru/guide/creating-a-project.html
• Instal paket untuk menyederhanakan penerapan ke github-pages:
  
  
  
  

  npm install gh-pages --save-dev

PENTING: Di bawah ini dalam contoh kode, nama komponen saya adalah vue-input-calculator , jangan lupa untuk mengubahnya.

Pengaturan proyek

package.json di sini kita perlu menambahkan / mengubah:

{ 
"name": "vue-input-calculator", 
"homepage": "https://lih1989.github.io/vue-input-calculator/", 
"main": "./lib/vue-input-calculator.common.js", 
"version": "0.1.0", 
"scripts": {
 "serve": "vue-cli-service serve --port 3000",
 "predeploy": "vue-cli-service build --mode demo", 
 "deploy": "gh-pages -d demo", 
 "build": "vue-cli-service build --target lib --name vue-input-calculator src/lib.js", 
 "lint": "vue-cli-service lint" 
}
…
}

vue.config.js dibuat dan diisi dengan parameter yang diperlukan.

module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
        ? '/'
        : '/vue-input-calculator/',
    outputDir: process.env.NODE_ENV === 'production'
        ? __dirname+'/lib'
        : __dirname+'/demo',
    css: {
        extract: false
    }
};

src / lib.js membuat titik build terpisah untuk perpustakaan kita

import VueInputCalculator from './components/VueInputCalculator'
export default VueInputCalculator

.gitignore - hapus folder demo dari repositori

/demo/
...

Buat akun di npmjs - www.npmjs.com/signup

Pengembangan dan publikasi

Kami melakukan secara berurutan:

0.  - npm run serve
1.    - npm run build
2.1.  - git commit - m "commit"
2.2.     - git push
3.    - npm run predeploy
4.   gh-pages - npm run deploy
5.    npmjs -  npm publish ( npm login)

Setelah penerapan pertama, cabang gh-pages akan dibuat - Anda perlu pergi ke pengaturan repositori dan menginstal cabang ini untuk menampilkan halaman github:

Kesimpulan

Itu saja, sekarang kami memiliki proyek open source yang dapat kami kembangkan dan tingkatkan.



Terima kasih telah membaca materi ini, tidak ideal dan tidak cocok untuk proyek besar dengan banyak komponen, tetapi akan memberikan pemahaman umum tentang cara kerja publikasi dan penerapan.

UPD. Saya tidak mencentang kotak Tutorial karena saya tidak yakin apakah keputusan yang saya buat benar dan semuanya dilakukan dengan benar. Saya akan sangat berterima kasih atas umpan balik dari rekan yang lebih berpengalaman.

Jika Anda belum "lepas landas", Anda menemukan ketidakkonsistenan atau memiliki saran untuk memperbaiki manual ini, tulis di komentar atau di pesan pribadi.



Kode lengkap dari contoh proyek



github.com/lih1989/vue-input-calculator



Bahan yang digunakan:

• Artikel yang menjelaskan pembuatan komponen library (eng) itnext.io/create-a-vue-js-component-library-as-a-module-part-1-a1116e632751
• Dokumentasi Vue CLI cli.vuejs.org/ru/guide