webpack frames

شارة

• التحقق من && التنسيق
• webpack1-ie8
• webpack3-react
• webpack3-vue
• webpack4-react
• webpack4-vue

تحديث التعليمات

1. المجلدات الموجودة في webpack4-vue و webpack3-vue هي نفسها تمامًا، يرجى نسخها بنفسك إذا لزم الأمر.
2. المجلدات المضمنة في webpack4-react و webpack3-react هي نفسها تمامًا، يرجى نسخها بنفسك إذا لزم الأمر.
3. الفرق بين webpack 2 و 3 صغير جدًا، في الأساس، لا توجد مشكلة في استبدال 2 بـ 3. تمت مناقشة الإصدارات 1/3/4 فقط هنا، وهي وثيقة الترحيل الرسمية.
4. تمت إعادة تحميل بيئة التطوير بشكل سريع. إذا كنت تريد أن تكون بيئة التطوير متوافقة مع الإصدار 11 أو أقل، فيرجى مسح إعادة التحميل السريع.
   • قم بإزالة react-hot-loader/babel من ملف plugins .babelrc
   • قم بإزالة react-hot-loader من devDependencies في package.json
   • يجب أن يكون devServer.inline في config/opt.dev.js خطأ (يحتاج vue فقط إلى تعديل هذه النقطة)
   • قم بإزالة react-hot-loader من الكود
5. تدعم بيئة التطوير بالفعل mock api للواجهة الأمامية، والتي ستقوم تلقائيًا بقراءة الملفات ضمن src/mock وإجراء التحديثات الساخنة. منطق الكود موجود في config/mock.js ، والذي يحتوي على example .
6. يجب أن تكون إصدارات vue و vue-template-compiler متسقة تمامًا، وإلا فستكون هناك أخطاء غير متوقعة.
7. تم توحيد تكوينات webapck134,react,vue في دليل config ، وتحتاج المشاريع المختلفة فقط إلى تغيير opt.self.js
8. هناك إغفالات في الوصف readme ، يرجى الانتقال إلى الملف لقراءة تعليقات التعليمات البرمجية. النقطة الأساسية هي أن الملفات الموجودة في دليل config تحتوي على تعليقات وعناوين مستندات مرجعية رسمية.
9. تُستخدم devDependencies لوضع تبعيات الإصدار المقفل، dependencies هي أحدث التبعيات، نظرًا لأنها لا تحتاج إلى النشر في npm، فإن هذا التصنيف أكثر تعسفًا بل وخاطئًا بايدو للحصول على تفاصيل محددة
10. نظرًا لأن DllPlugin و CommonsChunkPlugin或splitChunks لهما وظائف مكررة، ويحتاج الأول إلى تنفيذ أمر webpack مسبقًا، فيمكن استبداله ببساطة بعناصر externals . يحتوي الأخير على مساحة كبيرة قابلة للتشغيل ويمكن تفريغه بحرية لجعل حجم الملف أكثر اتساقًا ، لن يتم استخدام DllPlugin التالي

التحضير البيئي

1. قم بتعيين npm config set registry https://registry.npm.taobao.org
2. قم بتشغيل npm i -g npminstall كمسؤول
3. أدخل الدليل الحالي باستخدام سطر الأوامر وقم بتشغيل npminstall -c
4. في حالة حدوث خطأ، الحلول الشائعة هي كما يلي:
   • قم بتشغيل npm cache clean -f و npm cache verify -f كمسؤول
   • حذف دليل node_modules
   • أعد تشغيل npminstall -c
   • وأخيرًا، قم بالتغيير إلى شبكة أفضل وقم بترقية node و npm
5. ملاحظات حول الاستخدام:
   • npminstall -c و npm install غير متوافقين، الأول أسرع بكثير من الأخير، لكن لا يمكن استخدامهما معًا.
   • يتطلب التبديل للاستخدام حذف مجلد node_modules
   • إذا كانت هناك مشكلة في node-v12.0.0 ، فيرجى عدم ترقيتها بعد. لا توجد مشكلة في الإصدار الأحدث من node-v12 .
   • في بعض الأحيان، تحدث أخطاء في التغليف أو أخطاء في الترميز لا يمكن تفسيرها. احذف node_modules وحاول مرة أخرى.

بدء تشغيل بيئة التطوير

1. npm start
   • الرجاء استخدامه عندما تحتاج إلى دعم أي
   • npm run env -- FOR_IE=1 npm start
2. افتح http://localhost:8888 في المتصفح

نشر بيئة الإنتاج

1. npm run app
   • الرجاء استخدامه عندما تحتاج إلى دعم أي
   • npm run env -- FOR_IE=1 npm run app
2. ما عليك سوى نسخ محتويات مجلد dist إلى الخادم

إضافة ميزات أخرى

1. npm run report لعرض تكوين حزمة حزمة الإنتاج
   • الرجاء استخدامه عندما تحتاج إلى دعم أي
   • npm run env -- FOR_IE=1 npm run report
2. يضيف npm run debug بدء تشغيل تصحيح أخطاء نقطة التوقف، المنفذ 7777
   • الرجاء استخدامه عندما تحتاج إلى دعم أي
   • npm run env -- FOR_IE=1 npm run debug

تحديث package.json

• قم npm i -g npm-check-updates
• قم بتنفيذ ncu (عرض) ncu -u (تحديث) في دليل package.json

استخدم إعادة التحميل السريع للودر التفاعلي

الوثائق الرسمية

