تعلم تعديل إعدادات بيئات Webpack ومشاكل الإصدار باستخدام vue-cli

Vue之所以现在如此之火爆，一部分也得益于有官方的脚手架生成工具Vue-cli，大大简化了初学者环境搭建的成本，但是实际业务中我们往往需要实现其他的功能来对webpack进行改造，本文将会根据一些实际的业务需求，先学习vue-cli生成的模板，然后在进行相关修改。

Vue-cli生成模板文件目录

├── README.md
├── build
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── index.html
├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── Hello.vue
│ └── main.js
└── static

النقطة التي نركز عليها في هذا المقال

build - كود مهام البناء

config - ملف إعدادات webpack

package.json - معلومات المشروع الأساسية

لن يتم تقديم تفاصيل كل سطر من إعدادات webpack هنا، يرجى الرجوع إلى ملف إعدادات webpack في الشبكة 2.0 من الأطراف الثالثة لتحليل

الحاجة الشائعة الأولى: تكوين البيئات المتعددة والنشر

النماذج التي يولدها Vue-cli، تم تكوينها فقط npm run dev، npm run build هذا السطر من التعليمات، للبدء في تشغيل بيئة التطوير، وإجراء الت打包. غالبًا ما يكون لدي الشركات العادية في عملية التطوير، على الأقل بيئة تطوير، و仿真 اختبار، وبيئة الإنتاج، وكل بيئة تتفاعل مع عنوان الخادم للطلب، أو بعض المعلمات الإضافية ستكون مختلفة، وسيتم نشرها في وقت الإصدار على خوادم متعددة، لذا سنحتاج إلى تنفيذ سكريptات تلقائية لإجراء بناء وإصدار

أولاً، يجب أن نفهم هذا السؤال، نقوم بنقل نص من مقال، كاتب: زهي هوب، رابط، مصدر: Zhihu

هذا الأمر ليس له علاقة بvue، إنه مشكلة عامة: أي حيث يتم بناء الكود. إذا كان الخادم الذي يشير إليه المستخدم يشير إلى خادم التشغيل، فإنه ليس خيارًا جيدًا. يعتقد العديد من المبتدئين بما في ذلكني قبل العمل أن عملية نشر الكود تبدو هكذا

لكن في الشركات الكبيرة على الإنترنت، فإن الأمور معقدة بعض الشيء. يتم تقديم هذه المعلومات كطرق شائعة، وتم تبسيط بعض العمليات، فقط من أجل تسهيل فهم المبتدئين. تأكد من إرسال الكود إلى خادم git أو svn، هنا هي ملفات المصدر، وليس ملفات البناء

2. سيتخذ الخادم المبنى من خادم git للحصول على إصدار الكود الذي سيتم نشره هنا، حيث يتم إكمال تثبيت الاعتمادات، مثل vue المطلوب من المستخدم. وسيتم بناء ملفات الاستployment، وغالبًا ما يتم ضغط هذه الملفات في ملف مضغوط لإدارة

3. بعد بناء الحزمة النهائية، سيتم تحميلها إلى محطة التحويل: مجموعة خادم إدارة الملفات

4. الخادم الذي يعمل بشكل فعلي لن يكون خادمًا واحدًا، بل سينتمي إلى مجموعة، حيث سيتخذ هذه الخوادم النسخة المماثلة من الملف الخاص بالمخدم من ملف المخدم ويقوم بإزالة الضغط وإجراء العمل النهائي

　

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

على سبيل المثال، إذا كنت تعمل مع gitlab أو github التي توفر webhook للإعلام التلقائي بإعداد منصات التوزيع، فإن الشيفرة النهائية للإصدار الثابت قد تم إرسالها (Push Event). في هذه الحالة، حتى لم نعد بحاجة إلى النقر على الزر. هذا هو حالة بناء وإصدار منفصل، مما يوفر العديد من الفوائد، مثل التأكد من أن البناء هو نفس الشيفرة، وعدم وجود إمكانية بناء بيئات متعددة غير متطابقة. عمومًا، بناء عادة هو عملية مكلفة، قد تؤدي إلى عدم استقرار الخادم. يمكن التراجع بسرعة أو العودة إلى النسخة السابقة، وليس من الضروري إعادة بناء نفس النسخة من الشيفرة.

بعد كل هذا الكلام، إن بناء الحزم ليس بعمل بسيط، لذا نحتاج إلى أدوات تحسينية للإعداد، والخطة النموذجية هي استخدام Docker لإنشاء محرك تطبيق يحتوي على تطبيق ويقوم بالإصدار وغيرها.

النهاية

ما ذكرته أعلاه هو ما قدمه المحرر لكم حول إعدادات البيئات المتعددة لWebpack وكيفية الإصدار، آمل أن يكون هذا مفيدًا لكم. إذا كان لديكم أي أسئلة، فمن فضلكم ترك تعليق، وسأقوم بالرد بسرعة. شكرًا جزيلاً أيضًا لدعمكم لتعليم呐喊!

البيان: محتوى هذا المقال تم جمعه من الإنترنت، وملك حقوق الطبع والتأليف ينتمي إلى المالك الأصلي، والمحتوى تم تقديمه من قبل مستخدمي الإنترنت بطرق متفرقة، وال موقع لا يمتلك حقوق الملكية، ولا يتم تعديل المحتوى بشكل إنساني، ولا يتحمل أي مسؤولية قانونية متعلقة بذلك. إذا رأيت محتوى يشتبه في انتهاك حقوق النسخ، فمن فضلك أرسل بريدًا إلكترونيًا إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال #بـ @) لتقديم الشكوى، وتقديم الدليل، وسيتم حذف المحتوى المشتبه فيه بشكل فوري إذا تم التحقق من صحة الشكوى.