Das Australian Government Design System wurde auf unserer Community -Seite stillgelegt, um weitere Informationen zu erhalten
Pancake ist ein Werkzeug, um die Arbeit mit NPM am vorderen Ende einfach und süß zu machen.
NPM schrieb über die Herausforderungen Frontend -Entwickler, wenn sie versuchen, NPM zu verwenden. Pancake befasst sich mit denen, indem sie die Idee von kleinen, individuell versionierten unabhängigen Modulen annimmt. Interdependenzen sind das, was NPM wirklich gut macht, und Pfannkuchen hilft Ihnen dabei, sie flach und fehlerhaft in Konflikten herauszuhalten. Lesen Sie mehr über unsere Lösung
Pancake überprüft Ihre "peerDependencies" auf Konflikte und wird mit Plugins ausgestattet, um den Inhalt Ihrer Module für Sie zu kompilieren, und listet alle verfügbaren Module auf, die Sie auswählen und installieren können.
Wenn Sie ein neues Projekt mit Pancake erstellen, sollten Sie sich mit Ihren eigenen Pfannkuchenmodulen befassen.
Pancake wird mit den Konstruktionssystemkomponenten der australischen Regierung installiert. Um zu wissen, ob Sie pancake installiert haben, überprüfen Sie Ihre package.json -Datei auf "pancake": { ... } Objekt. Wenn Sie dies haben und die Ausgabe ändern möchten, sehen Sie sich den Abschnitt Pfannkucheneinstellungen an.
Wenn Sie Probleme mit der Verwendung von Sass Globals in einem ReactJS -Projekt haben, lesen Sie bitte das Designsystem React Starter Repo, um ein Beispiel zu erhalten.
⬆ Zurück nach oben
~3.0.0npm init --yes package.json -Datei in Ihrem Stamm Pancake allein wird nicht mit Abhängigkeiten ausgestattet, während alle Plugins Abhängigkeiten von bestimmten Versionen festgelegt haben, um die Sicherheitsauswirkungen so gering wie möglich zu halten. Wir versenden auch eine package-lock.json Datei.
⬆ Zurück nach oben
Pancake verfügt über zwei verschiedene Einstellungsstufen. Globale Einstellungen können über Projekte und lokale Einstellungen bestehen, die projektspezifisch sind.
Um die globalen Einstellungen zu ändern, führen Sie Pancake mit der Flagge --set aus.
npx pancake --set [settingName] [value]| Einstellung | Wert | Standard |
|---|---|---|
npmOrg | Dies ist der NPM -Org -Bereich | @gov.au |
plugins | Ein Schalter zum Deaktivieren oder Aktivieren von Plugins | true |
ignorePlugins | Eine Reihe von Plugins zu ignorieren | [] |
Beispiel:
npx pancake --set npmOrg yourOrg Um lokale Einstellungen zu ändern, müssen Sie nur ein pancake in Ihre package.json -Datei einbeziehen. Alle möglichen Einstellungen sind unten angegeben:
{
"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
}
}
}
} Um js zu entfernen, können Sie den Wert von "name": false und die minified Werte, modules und location entfernen.
⬆ Zurück nach oben
Sie können die Hilfe mit pancake --help .
-n , --nosave
Geben Sie: <flag>
Der Befehl hindert Pancake daran, Ihre lokalen Einstellungen zu verschmelzen, sie mit den Standardeinstellungen zu vervollständigen und in Ihrem package.json zu speichern. Dadurch werden alle Einstellungen in Shrink-Wrap in so reproduzierbar. Sie können dieses Verhalten auch anmelden, indem "auds": { "auto-save": false } in Ihr Paket.json.
npx pancake --nosave -o , --org
Typ: <flag> [value]
Sie können den NPM -Org -Bereich vorübergehend überschreiben, indem Sie diese Flagge übernehmen. Dies kann zum Testen nützlich sein. Stellen Sie sicher, dass Sie die Einstellungen für eine dauerhafte Änderung verwenden.
npx pancake --org @otherOrg -p , --noplugins
Geben Sie: <flag>
Sie können alle Plugins vorübergehend deaktivieren. Dies ist ideal für die CI -Integration.
npx pancake --noplugins -i , --ignore
Geben Sie: <flag> [comma separated list]
Sie können die Liste der Plugins vorübergehend überschreiben, um deaktiviert zu werden.
npx pancake --ignore @gov.au/pancake-svg,@gov.au/pancake-js -v , --verbose
Geben Sie: <flag>
Führen Sie Pfannkuchen im ausführlichen dummen Modus aus.
npx pancake --verbose⬆ Zurück nach oben
Sie können Pancake mit Ihren eigenen Modulen verwenden. Alles, was Sie in Ihren Modulen tun müssen, ist:
package.json hinzupostinstall in Ihre package.json -Datei hinzuSo installieren Sie Pancake Node Package Manager.
npm i @gov.au/pancake
Um sicherzustellen, dass Pancake Ihr Modul unter den anderen hundert NPM-Paketen erkennen kann, müssen Sie das pancake-module in Ihr pancake hinzufügen.
{
"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"
} Die Magie des Pfannkuchens liegt im postinstall -Skript. Um Pfannkuchen zu aktivieren, fügen Sie es als Abhängigkeit hinzu und fügen Sie das Skript hinzu:
{
"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"
} Dadurch wird Pancake gleich nach der Installation ausgeführt und stellen Sie sicher, dass Sie immer die neueste Version der Version 1.0.0 erhalten. Wenn Sie die Einstellungen (sehr wahrscheinlich) ändern müssen, müssen Sie dieses Projekt nicht wirklich aufgeben. Sie können diese Einstellungen global festlegen, bevor Sie sie mit Ihrem postinstall -Skript ausführen.
" postinstall " : " pancake --set npmOrg yourOrg && pancake " Das Hinzufügen von Peer -Abhängigkeiten ist einfach, solange Sie sich daran erinnern, sie gleichzeitig den dependencies und peerDependencies hinzuzufügen. Auf diese Weise installiert NPM die Peer -Abhängigkeit und Pfannkuchen kann prüfen, ob Sie Konflikte haben.
{
"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"
}Jetzt können Sie Ihre Module veröffentlichen und Pfannkuchen verwenden.
⬆ Zurück nach oben
Hallo ?,
❤️ Wir lieben es, dass Sie sich in diesen Abschnitt befassen. Wir begrüßen alle Feedback- oder Rufenanfragen und sind super aufgeregt darüber, dass Sie Ihre eigene Zeit in dieses Projekt integrieren. Um Ihren Beitrag zu zählen, lesen Sie zuerst den Code durch und sehen Sie, was unser Denken war. Wir werden dasselbe mit Ihrem tun.
HINWEIS : Wenn Sie dieses Projekt unter Windows erstellen möchten, müssen Sie dieses Repository mit Symlinks über eine Administratorschale klonen.
git clone -c core.symlinks=true https://github.com/govau/pancakeUm dieses Projekt auszuführen, müssen Sie Garn installieren lassen.
yarn installyarn buildUm sich in einem der Module zu entwickeln, laufen Sie die Uhr darin:
cd packages/pancake/
yarn watch ❗️ Stellen Sie sicher, dass Sie die Datei nur im src/ Ordner bearbeiten. Dateien im bin/ Ordner werden vom Transpiler überschrieben.
Bitte schauen Sie sich den Codierungsstil an und arbeiten Sie damit, nicht dagegen. ?
⬆ Zurück nach oben
Wir haben vier Testmodule in unserem Scoped NPM -Org veröffentlicht, um Interdependenzen zu testen und mit dem ausgeschalteten Modus aus dem ausführlichen Modus zu debuggen. Suchen Sie unten eine Liste der, was sich in jeder Version befindet:
@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.0Wir haben ein End-to-End-Testskript, das eine Reihe von Szenarien benötigt und die Ausgabe von Pfannkuchen mit den Vorrichtungen vergleichen wird.
Wir verwenden auch Unit -Tests mit Scherz.
Um alle Tests auszuführen, verwenden Sie den folgenden Befehl:
npm testPancake wurde mit Ubuntu 16.04, Mac OS 10.11, 10.12 und Windows 10 getestet. Alle Knotenversionen mit NPM 3 und höher:
v5.0.0v5.12.0v6.9.5v7.0.0v7.4.0v7.5.0v7.6.0v10.0.0⬆ Zurück nach oben
Copyright (c) Commonwealth of Australia. Lizenziert unter MIT.
⬆ Zurück nach oben