دقيقتان مع Webpack تهتز الأشجار وإعادة التصدير

دخول

دعني أبدأ. كان لدينا واجهة متجانسة مع تراث كبير. الخدمات تعيش في نفس الملفات مع المكونات. تم خلط كل شيء مع الشعار على الواجهة: "دع كل شيء في متناول اليد - من الأسهل العثور على ما تحتاج إليه". ولا يهم أن يكون طول الملف 200+ أو 300+ أو 500+ أو أكثر من سطور التعليمات البرمجية.

هدف

اجعل كل شيء أكثر قابلية للقراءة ، وأصغر وأسرع.

تطبيق

فصل كل ما هو ممكن في الملفات والرصاصة الذهبية هنا هو مبدأ المسؤولية وحدها. إذا كان لدينا مكون ووظائف خالصة داخل ملف ، فسوف نفصل بينهما.

مع ظهور ES6 + ، أصبح من الممكن استخدام الاستيراد ... من بناء الجملة - هذه ميزة رائعة ، لأنه يمكننا أيضًا استخدام التصدير ... من .

إعادة بيع ديون

تخيل ملف بهذه البنية:

// ,  ,       function multiply (a, b) { return a * b; } function sum (a, b) { return a + b; } function calculateSomethingSpecial(data) { return data.map( dataItem => sum(dataItem.param1, dataItem.param2) ); } 

يمكننا تقسيم هذا الرمز إلى ملفات بهذه الطريقة:

هيكل:

 utils multiply.js sum.js calculateSomethingSpecial.js 

والملفات:

 // multiply.js export default function multiply (a, b) { return a * b; } or const multiply (a, b) => a * b; //    –     . 

 // sum.js export default function sum (a, b) { return a + b; } 

 // calculateSomethingSpecial.js import sum from "./sum"; export default function calculateSomethingSpecial(data) { return data.map( dataItem => sum(dataItem.param1, dataItem.param2)); } 

الآن يمكننا استيراد الوظائف بشكل فردي. ولكن مع وجود خطوط إضافية وهذه الأسماء الطويلة في الواردات ، فإنها لا تزال تبدو فظيعة.

 // App.js import multiply from '../utils/multiply'; import sum from '../utils/sum'; import calculateSomethingSpecial from '../utils/calculateSomethingSpecial'; ... 

ولكن لهذا ، لدينا ميزة رائعة ظهرت مع ظهور بناء جملة JS الجديد ، والذي يسمى re-export (re-export). في المجلد ، نحتاج إلى إنشاء ملف index.js من أجل الجمع بين جميع وظائفنا. والآن يمكننا إعادة كتابة الكود الخاص بنا بهذه الطريقة:

 // utils/index.js export { default as sum } from './sum'; export { default as multiply } from './multiply'; export { default as calculateSomethingSpecial } from './calculateSomethingSpecial'; 

podshamanim App.js قليلاً:

 // App.js import { multiply, sum, calculateSomethingSpecial } from '../utils'; 

القيام به.

الاختبار.

الآن دعونا نتحقق من كيفية بناء مجموعات Webpack الخاصة بنا للإنتاج. لنقم بإنشاء تطبيق React صغير لاختبار كيفية عمله. سوف نتحقق مما إذا كنا نقوم بتنزيل ما نحتاج إليه فقط ، أو كل ما هو مشار إليه في index.js من مجلد الأدوات .

 //  App.js import React from "react"; import ReactDOM from "react-dom"; import { sum } from "./utils"; import "./styles.css"; function App() { return ( <div className="App"> <h1>Re-export example</h1> <p>{sum(5, 10)}</p> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); 

ملحق:

