Πώς να δημιουργήσετε και να δημοσιεύσετε μια βιβλιοθήκη στοιχείων Vue

Οι βιβλιοθήκες των συστατικών είναι όλη η οργή αυτές τις μέρες. Διευκολύνουν τη διατήρηση μιας συνεπούς εμφάνισης και αίσθησης σε μια εφαρμογή.

Έχω χρησιμοποιήσει μια ποικιλία διαφορετικών βιβλιοθηκών στην καριέρα μου μέχρι στιγμής, αλλά η χρήση μιας βιβλιοθήκης είναι πολύ διαφορετική από το να γνωρίζω τι ακριβώς κάνει στη δημιουργία μιας.

Ήθελα μια πιο εις βάθος κατανόηση του τρόπου κατασκευής μιας βιβλιοθήκης στοιχείων και θέλω να σας δείξω πώς μπορείτε να κατανοήσετε καλύτερα.

Για να δημιουργήσουμε αυτήν τη βιβλιοθήκη στοιχείων, θα χρησιμοποιήσουμε το vue-sfc-rollupπακέτο npm. Αυτό το πακέτο είναι ένα πολύ χρήσιμο βοηθητικό πρόγραμμα κατά την εκκίνηση μιας βιβλιοθήκης στοιχείων.

Εάν διαθέτετε μια υπάρχουσα βιβλιοθήκη με την οποία θέλετε να χρησιμοποιήσετε το βοηθητικό πρόγραμμα, ανατρέξτε στην τεκμηρίωση που παρέχουν.

Αυτό το πακέτο δημιουργεί ένα σύνολο αρχείων για να ξεκινήσει το έργο. Όπως εξηγεί η τεκμηρίωσή τους, τα αρχεία που δημιουργεί περιλαμβάνουν τα ακόλουθα (SFC σημαίνει Single File Component):

  • μια ελάχιστη διαμόρφωση συνάθροισης
  • ένα αντίστοιχο αρχείο package.json με σενάρια build / dev και εξαρτήσεις
  • ένα ελάχιστο αρχείο babel.config.js και .browserslistrc για μεταφορά
  • ένα περιτύλιγμα που χρησιμοποιείται από τη συλλογή όταν συσκευάζετε το SFC σας
  • ένα δείγμα SFC για να ξεκινήσει η ανάπτυξη
  • ένα δείγμα αρχείου χρήσης που μπορεί να χρησιμοποιηθεί για τη φόρτωση / δοκιμή του στοιχείου / βιβλιοθήκης σας κατά τη διάρκεια της ανάπτυξης

Το βοηθητικό πρόγραμμα υποστηρίζει τόσο στοιχεία ενός αρχείου όσο και βιβλιοθήκη στοιχείων. Είναι σημαντικό να σημειώσετε αυτήν την πρόταση από την τεκμηρίωση:

Στη λειτουργία βιβλιοθήκης, υπάρχει επίσης ένα «ευρετήριο» που δηλώνει τα στοιχεία που εκτίθενται ως μέρος της βιβλιοθήκης σας.

Αυτό σημαίνει ότι δημιουργούνται κάποια επιπλέον αρχεία κατά τη διαδικασία εγκατάστασης.

Ωραία, ας φτιάξουμε τη βιβλιοθήκη

Πρώτα θα θελήσετε να εγκαταστήσετε vue-sfc-rollupπαγκοσμίως:

npm install -g vue-sfc-rollup

Μόλις εγκατασταθεί παγκοσμίως, από τη γραμμή εντολών, μεταβείτε στον κατάλογο όπου θέλετε να βρίσκεται το έργο της βιβλιοθήκης σας. Μόλις βρεθείτε σε αυτόν το φάκελο, εκτελέστε την ακόλουθη εντολή για να ξεκινήσετε το έργο.

sfc-init

Ορίστε τις ακόλουθες επιλογές εντός των προτροπών:

  • Είναι ένα μεμονωμένο στοιχείο ή βιβλιοθήκη; Βιβλιοθήκη
  • Ποιο είναι το όνομα npm της βιβλιοθήκης σας; (αυτό θα πρέπει να είναι μοναδικό στα npm. Χρησιμοποίησα το brian-component-lib )
  • Αυτή η βιβλιοθήκη θα γραφτεί σε JavaScript ή TypeScript; JavaScript (μη διστάσετε να χρησιμοποιήσετε το TypeScript εάν γνωρίζετε τι κάνετε)
  • Εισαγάγετε μια τοποθεσία για να αποθηκεύσετε τα αρχεία της βιβλιοθήκης: Αυτό είναι το όνομα του φακέλου που θέλετε να έχει η βιβλιοθήκη σας. Θα προεπιλογή στο όνομα npm που το δώσατε παραπάνω, ώστε να μπορείτε να πατήσετε enter.

Αφού ολοκληρωθεί η εγκατάσταση, μεταβείτε στο φάκελό σας και εκτελέστε μια εγκατάσταση npm.

cd path/to/my-component-or-lib npm install

Μόλις γίνει αυτό, μπορείτε να ανοίξετε το φάκελο στον επεξεργαστή της επιλογής σας.

Όπως αναφέρθηκε παραπάνω, υπάρχει ένα δείγμα συστατικού Vue που δημιουργήθηκε για εμάς. Μπορείτε να το βρείτε μέσα στο /src/lib-componentsφάκελο. Για να δείτε πώς φαίνεται αυτό το στοιχείο, μπορείτε να εκτελέσετε npm run serveκαι να πλοηγηθείτε στο // localhost: 8080 /

