إنشاء مكتبة من مكون VUE والنشر إلى NPM

لقد قمت بالتطوير في Vue.js لفترة طويلة ، لكن لم يكن علي حزم المكونات للنشر. ظهرت مؤخرًا فكرة عنصر مثير للاهتمام وقررت مشاركتها مع المجتمع. لكن الحقيقة هي أنني لم أتمكن من العثور على دليل شامل حول هذا الموضوع في الإنترنت الروسي. لذلك ، بعد دراسة المشكلة ، قررت مشاركة الحل الخاص بي حول هذا الموضوع.

أيضًا ، قررت أنه سيكون من الجيد إرفاق نشر المكون التجريبي بصفحات جيثب ، من أجل راحة المطورين الذين يقررون معرفة كيفية عمل هذا المكون.

تحتوي الوثائق على قسم يصف عملية النشر cli.vuejs.org/en/guide/deployment.html ، لكنها غير مناسبة لبناء مكتبة + عرض + npm

التثبيت وإنشاء المشروع

سنستخدم Vue CLI لإنشاء الحزمة. لن أصف هذا بالتفصيل ، سأضيف فقط روابط لأقسام الوثائق:

• قم بالتثبيت وفقًا للوثائق: cli.vuejs.org/ru/guide/installation.html
• أنشئ مشروعًا: cli.vuejs.org/ru/guide/creating-a-project.html
• قم بتثبيت الحزمة لتبسيط النشر على صفحات جيثب:
  
  
  
  

  npm install gh-pages --save-dev

هام: أدناه في أمثلة الكود ، اسم المكون الخاص بي هو vue-input-calculator ، ولا تنسَ التغيير.

إعدادات المشروع

package.json هنا نحتاج إلى إضافة / تغيير:

{ 
"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 وتعبئته بالمعلمات الضرورية.

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 بإنشاء نقطة بناء منفصلة لمكتبتنا

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

.gitignore - قم بإزالة المجلد التجريبي من المستودع

/demo/
...

قم بإنشاء حساب على npmjs - www.npmjs.com/signup

التطوير والنشر

ننفذ بالترتيب:

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)

بعد النشر الأول ، سيتم إنشاء فرع gh-pages - تحتاج إلى الانتقال إلى إعدادات المستودع وتثبيت هذا الفرع لعرض صفحات github:

خاتمة

هذا كل شيء ، الآن لدينا مشروع مفتوح المصدر يمكننا تطويره وتحسينه.



شكرًا لك على قراءة هذه المادة ، فهي ليست مثالية وغير مناسبة للمشاريع الكبيرة التي تحتوي على العديد من المكونات ، ولكنها ستوفر فهمًا عامًا لكيفية عمل النشر والنشر.

محدث. لم أقم بتحديد مربع البرنامج التعليمي لأنني لست متأكدًا مما إذا كان القرار الذي اتخذته صحيحًا وتم تنفيذ كل شيء بشكل صحيح. سأكون ممتنًا جدًا لتعليقات الزملاء الأكثر خبرة.

إذا لم "تقلع" ، فقد وجدت تناقضات أو لديك اقتراحات لتحسين هذا الدليل ، اكتب التعليقات أو في الرسائل الخاصة.



الكود الكامل لمشروع المثال



github.com/lih1989/vue-input-calculator



المواد المستخدمة:

• مقال يصف إنشاء مكون مكتبة (eng) itnext.io/create-a-vue-js-component-library-as-a-module-part-1-a1116e632751
• وثائق Vue CLI cli.vuejs.org/ru/guide