تم إيقاف تشغيل نظام تصميم الحكومة الأسترالية على صفحة مجتمعنا لمزيد من المعلومات
Pancake هي أداة لجعل العمل مع NPM على الواجهة الأمامية سهلة وحلوة.
كتب NPM عن التحديات التي يواجهها مطورو الواجهة الأمامية عند محاولة استخدام NPM. يعالج Pancake تلك من خلال تبني فكرة وحدات مستقلة صغيرة منفردة. الترابط هو ما يفعله NPM بشكل جيد وسوف يساعدك Pancake على الحفاظ على مسطحها وخطأ في النزاعات. اقرأ المزيد عن حلنا
ستعمل Pancake على التحقق من "peerDependencies" الخاصة بك من أجل التعارضات ، وتأتي مع ملحقات مكون من ملحقات لتجميع محتويات الوحدات النمطية لك وتسرد جميع الوحدات النمطية المتاحة لك لتحديدها وتثبيتها.
إذا كنت تقوم بإنشاء مشروع جديد باستخدام Pancake ، فستحتاج إلى البحث في إنشاء وحدات فطيرة خاصة بك.
تأتي Pancake مثبتة مع مكونات نظام تصميم الحكومة الأسترالية. لمعرفة ما إذا كنت قد قمت بتثبيت pancake ، تحقق من ملف package.json للحصول على "pancake": { ... } كائن. إذا كان لديك هذا وترغب في تغيير إلقاء نظرة على قسم إعدادات الفطيرة.
إذا كانت لديك مشكلات في استخدام SASS Globals في مشروع ReactJS ، فيرجى مراجعة REPO REACT REACT STARTE REPO للحصول على مثال.
⬆ العودة إلى الأعلى
~3.0.0package.json في جذرك (قم بتشغيل npm init --yes ) لا يأتي Pancake وحده مع أي تبعيات بينما تحتوي جميع الإضافات على تبعيات ثابتة لإصدارات محددة للحفاظ على تأثير الأمان منخفضًا قدر الإمكان. نحن أيضا شحن ملف package-lock.json .
⬆ العودة إلى الأعلى
الفطيرة تأتي مع مستوى مختلف من الإعدادات. يمكن أن تستمر الإعدادات العالمية عبر المشاريع والإعدادات المحلية المحددة للمشروع.
لتغيير الإعدادات العالمية ، قم بتشغيل فطيرة مع --set .
npx pancake --set [settingName] [value]| جلسة | قيمة | تقصير |
|---|---|---|
npmOrg | هذا هو نطاق NPM ORG | @gov.au |
plugins | التبديل لتعطيل أو تمكين الإضافات | true |
ignorePlugins | مجموعة من الإضافات المراد تجاهلها | [] |
مثال:
npx pancake --set npmOrg yourOrg لتغيير الإعدادات المحلية ، كل ما عليك فعله هو تضمين كائن pancake في ملف package.json الخاص بك. جميع الإعدادات الممكنة مذكورة أدناه:
{
"name" : "your-name" ,
"version" : "0.1.0" ,
"pancake" : { //the pancake config object
"auto-save" : true , //enable/disable auto saving the settings into your package.json after each run
"plugins" : true , //enable/disable plugins
"ignore" : [ ] , //ignore specific plugins
"css" : { //settings for the @gov.au/pancake-sass plugin
"minified" : true , //minify the css?
"modules" : false , //save one css file per module?
"browsers" : [ //autoprefixer browser matrix
"last 2 versions" ,
"ie 8" ,
"ie 9" ,
"ie 10"
] ,
"location" : "pancake/css/" , //the location to save the css files to
"name" : "pancake.min.css" //the name of the css file that includes all modules; set this to false to disable it
} ,
"sass" : { //settings for the @gov.au/pancake-sass plugin
"modules" : false , //save one Sass file per module?
"location" : "pancake/sass/" , //the location to save the Sass files to
"name" : "pancake.scss" //the name of the Sass file that includes all modules; set this to false to disable it
} ,
"js" : { //settings for the @gov.au/pancake-js plugin
"minified" : true , //minify the js?
"modules" : false , //save one js file per module?
"location" : "pancake/js/" , //the location to save the js files to
"name" : "pancake.min.js" //the name of the js file that includes all modules; set this to false to disable it
} ,
"react" : { //settings for the @gov.au/pancake-react plugin
"location" : "pancake/react/" , //the location to save the react files to; set this to false to disable it
} ,
"json" : { //settings for the @gov.au/pancake-json plugin
"enable" : false , //the pancake-json plugin is off by default
"location" : "pancake/js/" , //the location to save the json files to
"name" : "pancake" , //the name of the json file
"content" : { //you can curate what the json file will contain
"name" : true , //include the name key
"version" : true , //include the version key
"dependencies" : true , //include the dependencies key
"path" : true , //include the path key
"settings" : true //include the settings key
}
}
}
} لإزالة js يمكنك تعيين قيمة "name": false وإزالة القيم minified modules location .
⬆ العودة إلى الأعلى
يمكنك عرض المساعدة مع pancake --help .
-n ، --nosave
اكتب: <flag>
سيوقف الأمر فطيرة من دمج الإعدادات المحلية الخاصة بك ، وإكمالها مع الافتراضات وحفظها في package.json الخاصة بك. json. سيؤدي ذلك إلى تقليص جميع الإعدادات في جميع الإعدادات حتى تكون قابلة للتكرار تمامًا. يمكنك أيضًا إلغاء الاشتراك في هذا السلوك عن طريق إضافة "auds": { "auto-save": false } في package.json.
npx pancake --nosave -o ، --org
اكتب: <flag> [value]
يمكنك الكتابة فوق نطاق NPM ORG مؤقتًا عن طريق إلغاء هذا العلم. هذا يمكن أن يكون مفيدًا للاختبار. تأكد من استخدام الإعدادات لتغيير دائم.
npx pancake --org @otherOrg -p ، --noplugins
اكتب: <flag>
يمكنك تعطيل جميع المكونات الإضافية مؤقتًا. هذا رائع لتكامل CI.
npx pancake --noplugins -i ، --ignore
النوع: <flag> [comma separated list]
يمكنك الكتابة فوق قائمة الإضافات المراد تعطيلها مؤقتًا.
npx pancake --ignore @gov.au/pancake-svg,@gov.au/pancake-js -v ، --verbose
اكتب: <flag>
تشغيل فطيرة في وضع مطول سخيف.
npx pancake --verbose⬆ العودة إلى الأعلى
يمكنك استخدام Pancake مع الوحدات النمطية الخاصة بك. كل ما عليك فعله في وحداتك هو:
package.json الخاص بكpostinstall والاعتماد على ملف package.json الخاص بكلتثبيت Pancake استخدم Node Package Manager.
npm i @gov.au/pancake
للتأكد من أن Pancake يمكنه اكتشاف الوحدة النمطية بين حزم NPM الأخرى ، يجب عليك إضافة كائن pancake-module إلى كائن pancake .
{
"name": "your-module-name",
"version": "1.0.0",
"description": "Your description",
+ "pancake": {
+ "pancake-module": { //pancake is looking for this object to id your module as a pancake module
+ "version": "1.0.0", //the major version of pancake
+ "plugins": [ //only state the plugins you need here
+ "@gov.au/pancake-sass"
+ ],
+ "org": "@gov.au @nsw.gov.au", //the npm organisations that will be searched for pancake modules
+ "sass": { //sass plugin specific settings
+ "path": "lib/sass/_module.scss", //where is your sass
+ "sass-versioning": true //enable sass-versioning. Read more here: https://github.com/dominikwilkowski/sass-versioning
+ },
+ "js": { //js plugin specific settings
+ "path": "lib/js/module.js" //where is your js
+ },
+ "react": {
+ "location": "lib/js/react.js" //the location to move the react files to
+ }
+ }
+ },
"dependencies": {},
"peerDependencies": {},
"devDependencies": {},
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC"
} يكمن سحر الفطيرة في نص postinstall . لتمكين فطيرة إضافتها كاعتماد وإضافة البرنامج النصي:
{
"name": "your-module-name",
"version": "1.0.0",
"description": "Your description",
"pancake": {
"pancake-module": {
"version": "1.0.0",
"plugins": [
"@gov.au/pancake-sass"
],
"sass": {
"path": "lib/sass/_module.scss",
"sass-versioning": true
},
"js": {
"path": "lib/js/module.js"
},
"react": {
"location": "lib/js/react.js"
}
}
},
"dependencies": {
+ "@gov.au/pancake": "~1"
},
"peerDependencies": {},
"devDependencies": {},
"scripts": {
+ "postinstall": "pancake"
},
"author": "",
"license": "ISC"
} سيقوم هذا بتشغيل Pancake مباشرة بعد التثبيت وتأكد من حصولك دائمًا على أحدث إصدار من الإصدار 1.0.0. إذا كان عليك تغيير الإعدادات (من المحتمل جدًا) ، فلن تضطر فعليًا إلى توتر هذا المشروع. يمكنك تعيين هذه الإعدادات على مستوى العالم قبل تشغيلها باستخدام برنامج postinstall الخاص بك.
" postinstall " : " pancake --set npmOrg yourOrg && pancake " إضافة تبعية الأقران بسيطة طالما أنك تتذكر إضافتها إلى dependencies وعمليات peerDependencies في نفس الوقت. وبهذه الطريقة ، ستقوم NPM بتثبيت تبعية الأقران ويمكن أن تحقق الفطيرة ما إذا كان لديك تعارضات.
{
"name": "your-module-name",
"version": "1.0.0",
"description": "Your description",
"pancake": {
"pancake-module": {
"version": "1.0.0",
"plugins": [
"@gov.au/pancake-sass"
],
"sass": {
"path": "lib/sass/_module.scss",
"sass-versioning": true
},
"js": {
"path": "lib/js/module.js"
},
"react": {
"location": "lib/js/react.js"
}
}
},
"dependencies": {
"@gov.au/pancake": "~1",
+ "@gov.au/core": "^0.1.0"
},
"peerDependencies": {
+ "@gov.au/core": "^0.1.0"
},
"devDependencies": {},
"scripts": {
"postinstall": "pancake"
},
"author": "",
"license": "ISC"
}أنت الآن مستعد لنشر وحداتك وابدأ في استخدام Pancake.
⬆ العودة إلى الأعلى
أهلاً ؟،
❤ نحن نحب أن تبحث في هذا القسم. نرحب بأي ملاحظات أو طلبات سحبنا ونفكر في وضع وقتك في هذا المشروع. لجعل عدد مساهمتك ، اقرأ من خلال الكود أولاً ومعرفة ما كان تفكيرنا. سنفعل الشيء نفسه مع لك.
ملاحظة : إذا كنت تتطلع إلى إنشاء هذا المشروع على Windows ، فستحتاج إلى استنساخ هذا المستودع مع تمكين Symlinks باستخدام قذيفة المسؤول.
git clone -c core.symlinks=true https://github.com/govau/pancakeلتشغيل هذا المشروع ، ستحتاج إلى تثبيت الغزل.
yarn installyarn buildلتتطور في إحدى الوحدات النمطية تدير الساعة بداخلها:
cd packages/pancake/
yarn watch ❗ تأكد من تحرير الملف فقط داخل المجلد src/ المجلد. يتم كتابة الملفات داخل bin/ المجلد بواسطة جهاز Transpiler.
يرجى إلقاء نظرة على نمط الترميز والعمل معه ، وليس ضده. ؟
⬆ العودة إلى الأعلى
لقد نشرنا أربع وحدات اختبار في NPM Org الخاصة بنا لاختبار الاعتماد المتبادل والتصحيح مع وضع وضع المطوّل. ابحث أدناه عن قائمة ما هو داخل كل إصدار:
@gov.au/testModule1
@gov.au/testModule2
@gov.au/testmodule1 : ^15.0.0@gov.au/testModule3
@gov.au/testmodule1 : ^15.0.0@gov.au/testmodule2 : ^19.0.0@gov.au/testModule4
@gov.au/testmodule1 : ^15.0.0لدينا برنامج نصي اختبار شامل إلى النهاية سيأخذ عدد من السيناريوهات ومقارنة إخراج الفطائر مقابل التركيبات.
نستخدم أيضًا اختبارات الوحدة مع Jest.
لتشغيل جميع الاختبارات استخدم الأمر أدناه:
npm testتم اختبار Pancake مع Ubuntu 16.04 و Mac OS 10.11 و 10.12 و Windows 10 إصدار العقدة القادم مع NPM 3 وأعلى:
v5.0.0v5.12.0v6.9.5v7.0.0v7.4.0v7.5.0v7.6.0v10.0.0⬆ العودة إلى الأعلى
حقوق الطبع والنشر (ج) كومنولث أستراليا. مرخصة تحت معهد ماساتشوستس للتكنولوجيا.
⬆ العودة إلى الأعلى