澳大利亞政府設計系統已退役,訪問我們的社區頁面以獲取更多信息
煎餅是使與NPM在前端一起工作的工具。
NPM在嘗試使用NPM時撰寫了前端開發人員面臨的挑戰。煎餅正在通過擁抱小型獨立模塊的想法來解決這些問題。 NPM確實做得很好,相互依存關係確實可以幫助您保持平坦並在衝突中出現錯誤。閱讀有關我們解決方案的更多信息
Pancake將檢查您的"peerDependencies"是否存在衝突,並帶有插件,以為您編譯模塊的內容,並列出所有可用的模塊供您選擇和安裝。
如果您使用煎餅創建一個新項目,則需要考慮創建自己的煎餅模塊。
煎餅配備了澳大利亞政府設計系統組件。要知道您是否已安裝了pancake ,請檢查您的package.json文件中的"pancake": { ... }對象。如果您有這個,並且想更改煎餅設置部分的輸出查看。
如果您在ReactJS項目中使用SASS Globals有問題,請查看Design System React入門存儲庫。
⬆回到頂部
~3.0.0package.json文件(運行npm init --yes )僅薄煎餅就不會隨身攜帶任何依賴項,而所有插件都具有固定的對特定版本的依賴性,以使安全性影響盡可能低。我們還運送一個package-lock.json文件。
⬆回到頂部
煎餅帶有兩個不同級別的設置。全球設置可以在特定於項目的項目和本地設置之間持續存在。
要更改全局設置,使用--set的標誌運行煎餅。
npx pancake --set [settingName] [value]| 環境 | 價值 | 預設 |
|---|---|---|
npmOrg | 這是NPM組織範圍 | @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中。這將有點收縮包裝所有設置中的所有設置,因此您完全可以重現。您還可以通過在包裝中添加"auds": { "auto-save": false }來選擇退出此行為。
npx pancake --nosave-o , --org
類型: <flag> [value]
您可以通過佔領此標誌來暫時覆蓋NPM組織範圍。這對於測試很有用。請確保使用設置進行永久更改。
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⬆回到頂部
您可以使用自己的模塊使用煎餅。您在模塊中要做的就是:
package.json文件postinstall腳本和依賴性添加到您的package.json 。安裝煎餅使用節點軟件包管理器。
npm i @gov.au/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"
}安裝後將立即運行煎餅,並確保您始終獲得發行版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"
}現在,您已經準備好發布模塊並開始使用煎餅。
⬆回到頂部
你好呀 ? ,
❤️我們喜歡您正在研究本節。我們歡迎任何反饋或拉的請求,並且對您將自己的時間投入該項目感到非常激動。為了使您的貢獻計數,請先閱讀代碼,看看我們的想法是什麼。我們將與您的同樣做。
注意:如果您想在Windows上構建此項目,則需要使用管理員Shell啟用Symlinks來克隆此存儲庫。
git clone -c core.symlinks=true https://github.com/govau/pancake要運行此項目,您需要安裝紗線。
yarn installyarn build要在其中一個模塊中開發在其中的手錶:
cd packages/pancake/
yarn watch ❗️確保僅在src/文件夾中編輯文件。 bin/文件夾中的文件被Transpiler覆蓋。
請查看編碼樣式並使用它,而不是與之抗衡。 ?
⬆回到頂部
我們已經在範圍內的NPM組織中發布了四個測試模塊,以測試相互依賴性,並通過詳細模式打開調試。在下面找到每個版本內部內容的列表:
@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我們有一個端到端的測試腳本,該腳本將採用許多方案,並將薄煎餅的輸出與固定裝置進行比較。
我們還與開玩笑一起使用單位測試。
要運行所有測試,請使用以下命令:
npm test煎餅已通過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⬆回到頂部
版權(C)澳大利亞聯邦。根據麻省理工學院許可。
⬆回到頂部