إصدار إنتاج التطبيق:

 //   main.js   (window.webpackJsonp = window.webpackJsonp || []).push([[0], { 10: function(e, n, t) { "use strict"; tr(n); //    **sum**   var r = t(0) , a = tn(r) , c = t(2) , o = tn(c); function l(e, n) { return e + n } t(9); var u = document.getElementById("root"); oarender(aacreateElement(function() { return aacreateElement("div", { className: "App" }, aacreateElement("h1", null, "Re-export example"), aacreateElement("p", null, l(5, 10))) }, null), u) }, 3: function(e, n, t) { e.exports = t(10) }, 9: function(e, n, t) {} }, [[3, 1, 2]]]); //# sourceMappingURL=main.e2563e9c.chunk.js.map 

كما ترون أعلاه ، قمنا فقط بتحميل الدالة sum من الأدوات المساعدة .
دعنا نتحقق مرة أخرى ، وهذه المرة سنستخدم الضرب .

ملحق:

إصدار إنتاج التطبيق:

 //   main.js   (window.webpackJsonp = window.webpackJsonp || []).push([[0], { 10: function(e, n, t) { "use strict"; tr(n); var a = t(0) , r = tn(a) , c = t(2) , l = tn(c); t(9); var o = document.getElementById("root"); larender(racreateElement(function() { return racreateElement("div", { className: "App" //        React      }, racreateElement("h1", null, "Re-export example"), racreateElement("p", null, 50)) }, null), o) }, 3: function(e, n, t) { e.exports = t(10) }, 9: function(e, n, t) {} }, [[3, 1, 2]]]); //# sourceMappingURL=main.5db15096.chunk.js.map 

هنا لا نرى حتى الوظائف الموجودة داخل الكود ، لأن Webpack جمعت قيمتنا حتى قبل النشر.

الاختبار النهائي

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

 //  App.js import React from "react"; import ReactDOM from "react-dom"; import { multiply, sum, calculateSomethingSpecial } from "./utils"; import "./styles.css"; function App() { const specialData = [ { param1: 100, param2: 99 }, { param1: 2, param2: 31 } ]; const special = calculateSomethingSpecial(specialData); return ( <div className="App"> <h1>Re-export example</h1> <p>Special: </p> <div> {special.map((specialItem, index) => ( <div key={index}> Result #{index} {specialItem} </div> ))} </div> <p>{multiply(5, 10)}</p> <p>{sum(5, 10)}</p> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); 

ملحق:

إصدار إنتاج التطبيق:

 //   main.js   (window.webpackJsonp = window.webpackJsonp || []).push([[0], { 10: function(e, n, a) { "use strict"; ar(n); var t = a(0) , r = an(t) , l = a(2) , p = an(l); //    **sum** function c(e, n) { return e + n } a(9); var u = document.getElementById("root"); parender(racreateElement(function() { var e = [{ param1: 100, param2: 99 }, { param1: 2, param2: 31 //      **calculateSomethingSpecial** }].map(function(e) { //    **sum**   return c(e.param1, e.param2) }); return racreateElement("div", { className: "App" }, racreateElement("h1", null, "Re-export example"), racreateElement("p", null, "Special: "), racreateElement("div", null, e.map(function(e, n) { return racreateElement("div", { key: n }, "Result #", n, " ", e) //     **multiply** })), racreateElement("p", null, 50), //     **sum**   racreateElement("p", null, c(5, 10))) }, null), u) }, 3: function(e, n, a) { e.exports = a(10) }, 9: function(e, n, a) {} }, [[3, 1, 2]]]); vie 

! ممتاز كل شيء يعمل كما هو متوقع. يمكنك تجربة أي خطوة بمجرد استخدام الرابط إلى codesandbox ، ويمكنك دائمًا النشر مباشرة للتسجيل من هناك.

استنتاج

استخدم فصل الكود إلى أجزاء أصغر ، حاول التخلص من الملفات والوظائف والمكونات المعقدة للغاية. سوف تساعد كلاً من المستقبل بنفسك وفريقك. الملفات الأصغر هي أسرع في القراءة ، وأسهل للفهم ، وأسهل للصيانة ، وأسرع في التجميع ، وأسهل للتخزين المؤقت ، وأسرع للتنزيل ، إلخ

شكرا للقراءة! رمز نظيفة وإعادة بيعها فاتنة!