ระบบการออกแบบของรัฐบาลออสเตรเลียได้รับการปลดประจำการเยี่ยมชมหน้าชุมชนของเราสำหรับข้อมูลเพิ่มเติม
Pancake เป็นเครื่องมือในการทำงานกับ NPM ที่ด้านหน้าง่ายและหวาน
NPM เขียนเกี่ยวกับความท้าทายที่นักพัฒนาส่วนหน้าเผชิญเมื่อพยายามใช้ NPM แพนเค้กกำลังพูดถึงสิ่งเหล่านั้นโดยการยอมรับแนวคิดของโมดูลอิสระที่มีรุ่นเล็ก ๆ การพึ่งพาซึ่งกันและกันเป็นสิ่งที่ NPM ทำได้ดีมากและแพนเค้กจะช่วยให้คุณทำให้พวกเขาแบนและเกิดข้อผิดพลาดในความขัดแย้ง อ่านเพิ่มเติมเกี่ยวกับโซลูชันของเรา
แพนเค้กจะตรวจสอบ "peerDependencies" ของคุณสำหรับความขัดแย้งและมาพร้อมกับปลั๊กอินเพื่อรวบรวมเนื้อหาของโมดูลของคุณสำหรับคุณและแสดงรายการโมดูลที่มีอยู่ทั้งหมดเพื่อให้คุณเลือกและติดตั้ง
หากคุณกำลังสร้างโครงการใหม่โดยใช้แพนเค้กคุณจะต้องดูการสร้างโมดูลแพนเค้กของคุณเอง
แพนเค้กมาพร้อมกับส่วนประกอบระบบการออกแบบของรัฐบาลออสเตรเลีย หากต้องการทราบว่าคุณติดตั้ง pancake ให้ตรวจสอบไฟล์ package.json ของคุณสำหรับ "pancake": { ... } วัตถุ หากคุณมีสิ่งนี้และคุณต้องการเปลี่ยนเอาต์พุตดูที่ส่วนการตั้งค่าแพนเค้ก
หากคุณมีปัญหาเกี่ยวกับการใช้ sass globals ในโครงการ ReactJS โปรดตรวจสอบระบบการออกแบบ React Starter Repo สำหรับตัวอย่าง
⬆กลับไปด้านบน
~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 ของคุณ json สิ่งนี้จะเรียงลำดับการตั้งค่าการตั้งค่าทั้งหมดในดังนั้นคุณจึงสามารถทำซ้ำได้อย่างสมบูรณ์ นอกจากนี้คุณยังสามารถยกเลิกพฤติกรรมนี้ได้โดยการเพิ่ม "auds": { "auto-save": false } ลงใน Package.json ของคุณ
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>
เรียกใช้แพนเค้กในโหมด verbose silly
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"
} สิ่งนี้จะเรียกใช้แพนเค้กทันทีหลังจากติดตั้งและตรวจสอบให้แน่ใจว่าคุณได้รับเวอร์ชันล่าสุดของ Release 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 คุณจะต้องโคลนที่เก็บนี้ด้วย Symlinks ที่เปิดใช้งานโดยใช้เชลล์ผู้ดูแลระบบ
git clone -c core.symlinks=true https://github.com/govau/pancakeในการเรียกใช้โครงการนี้คุณจะต้องติดตั้งเส้นด้าย
yarn installyarn buildเพื่อพัฒนาในหนึ่งในโมดูลที่ใช้นาฬิกาภายใน:
cd packages/pancake/
yarn watch ❗ตรวจสอบให้แน่ใจว่าคุณแก้ไขเฉพาะไฟล์ภายใน src/ โฟลเดอร์ ไฟล์ภายใน bin/ folder ถูกเขียนทับโดย transpiler
โปรดดูรูปแบบการเข้ารหัสและทำงานกับมันไม่ใช่กับมัน -
⬆กลับไปด้านบน
เราได้เผยแพร่โมดูลทดสอบสี่โมดูลใน ORG NPM ที่กำหนดขอบเขตของเราเพื่อทดสอบการพึ่งพาซึ่งกันและกันและเพื่อทำการดีบักด้วยการเปิดโหมด Verbose ค้นหารายการด้านล่างของสิ่งที่อยู่ภายในแต่ละเวอร์ชัน:
@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เรามีสคริปต์ทดสอบแบบ end-to-end ที่จะใช้สถานการณ์หลายสถานการณ์และเปรียบเทียบผลลัพธ์ของแพนเค้กกับการติดตั้ง
นอกจากนี้เรายังใช้การทดสอบหน่วยด้วยความตลกขบขัน
ในการเรียกใช้การทดสอบทั้งหมดใช้คำสั่งด้านล่าง:
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) เครือจักรภพแห่งออสเตรเลีย ได้รับใบอนุญาตภายใต้ MIT
⬆กลับไปด้านบน