Τώρα ας προσθέσουμε το δικό μας προσαρμοσμένο στοιχείο. Δημιουργήστε ένα νέο αρχείο Vue μέσα στον lib-componentsφάκελο. Για αυτό το παράδειγμα, θα μιμηθώ το κουμπί που χρησιμοποιείται στις ενότητες ανάθεσης του FreeCodeCamp, οπότε θα το ονομάσωFccButton.vue

Μπορείτε να αντιγράψετε και να επικολλήσετε αυτόν τον κώδικα στο αρχείο σας:

 {{ text }}   export default { name: "FccButton", // vue component name props: { text: { type: String, default: "Enter Button Text Here" } }, data() {} };   .btn-cta { background-color: #d0d0d5; border-width: 3px; border-color: #1b1b32; border-radius: 0; border-style: solid; color: #1b1b32; display: block; margin-bottom: 0; font-weight: normal; text-align: center; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; white-space: nowrap; padding: 6px 12px; font-size: 18px; line-height: 1.42857143; } .btn-cta:active:hover, .btn-cta:focus, .btn-cta:hover { background-color: #1b1b32; border-width: 3px; border-color: #000; background-image: none; color: #f5f6f7; } 

Μπορείτε να δείτε ότι έχουμε τη βασική ενότητα προτύπων στην κορυφή με την τάξη που θέλουμε να έχει. Χρησιμοποιεί επίσης το κείμενο στο οποίο θα περάσει ο χρήστης.

Μέσα στην ετικέτα σεναρίου έχουμε το όνομα του στοιχείου και τα στηρίγματα που θα λάβει το στοιχείο. Σε αυτήν την περίπτωση υπάρχει μόνο ένα στήριγμα που ονομάζεται textπου έχει την προεπιλογή του "Run the Tests".

Έχουμε επίσης κάποιο στυλ για να του δώσουμε την εμφάνιση που θέλουμε να έχει.

Για να δούμε πώς φαίνεται το στοιχείο, θα πρέπει να το προσθέσουμε στο index.jsαρχείο που βρίσκεται στο lib-componentsφάκελο. Το αρχείο index.js θα πρέπει να έχει την εξής μορφή:

/* eslint-disable import/prefer-default-export */ export { default as FccButton } from './FccButton';

Θα πρέπει επίσης να εισαγάγετε το στοιχείο στο serve.vueαρχείο μέσα στον devφάκελο για να μοιάζει με αυτό:

 import Vue from "vue"; import { FccButton } from "@/entry"; export default Vue.extend({ name: "ServeDev", components: { FccButton } }); 

Ίσως χρειαστεί να τρέξετε npm run serveξανά για να μπορείτε να δείτε το κουμπί, αλλά θα πρέπει να είναι ορατό όταν μεταβαίνετε στο // localhost: 8080 / στο πρόγραμμα περιήγησής σας.

Έτσι, δημιουργήσαμε το στοιχείο που θέλαμε. Θα ακολουθήσετε την ίδια διαδικασία για οποιοδήποτε άλλο στοιχείο θέλετε να δημιουργήσετε. Απλώς βεβαιωθείτε ότι τα εξάγετε στο /lib-components/index.jsαρχείο για να τα διαθέσετε από το πακέτο npm που πρόκειται να δημοσιεύσουμε.

Δημοσίευση σε NPM

Τώρα που είμαστε έτοιμοι να δημοσιεύσουμε τη βιβλιοθήκη στο NPM, πρέπει να περάσουμε από τη διαδικασία κατασκευής για να συσκευαστεί και να είναι έτοιμη.

Προτού εκτελέσουμε την εντολή build, προτείνω να αλλάξουμε τον αριθμό έκδοσης στο package.jsonαρχείο, 0.0.1καθώς αυτό είναι το πρώτο συμβάν δημοσίευσης για τη βιβλιοθήκη μας. Θα θέλουμε περισσότερα από ένα συστατικά στη βιβλιοθήκη πριν κυκλοφορήσουμε την επίσημη «πρώτη» έκδοση. Μπορείτε να διαβάσετε περισσότερα για τη σημασιολογική έκδοση εδώ.

Για να το κάνουμε αυτό, τρέχουμε npm run build.

Όπως αναφέρει η τεκμηρίωση:

Τρέχοντας τα αποτελέσματα build script σε 3 μεταγλωττισμένα αρχεία στον distκατάλογο, μία για κάθε ένα από τα main, module, και unpkgτις ιδιότητες που αναφέρονται στο αρχείο package.json σας. Με τη δημιουργία αυτών των αρχείων, είστε έτοιμοι!

Με αυτήν την εντολή, είμαστε έτοιμοι να δημοσιεύσουμε στο NPM. Πριν το κάνουμε αυτό, βεβαιωθείτε ότι έχετε λογαριασμό στο NPM (τον οποίο μπορείτε να κάνετε εδώ αν χρειαστεί).

Next we'll need to add your account to your terminal by running:

npm adduser

Understanding package.json

When we publish to npm, we use the package.json file to control what files are published. If you look at the package.json file that was created when we initially set up the project you'll see something like this:

"main": "dist/brian-component-lib.ssr.js", "browser": "dist/brian-component-lib.esm.js", "module": "dist/brian-component-lib.esm.js", "unpkg": "dist/brian-component-lib.min.js", "files": [ "dist/*", "src/**/*.vue" ],

The section under files tells npm to publish everything in our dist folder as well as any .vue files inside of our src folder. You can update this as you see fit, but we'll be leaving it as is for this tutorial.

Because we aren't changing anything with the package.json file, we are ready to publish. To do that we just need to run the following command:

npm publish

And that is it! Congratulations! You've now published a Vue component library. You can go to npmjs.com and find it in the registry.