ثريد front end
تجربتي في إستخدام أداه البناء webpack
في مشاريع الويب
و لماذا قررت الانتقال إلى إستخدام vite
🧵👇🏻
تجربتي في إستخدام أداه البناء webpack
في مشاريع الويب
و لماذا قررت الانتقال إلى إستخدام vite
🧵👇🏻
في ثريد سابق تعرفنا على ماهي اداوت البناء
رابط الثريد
👇🏻
رابط الثريد
👇🏻
✳ ماهي المشاكل التي واجهتها
أثناء إستخدام webpack ؟
1 - ضبط و تجهيز الإضافات plugins
و loaders أمر متعب
و يجب التركيز في ترتيب إستخدام loaders.
مثلا إذا أردت إستخدام sass في المشروع
تحتاج إلى أضافه sass-loader
مع مراعاة ترتيب loader
👇🏻
أثناء إستخدام webpack ؟
1 - ضبط و تجهيز الإضافات plugins
و loaders أمر متعب
و يجب التركيز في ترتيب إستخدام loaders.
مثلا إذا أردت إستخدام sass في المشروع
تحتاج إلى أضافه sass-loader
مع مراعاة ترتيب loader
👇🏻
2 - تحتاج إلى تثبيت الأدوات الاساسيه بشكل يدوي
مثلا تحتاج إلى تثبيت
webpack-server
من أجل عمل سيرفر محلي
و تثبيت file-loader إذا أردت التعامل مع الصور 😅
3 - رسائل الخطأ غير واضحة و يجب البحث في جوجل من أجل فهم الخطأ 😓
👇🏻
مثلا تحتاج إلى تثبيت
webpack-server
من أجل عمل سيرفر محلي
و تثبيت file-loader إذا أردت التعامل مع الصور 😅
3 - رسائل الخطأ غير واضحة و يجب البحث في جوجل من أجل فهم الخطأ 😓
👇🏻
بدل من التركيز في بناء المشروع احتجت إلى التركيز في كيفية إعداد webpack بطريقة صحيحة و حل كل تلك المشاكل 😓
أداه webpack ليست سيئه و تستخدم في مشاريع كبيرة
مثل
create-react-app
Vue cil
لكن التعامل معها في البدايه صعب
👇🏻
مثل
create-react-app
Vue cil
لكن التعامل معها في البدايه صعب
👇🏻
✳ ماهي vite ؟
كلمه vite كلمه فرنسية و تعني سريع
توفر vite الكثير من المميزات التي تلبي احتياجات المطورين
مثل
✴ سيرفر محلي
✴ تدعم استخدام sass , css , typescript
بدون الحاجه إلى أضافه إعدادات مخصصة
✴ سريعه جدا أثناء عملية التطوير
كلمه vite كلمه فرنسية و تعني سريع
توفر vite الكثير من المميزات التي تلبي احتياجات المطورين
مثل
✴ سيرفر محلي
✴ تدعم استخدام sass , css , typescript
بدون الحاجه إلى أضافه إعدادات مخصصة
✴ سريعه جدا أثناء عملية التطوير
✴ سهله جدا في الإستخدام
✴ يمكنك إستخدامها في عمل تطبيقات
React
Vue
Svelte
Html css and javascript
✴ يتم ضغط ملفات
Css and Javascript
بشكل تلقائي بدون الحاجة إلى أضافه أي plugin
👇🏻
✴ يمكنك إستخدامها في عمل تطبيقات
React
Vue
Svelte
Html css and javascript
✴ يتم ضغط ملفات
Css and Javascript
بشكل تلقائي بدون الحاجة إلى أضافه أي plugin
👇🏻
تدعم vite مشاريع
vanilla javascript
vanilla-ts
vue
vue-ts
react
react-ts
preact
preact-ts
lit-element
lit-element-ts
svelte
svelte-ts
👇🏻
vanilla javascript
vanilla-ts
vue
vue-ts
react
react-ts
preact
preact-ts
lit-element
lit-element-ts
svelte
svelte-ts
👇🏻
✳ مقارنه بين إستخدام webpack و إستخدام vite
لنفترض اننا نحتاج إلى إستخدام sass
✴ webpack
تحتاج إلى أضافه sass و sass-loader
بالإضافه إلى تعديل ملف الإعدادات و التركيز في ترتيب ال loaders أثناء أضافه sass-loader 😓
👇🏻
لنفترض اننا نحتاج إلى إستخدام sass
✴ webpack
تحتاج إلى أضافه sass و sass-loader
بالإضافه إلى تعديل ملف الإعدادات و التركيز في ترتيب ال loaders أثناء أضافه sass-loader 😓
👇🏻
✴ vite
تحتاج إلى شيء وأحد فقط 😉
أضافه sass 😂😂
لا تحتاج إلى تعديل أي إعدادات
لا تحتاج إلى تثبيت المزيد من plugins
👇🏻
تحتاج إلى شيء وأحد فقط 😉
أضافه sass 😂😂
لا تحتاج إلى تعديل أي إعدادات
لا تحتاج إلى تثبيت المزيد من plugins
👇🏻
نلتقي في ثريد أخر 😇
إذا أعجبك الثريد لا تنسى تعمل
ريتويت عشان
يستفيد اكبر عدد من الناس 😊
تابع حسابي @naif4web
لجديد المقالات و النصائح
في مجال البرمجة و تصميم الواجهات Ui
إذا أعجبك الثريد لا تنسى تعمل
ريتويت عشان
يستفيد اكبر عدد من الناس 😊
تابع حسابي @naif4web
لجديد المقالات و النصائح
في مجال البرمجة و تصميم الواجهات Ui
جاري تحميل الاقتراحات...