1. أضف react-hot-loader إلى devDependencies في package.json
2. يجب أن يكون devServer.inline الخاص بـ webpack.cfg.dev.js true
3. قم بإضافة react-hot-loader/babel إلى plugins لـ .babelrc
4. أضف --hot إلى أمر بدء التشغيل، ولا تستخدم HotModuleReplacementPlugin في نفس الوقت
5. تم تعديل مكون جذر export وإدخال react-hot-loader قبل react

 import { hot } from 'react-hot-loader' ;
export default hot ( module ) ( App ) ;

ملاحظة: الإصدار 4.3.12 فقط يدعم ie8+react@0 ويتطلب تغييرًا بسيطًا، والذي تم إكماله في البرنامج النصي

معالجة الصور

• صورة عادية => https://tinypng.com图片压缩=> url-loader (أقل من 4 كيلو بايت)
• صورة svg => https://github.com/svg/svgo svg压缩=> svg-url-loader

 // 建议4kb以下使用,较大文件建议用file-loader
const src = require ( "!svg-url-loader?noquotes!./x.svg" ) ;

webpack 3 4 يدعم بحث IE8

1. لم يتم تحويل التعليمات البرمجية التي تم حزمها بواسطة DllPlugin ومن المرجح أن تكون بها مشكلات عدم توافق، لذلك لا يمكن تحسين سرعة التعبئة بشكل كبير.
2. مبدأ إعادة التحميل السريع هو Object.defineProperty، وهو غير مدعوم بواسطة ie8
3. غير قادر على استخدام أحدث رد فعل/antd، رد فعل @0.x/[email protected] يدعم فقط ie8؛ ولا يدعم vue ie8 مباشرة
4. في هذه المرحلة، لم يتم دعم جميع مزايا webpack 3 4 تقريبًا في الوقت الحالي، كما أن توافق الإصدار عبر الإنترنت ليس جيدًا جدًا.
5. إذا كنت تريد حقًا استخدام webpack 3 4 لتكون متوافقة مع ie8، فقد تم توفير ما يلي كمرجع، ولكن لم يتم اختباره (من المفترض أن تكون جميعها بها مشكلات)
   • https://github.com/ediblecode/webpack4-ie8
   • https://github.com/natural-fe/natural-cli/blob/master/ie8-mvvm.md

مرجع مواصفات الكود

• http://eslint.cn/docs/rules eslint规则文档
• https://github.com/yuche/javascript js规范中文版
• https://github.com/airbnb/javascript js规范es5,es6,react
• https://github.com/JasonBoy/javascript/tree/master/react react规范中文版
• https://github.com/sivan/javascript-style-guide/tree/master/es5 es5规范中文版
• تكوينات esling شائعة الاستخدام eslint-config-egg eslint-config-react-app eslint-config-ali

عادات البرمجة الشخصية (تختلف من شخص لآخر، اختر ما تراه مناسبًا، للإشارة فقط)

حول ترك سطر فارغ في نهاية الملف

• يتبع الأفراد عاداتهم، ويتم توحيد تطوير الفريق من خلال eslint --fix

حول المسافة البادئة للكود

• يتبع الأفراد عاداتهم، ويتم توحيد تطوير الفريق من خلال eslint --fix
• هناك جدل لا نهاية له بين علامات التبويب والمسافات: إذا كنت لا تتبع محاذاة فواصل أسطر attr في html ومحاذاة النقطتين في CSS، فلا حرج في علامات التبويب؛ إذا كنت تريد متابعة المحاذاة، فمن الأفضل استخدام المسافات.

حول علامات الاقتباس

• يقوم Js بتوحيد علامات الاقتباس المزدوجة، ويتم توحيد علامات الاقتباس المزدوجة داخل السلسلة " ، وعلامات الاقتباس المفردة x27 ، وعلامات الاقتباس المزدوجة x22 ، بحيث يتم توحيد علامات الاقتباس المزدوجة
• يعمل CSS على توحيد علامات الاقتباس المزدوجة، ويجب تجاوز محتوى المحتوى لمنع الأحرف المشوهة.
• css/less/scss، يمكن استخدام علامات الاقتباس المزدوجة بدلاً من علامات الاقتباس المفردة في كثير من الحالات، وفي بعض الحالات يمكن أن تسبب علامات الاقتباس المفردة مشاكل عند التجميع، بالإضافة إلى ذلك، تستخدم علامات html أيضًا علامات الاقتباس المزدوجة، والتي تصادف أنها موحدة.

سواء لإضافة فاصلة

• إذا لم تكن هناك أخطاء في بناء الجملة، فقم بإضافتها، فسيكون هناك تغييرات أقل.

ما إذا كان سيتم إضافة فاصلة منقوطة

• إذا لم تكن هناك أخطاء في بناء الجملة، فقم بإضافتها، فسيكون هناك تغييرات أقل.

حول تعريف المتغيرات

• إذا تم تعريفه بشكل منفصل، متغير واحد لكل سطر، فسيتم إعطاء الأولوية لـ const، ويتم استخدام Let بدلاً من var.
• إذا كان ذلك ممكنًا، استخدم تدمير الكائنات أو المصفوفات للمهام.

حول أمر الاستيراد

• الأولوية القصوى هي تقديم polyfill، متبوعًا بـ React/Vue
• ثانيًا، في دليل الوحدة النمطية (node_modules)، يتم فرز عمق مسار الوحدة أولاً، ويتم تصنيف الترتيب وفرزه وفقًا لـ (مكون>وظيفة>ثابت)
• ومن ثم يتم تحميله عبر وسائط اللودر مثل: Promise-loader
• ثم هناك دليل التطوير (dev_dir) الذي تم تصنيفه وفرزه حسب (component>function>constant)
• تقديم ملفات الأنماط وتصنيفها وفرزها وفقًا لـ (node_modules>dev_dir)
• استيراد ملفات الصور وتصنيفها وفرزها حسب (node_modules>dev_dir)