DOMPurify
DOMPurify 3.2.1
DOMPurify هو مطهر XSS خاص بـ DOM فقط، وسريع للغاية، ومتسامح للغاية مع HTML وMathML وSVG.
كما أنه سهل الاستخدام للغاية والبدء به. تم إطلاق DOMPurify في فبراير 2014، وفي الوقت نفسه، وصل إلى الإصدار v3.2.1 .
تم كتابة DOMPurify بلغة JavaScript ويعمل في جميع المتصفحات الحديثة (Safari (10+) وOpera (15+) وEdge وFirefox وChrome - بالإضافة إلى أي شيء آخر تقريبًا يستخدم Blink أو Gecko أو WebKit). ولا ينقطع عن MSIE أو المتصفحات القديمة الأخرى. إنه ببساطة لا يفعل شيئًا.
لاحظ أن DOMPurify v2.5.7 هو أحدث إصدار يدعم MSIE. للحصول على تحديثات أمنية مهمة متوافقة مع MSIE، يرجى استخدام الفرع 2.x.
تغطي اختباراتنا الآلية 24 متصفحًا مختلفًا في الوقت الحالي، والمزيد في المستقبل. نغطي أيضًا Node.js v16.x، وv17.x، وv18.x، وv19.x، ونقوم بتشغيل DOMPurify على jsdom. ومن المعروف أن الإصدارات الأقدم من Node تعمل أيضًا، ولكن مهلا... لا توجد ضمانات.
تمت كتابة DOMPurify بواسطة أشخاص متخصصين في مجال الأمن لديهم خلفية واسعة في هجمات الويب وXSS. لا تخف. لمزيد من التفاصيل، يرجى أيضًا قراءة أهدافنا الأمنية ونموذج التهديدات. من فضلك، اقرأها. مثل، حقا.
يقوم DOMPurify بتعقيم HTML ويمنع هجمات XSS. يمكنك تغذية DOMPurify بسلسلة مليئة بـ HTML القذر وسيُرجع سلسلة (ما لم يتم تكوينها بخلاف ذلك) باستخدام HTML نظيف. سوف يقوم DOMPurify بإزالة كل ما يحتوي على HTML خطير وبالتالي منع هجمات XSS وغيرها من الأشياء السيئة. إنها أيضًا سريعة جدًا. نحن نستخدم التقنيات التي يوفرها المتصفح ونحولها إلى مرشح XSS. كلما كان متصفحك أسرع، أصبح DOMPurify أسرع.
إنه سهل. ما عليك سوى تضمين DOMPurify على موقع الويب الخاص بك.
<script type="text/javascript" src="src/purify.js"></script>
<script type="text/javascript" src="dist/purify.min.js"></script>
بعد ذلك يمكنك تعقيم السلاسل عن طريق تنفيذ الكود التالي:
const clean = DOMPurify.sanitize(dirty);
أو ربما هذا، إذا كنت تحب العمل مع Angular أو ما شابه:
import DOMPurify from 'dompurify';const clean = DOMPurify.sanitize('<b>مرحبًا هناك</b>'); يمكن كتابة HTML الناتج في عنصر DOM باستخدام innerHTML أو DOM باستخدام document.write() . هذا الأمر متروك لك تمامًا. لاحظ أننا نسمح افتراضيًا باستخدام HTML وSVG و MathML. إذا كنت تحتاج فقط إلى HTML، وهو ما قد يكون حالة استخدام شائعة جدًا، فيمكنك إعداد ذلك بسهولة أيضًا:
const clean = DOMPurify.sanitize(dirty, { USE_PROFILES: { html: true } });حسنًا، يرجى ملاحظة أنه إذا قمت بتطهير HTML أولاً ثم قمت بتعديله بعد ذلك ، فقد تبطل بسهولة تأثيرات التطهير . إذا قمت بتغذية الترميز المعقم إلى مكتبة أخرى بعد التطهير، فيرجى التأكد من أن المكتبة لا تعبث بـ HTML بمفردها.
بعد تنظيف العلامات، يمكنك أيضًا إلقاء نظرة على الخاصية DOMPurify.removed ومعرفة العناصر والسمات التي تم التخلص منها. الرجاء عدم استخدام هذه الخاصية لاتخاذ أي قرارات أمنية حاسمة. هذا مجرد مساعد صغير للعقول الفضولية.
يعمل DOMPurify تقنيًا أيضًا من جانب الخادم مع Node.js. يسعى فريق الدعم لدينا إلى متابعة دورة إصدار Node.js.
يتطلب تشغيل DOMPurify على الخادم وجود DOM، وهذا على الأرجح ليس مفاجئًا. عادةً ما تكون jsdom هي الأداة المفضلة ونوصي بشدة باستخدام أحدث إصدار من jsdom .
لماذا؟ لأنه من المعروف أن الإصدارات الأقدم من jsdom بها أخطاء تؤدي إلى XSS حتى لو كان DOMPurify يفعل كل شيء بشكل صحيح بنسبة 100٪. هناك نواقل هجوم معروفة في، على سبيل المثال، jsdom v19.0.0 تم إصلاحها في jsdom v20.0.0 - ونحن نوصي حقًا بإبقاء jsdom محدثًا بسبب ذلك.
يرجى أيضًا العلم بأن أدوات مثل Happy-dom موجودة ولكنها لا تعتبر آمنة في هذه المرحلة. لا يُنصح حاليًا بالدمج بين DOMPurify و happy-dom ومن المحتمل أن يؤدي إلى XSS.
بخلاف ذلك، لا بأس باستخدام DOMPurify على الخادم. من المحتمل. يعتمد هذا حقًا على jsdom أو أي DOM تستخدمه من جانب الخادم. إذا كان بإمكانك التعايش مع ذلك، فهذه هي الطريقة التي ستنجح بها:
تثبيت npm dompurify تثبيت npm jsdom
بالنسبة إلى jsdom (يُرجى استخدام إصدار محدث)، يجب أن يؤدي هذا الأمر إلى حل المشكلة:
const createDOMPurify = require('dompurify');const { JSDOM } = require('jsdom');const window = new JSDOM('').window;const DOMPurify = createDOMPurify(window);const clean = DOMPurify.sanitize(' <b>مرحبا</b>');أو حتى هذا، إذا كنت تفضل العمل مع الواردات:
استيراد { JSDOM } من 'jsdom'؛استيراد DOMPurify من 'dompurify'؛const window = new JSDOM('').window;const Purify = DOMPurify(window);const clean =purify.sanitize('<b>مرحبًا هناك< /ب>');إذا كانت لديك مشاكل في جعله يعمل في الإعداد الخاص بك، ففكر في النظر إلى مشروع isomorphic-dompurify المذهل الذي يحل الكثير من المشكلات التي قد يواجهها الأشخاص.
تثبيت npm isomorphic-dompurify
import DOMPurify from 'isomorphic-dompurify';const clean = DOMPurify.sanitize('<s>hello</s>');بالطبع هناك التجريبي! العب مع DOMPurify
أولاً، يرجى الاتصال بنا على الفور عبر البريد الإلكتروني حتى نتمكن من حل المشكلة. مفتاح بي جي بي
وأيضًا، من المحتمل أنك مؤهل للحصول على مكافأة الأخطاء! يستخدم الأشخاص المتميزون في Fastmail DOMPurify لخدماتهم وأضافوا مكتبتنا إلى نطاق مكافآت الأخطاء الخاصة بهم. لذا، إذا وجدت طريقة لتجاوز DOMPurify أو إضعافه، فيرجى أيضًا إلقاء نظرة على موقع الويب الخاص بهم ومعلومات مكافأة الأخطاء.
كيف تبدو العلامات المنقاة؟ حسنًا، يُظهر العرض التوضيحي ذلك لمجموعة كبيرة من العناصر السيئة. ولكن دعونا نعرض أيضًا بعض الأمثلة الأصغر!
DOMPurify.sanitize('<img src=x onerror=alert(1)//>'); // يصبح <img src="x">DOMPurify.sanitize('<svg><g/onload=alert(2)//<p>'); // يصبح <svg><g></g></svg>DOMPurify.sanitize('<p>abc<iframe//src=jAva	script:alert(3)>def</p>'); // يصبح <p>abc</p>DOMPurify.sanitize('<math><mi//xlink:href="data:x,<script>alert(4)</script>">'); // تصبح <math><mi></mi></math>DOMPurify.sanitize('<TABLE><tr><td>HELLO</tr></TABL>'); // يصبح <table><tbody><tr><td>مرحبًا</td></tr></tbody></table>DOMPurify.sanitize('<UL><li><A HREF=//google .com>انقر</UL>'); // يصبح <ul><li><a href="//google.com">انقر</a></li></ul> يدعم DOMPurify حاليًا HTML5 وSVG وMathML. يسمح DOMPurify افتراضيًا بسمات البيانات المخصصة لـ CSS وHTML. يدعم DOMPurify أيضًا Shadow DOM - ويعقم قوالب DOM بشكل متكرر. يسمح لك DOMPurify أيضًا بتطهير HTML لاستخدامه مع jQuery $() و elm.html() API دون أي مشاكل معروفة.
DOMPurify لا يفعل شيئًا على الإطلاق. إنها ببساطة تقوم بإرجاع السلسلة التي قمت بإطعامها بالضبط. يكشف DOMPurify عن خاصية تسمى isSupported ، والتي تخبرك ما إذا كانت ستتمكن من القيام بعملها، حتى تتمكن من وضع خطة النسخ الاحتياطي الخاصة بك.
في الإصدار 1.0.9، تمت إضافة دعم Trusted Types API إلى DOMPurify. في الإصدار 2.0.0، تمت إضافة إشارة تكوين للتحكم في سلوك DOMPurify فيما يتعلق بهذا الأمر.
عند استخدام DOMPurify.sanitize في بيئة تتوفر فيها واجهة برمجة التطبيقات للأنواع الموثوقة ويتم تعيين RETURN_TRUSTED_TYPE على true ، فإنه يحاول إرجاع قيمة TrustedHTML بدلاً من سلسلة (لا يتغير سلوك خيارات التكوين RETURN_DOM و RETURN_DOM_FRAGMENT ).
لاحظ أنه لإنشاء سياسة في trustedTypes باستخدام DOMPurify، يلزم RETURN_TRUSTED_TYPE: false ، حيث أن createHTML يتوقع سلسلة عادية، وليس TrustedHTML . المثال أدناه يوضح هذا.
window.trustedTypes!.createPolicy('default', {
createHTML: (to_escape) =>DOMPurify.sanitize(to_escape, { RETURN_TRUSTED_TYPE: false }),}); نعم. تعتبر قيم التكوين الافتراضية المضمنة جيدة جدًا بالفعل - ولكن يمكنك بالطبع تجاوزها. قم بمراجعة المجلد /demos لرؤية مجموعة من الأمثلة حول كيفية تخصيص DOMPurify.
// strip {{ ... }}, ${ ... } و<% ... %> لجعل الإخراج آمنًا لأنظمة القوالب// كن حذرًا من فضلك، لا يوصى بهذا الوضع لاستخدام الإنتاج.// السماح لا يُنصح على الإطلاق بتحليل القالب بلغة HTML التي يتحكم فيها المستخدم. // استخدم هذا الوضع فقط إذا لم يكن هناك بديل حقًا. أحرف HTML يتم التعامل معها.// كن حذرًا للغاية، يجب تعيين هذا الإعداد على "خطأ" فقط إذا كنت تتعامل فقط مع // HTML ولا شيء آخر، بدون SVG أو MathML أو ما شابه. // وإلا فإن التغيير من "صحيح" إلى "خطأ" سيؤدي إلى XSS بهذه الطريقة أو بطريقة أخرى.const clean = DOMPurify.sanitize(dirty, {SAFE_FOR_XML: false}); // السماح فقط بعناصر <b>، صارمة جدًا cleanconst clean = DOMPurify.sanitize(dirty, {ALLOWED_TAGS: ['b']});// السماح فقط بـ <b> و<q> مع سمات النمطconst clean = DOMPurify.sanitize( قذر، {ALLOWED_TAGS: ['b'، 'q']، ALLOWED_ATTR: ['style']})؛// السماح بجميع عناصر HTML الآمنة ولكن لا يوجد أي منها SVG أو MathML// لاحظ أن إعداد USE_PROFILES سيتجاوز إعداد ALLOWED_TAGS// لذا لا تستخدمهما معًاconst clean = DOMPurify.sanitize(dirty, {USE_PROFILES: {html: true}});// السماح لجميع عناصر SVG الآمنة ومرشحات SVG، بدون HTML أو MathMLconst clean = DOMPurify.sanitize(dirty, {USE_PROFILES: {svg: true, svgFilters: true}});// السماح بجميع عناصر MathML وSVG الآمنة، ولكن لا يوجد SVG Filtersconst clean = DOMPurify.sanitize(dirty, {USE_PROFILES: {mathMl: true, svg: true}} );// قم بتغيير مساحة الاسم الافتراضية من HTML إلى شيء مختلفconst clean = DOMPurify.sanitize(dirty, {NAMESPACE: 'http://www.w3.org/2000/svg'});// اترك كل HTML الآمن كما هو وأضف عناصر <style> إلى block-listconst clean = DOMPurify. sanitize(dirty, {FORBID_TAGS: ['style']});// اترك كل HTML الآمن كما هو وأضف سمات النمط إلى block-listconst clean = DOMPurify.sanitize(dirty, {FORBID_ATTR: ['style']});// قم بتوسيع المصفوفة الحالية من العلامات المسموح بها وأضف <my-tag> إلىallow-listconst clean = DOMPurify.sanitize(dirty, {ADD_TAGS: [' my-tag']});// قم بتوسيع المصفوفة الموجودة من السمات المسموح بها وأضف my-attr إلىallow-listconst clean = DOMPurify.sanitize(dirty, {ADD_ATTR: ['my-attr']});// حظر سمات ARIA، واترك HTML الآمن الآخر كما هو (الافتراضي صحيح)const clean = DOMPurify.sanitize(dirty, {ALLOW_ARIA_ATTR: false} );// حظر سمات بيانات HTML5، واترك HTML الآمن الآخر كما هو (الافتراضي صحيح)const clean = DOMPurify.sanitize(dirty, {ALLOW_DATA_ATTR: false}); // DOMPurify يسمح بتحديد قواعد العناصر المخصصة. عند استخدام CUSTOM_ELEMENT_HANDLING// الحرفي، من الممكن تحديد العناصر التي ترغب في السماح بها بالضبط (افتراضيًا، غير مسموح بأي منها).//// الشيء نفسه ينطبق على سماتها. افتراضيًا، يتم استخدام قائمة السماح المضمنة أو التي تم تكوينها.//// يمكنك استخدام RegExp الحرفي لتحديد ما هو مسموح به أو المسند، ويمكن رؤية الأمثلة لكليهما أدناه.// القيم الافتراضية مقيدة للغاية لمنع تجاوزات XSS العرضية. تعامل بعناية كبيرة!const clean = DOMPurify.sanitize('<foo-bar baz="foobar" ممنوع="true"></foo-bar><div is="foo-baz"></div>', {CUSTOM_ELEMENT_HANDLING: {tagNameCheck: null، // لا يُسمح بعناصر مخصصة attributeNameCheck: null، // الافتراضي / قائمة السماح للسمة القياسية هي useallowCustomizedBuiltInElements: false, // غير مسموح بالمكونات المضمنة المخصصة},}); // <div is=""></div>const clean = DOMPurify.sanitize('<foo-bar baz="foobar" ممنوع = "true"></foo-bar><div is="foo-baz "></div>',{CUSTOM_ELEMENT_HANDLING: {tagNameCheck: /^foo-/, // السماح لجميع العلامات التي تبدأ بـ "foo-"attributeNameCheck: /baz/, // السماح لجميع السمات التي تحتوي على "baz"allowCustomizedBuiltInElements: true، // يُسمح بالمكونات المضمنة المخصصة}،})؛ // <foo-bar baz="foobar"></foo-bar><div is="foo-baz"></div>const clean = DOMPurify.sanitize('<foo-bar baz="foobar" ممنوع ="true"></foo-bar><div is="foo-baz"></div>',{CUSTOM_ELEMENT_HANDLING: {tagNameCheck: (tagName) => tagName.match(/^foo-/), // السماح لجميع العلامات التي تبدأ بـ "foo-"attributeNameCheck: (attr) => attr.match(/baz/), // السماح لجميع العلامات التي تحتوي على "baz"allowCustomizedBuiltInElements: true، // السماح بالمكونات المدمجة المخصصة}،})؛ // <foo-bar baz="foobar"></foo-bar><div is="foo-baz"></div> // توسيع مجموعة العناصر الموجودة التي يمكنها استخدام Data URIsconst clean = DOMPurify.sanitize(dirty, {ADD_DATA_URI_TAGS: ['a', 'area']});// توسيع مجموعة العناصر الموجودة الآمنة لـ URI- مثل القيم (كن حذرًا، مخاطر XSS)const clean = DOMPurify.sanitize(dirty, {ADD_URI_SAFE_ATTR: ["خاصتي"]}); // السماح لمعالجات البروتوكول الخارجية في سمات URL (الافتراضي هو خطأ، كن حذرًا، خطر XSS) // بشكل افتراضي يُسمح فقط بـ http، وhttps، وftp، وftps، وtel، وmailto، وcallto، وsms، وcid، وxmpp.const clean = DOMPurify.sanitize(dirty, {ALLOW_UNKNOWN_PROTOCOLS: true});// السماح لمعالجات بروتوكولات محددة في سمات URL عبر التعبير العادي (الافتراضي خطأ، كن حذرًا، مخاطر XSS)// بشكل افتراضي، يُسمح فقط بـ http، وhttps، وftp، وftps، وtel، وmailto، وcallto، وsms، وcid، وxmpp.// RegExp الافتراضي: /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^az]|[a-z+.-]+(?:[^ a-z+.-:]|$))/i;const clean = DOMPurify.sanitize(dirty, {ALLOWED_URI_REGEXP: /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|xxx):|[^az]|[a-z+.-]+(?: [^a-z+.-:]|$))/i}); // إرجاع DOM HTMLBodyElement بدلاً من سلسلة HTML (الافتراضي خطأ)const clean = DOMPurify.sanitize(dirty, {RETURN_DOM: true});// إرجاع DOM DocumentFragment بدلاً من سلسلة HTML (الافتراضي خطأ)const clean = DOMPurify.sanitize(dirty, {RETURN_DOM_FRAGMENT: true});// استخدم علامة RETURN_TRUSTED_TYPE لتشغيل دعم الأنواع الموثوقة إذا كان متاحًاconst clean = DOMPurify.sanitize(dirty, {RETURN_TRUSTED_TYPE: true}); // سيُرجع كائن TrustedHTML بدلاً من سلسلة إذا كان ذلك ممكنًا // استخدم الأنواع الموثوقة المتوفرة Policyconst clean = DOMPurify.sanitize(dirty, {// يجب أن تحدد السياسة المقدمة createHTML و createScriptURLTRUSTED_TYPES_POLICY: TrustedTypes.createPolicy({createHTML(s) { return s},createScriptURL(s) { return s},}}); // إرجاع المستند بالكامل بما في ذلك علامات <html> (الافتراضي هو خطأ)const clean = DOMPurify.sanitize(dirty, {WHOLE_DOCUMENT: true});// تعطيل حماية DOM Clobbering عند الإخراج (الافتراضي هو صحيح، تعامل بعناية، XSS الثانوية) المخاطر هنا)const clean = DOMPurify.sanitize(dirty, {SANITIZE_DOM: false});// فرض حماية صارمة من DOM Clobbering عبر عزل مساحة الاسم (الافتراضي خطأ)// عند التمكين، يتم عزل مساحة اسم الخصائص المسماة (على سبيل المثال، سمات `id` و`name`)// عن متغيرات JS عن طريق وضع بادئة لها بالسلسلة `user-content-`const clean = DOMPurify. sanitize(dirty, {SANITIZE_NAMED_PROPS: true});// احتفظ بمحتوى العنصر عند إزالة العنصر (الافتراضي صحيح)const clean = DOMPurify.sanitize(dirty, {KEEP_CONTENT: false});// لصق عناصر مثل النمط أو البرنامج النصي أو غيرها على document.body ومنع سلوك المتصفح غير البديهي في العديد من حالات الحافة (الافتراضي هو false)const clean = DOMPurify.sanitize(dirty) , {FORCE_BODY: true});// إزالة جميع عناصر <a> ضمن عناصر <p> التي تمت إزالتهاconst clean = DOMPurify.sanitize(dirty, {FORBID_CONTENTS: ['a'], FORBID_TAGS: ['p']});// قم بتغيير نوع المحلل اللغوي بحيث يتم التعامل مع البيانات المعقمة على أنها XML وليس على أنها HTML، وهو الإعداد الافتراضيconst clean = DOMPurify .sanitize(dirty, {PARSER_MEDIA_TYPE: 'application/xhtml+xml'}); // استخدم وضع IN_PLACE لتطهير العقدة "في مكانها"، وهو أسرع بكثير اعتمادًا على كيفية استخدام DOMPurifyconst dirty = document.createElement('a');dirty.setAttribute('href', 'javascript:alert(1) )');const clean = DOMPurify.sanitize(dirty, {IN_PLACE: true}); // راجع https://github.com/cure53/DOMPurify/issues/288 لمزيد من المعلوماتهناك المزيد من الأمثلة هنا، والتي توضح كيف يمكنك تشغيل وتخصيص وتكوين DOMPurify ليناسب احتياجاتك.
بدلًا من تمرير نفس التكوين بشكل متكرر إلى DOMPurify.sanitize ، يمكنك استخدام التابع DOMPurify.setConfig . سيستمر التكوين الخاص بك حتى الاتصال التالي بـ DOMPurify.setConfig ، أو حتى تقوم باستدعاء DOMPurify.clearConfig لإعادة تعيينه. تذكر أنه يوجد تكوين نشط واحد فقط، مما يعني أنه بمجرد تعيينه، سيتم تجاهل جميع معلمات التكوين الإضافية التي تم تمريرها إلى DOMPurify.sanitize .
يتيح لك DOMPurify زيادة وظائفه عن طريق ربط وظيفة واحدة أو أكثر باستخدام الأسلوب DOMPurify.addHook بأحد الخطافات التالية:
beforeSanitizeElements
uponSanitizeElement (No 's' - يُستدعى لكل عنصر)
afterSanitizeElements
beforeSanitizeAttributes
uponSanitizeAttribute
afterSanitizeAttributes
beforeSanitizeShadowDOM
uponSanitizeShadowNode
afterSanitizeShadowDOM
يقوم بتمرير عقدة DOM التي تتم معالجتها حاليًا، عند الحاجة إلى بيانات حرفية مع العقدة التي تم التحقق منها وبيانات السمات وتكوين DOMPurify إلى رد الاتصال. تحقق من العرض التوضيحي لربط MentalJS لترى كيف يمكن استخدام واجهة برمجة التطبيقات (API) بشكل جيد.
مثال :
DOMPurify.addHook(
"عند SanitizeAttribute"،
الوظيفة (currentNode، HookEvent، config) {// افعل شيئًا ما مع العقدة الحالية // يمكنك أيضًا تغيير HookEvent للعقدة الحالية (على سبيل المثال تعيين HookEvent.forceKeepAttr = true) // لأنواع الخطاف الأخرى غير "uponSanitizeAttribute" ، فإن HookEvent يساوي null
});| خيار | منذ | ملحوظة |
|---|---|---|
| SAFE_FOR_JQUERY | 2.1.0 | لا يوجد بديل مطلوب. |
نحن نستخدم حاليًا إجراءات Github مع BrowserStack. يمنحنا هذا إمكانية التأكد من أن كل التزام يسير وفقًا للخطة في جميع المتصفحات المدعومة. تحقق من سجلات البناء هنا: https://github.com/cure53/DOMPurify/actions
يمكنك أيضًا إجراء اختبارات محلية عن طريق تنفيذ npm test . تعمل الاختبارات بشكل جيد مع Node.js v0.6.2 و[email protected].
سيتم توقيع جميع الالتزامات ذات الصلة بالمفتاح 0x24BB6BF4 لمزيد من الأمان (منذ 8 أبريل 2016).
npm i ) نحن ندعم npm رسميًا. تم تكوين سير عمل GitHub Actions لتثبيت التبعيات باستخدام npm . عند استخدام إصدار مهمل من npm لا يمكننا التأكد بشكل كامل من إصدارات التبعيات المثبتة والتي قد تؤدي إلى مشاكل غير متوقعة.
نحن نعتمد على نصوص التشغيل npm للتكامل مع البنية التحتية للأدوات لدينا. نحن نستخدم ESLint كخطاف ما قبل الالتزام لضمان اتساق التعليمات البرمجية. علاوة على ذلك، لتسهيل عملية التنسيق، نستخدم طريقة أجمل أثناء إنشاء الأصول /dist من خلال rollup .
هذه هي البرامج النصية npm لدينا:
npm run dev لبدء البناء أثناء مراقبة مصادر التغييرات
npm run test لتشغيل مجموعة الاختبار الخاصة بنا عبر jsdom وkarma
test:jsdom لتشغيل الاختبارات من خلال jsdom فقط
test:karma لإجراء الاختبارات من خلال الكارما فقط
npm run lint لفحص المصادر باستخدام ESLint (عبر xo)
npm run format لتنسيق مصادرنا باستخدام أجمل لتسهيل تمرير ESLint
npm run build لبناء أصول التوزيع الخاصة بنا المصغرة وغير المصغرة كوحدة UMD
npm run build:umd لإنشاء وحدة UMD غير مصغرّة فقط
npm run build:umd:min لإنشاء وحدة UMD مصغرة فقط
ملاحظة: يتم تشغيل كافة البرامج النصية عبر npm run <script> .
هناك المزيد من البرامج النصية npm ولكنها تهدف بشكل أساسي إلى التكامل مع CI أو من المفترض أن تكون "خاصة" على سبيل المثال لتعديل ملفات توزيع البناء مع كل التزام.
نحن أماه
