pancake
1.0.0
호주 정부 설계 시스템이 해체되었습니다. 자세한 내용은 커뮤니티 페이지를 방문하십시오.
Pancake는 프론트 엔드에서 NPM과 함께 쉽고 달콤하게 작업 할 수있는 도구입니다.
NPM은 Frontend 개발자가 NPM을 사용하려고 할 때 직면 한 과제에 대해 썼습니다. 팬케이크는 작은 개별 버전의 독립 모듈의 아이디어를 수용함으로써 사람들을 다루고 있습니다. 상호 의존성은 NPM이 실제로 잘하는 일이며 팬케이크는 당신이 그것들을 평평하게 유지하고 갈등을 오류로 유지하는 데 도움이됩니다. 솔루션에 대해 자세히 알아보십시오
Pancake는 충돌에 대한 "peerDependencies" 확인하고 모듈의 내용을 컴파일하는 플러그인과 함께 제공되며 선택 및 설치할 수있는 모든 사용 가능한 모듈을 나열합니다.
Pancake를 사용하여 새 프로젝트를 만들고 있다면 팬케이크 모듈을 만들고 싶을 것입니다.
팬케이크는 호주 정부 설계 시스템 구성 요소와 함께 설치됩니다. pancake 설치되어 있는지 확인하려면 package.json 파일을 "pancake": { ... } 객체를 확인하십시오. 이 제품이 있고 출력을 변경하려면 Pancake 설정 섹션에서 살펴보십시오.
Reactjs 프로젝트에서 Sass Globals를 사용하는 데 문제가있는 경우 디자인 시스템 React Starter Repo를 확인하십시오.
⬆ 위로 돌아갑니다
~3.0.0package.json 파일 (run 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 } 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 파일에 Pancake 모듈 개체를 추가하십시오package.json 파일에 스크립트 및 종속성을 postinstall 팬케이크 추가팬케이크를 설치하려면 노드 패키지 관리자를 사용합니다.
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 에서이 프로젝트를 작성하려는 경우 관리자 쉘을 사용하여 Symlinks를 활성화 하여이 저장소를 복제해야합니다.
git clone -c core.symlinks=true https://github.com/govau/pancake이 프로젝트를 실행하려면 원사를 설치해야합니다.
yarn installyarn build모듈 중 하나에서 개발하려면 그 내부의 시계를 실행합니다.
cd packages/pancake/
yarn watch src/ 폴더 내부에서 파일 만 편집해야합니다. bin/ 폴더 내부의 파일은 트랜스 필러에 의해 덮어 씁니다.
코딩 스타일을보고 그것에 반대하지 않고 작업하십시오. ?
⬆ 위로 돌아갑니다
우리는 상호 의존성을 테스트하고 장황 모드가 켜진 상태에서 디버그하기 위해 스코핑 된 NPM 조직에 4 개의 테스트 모듈을 게시했습니다. 각 버전 내부의 내용의 목록을 아래에서 찾으십시오.
@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 testPancake는 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에 따라 라이센스.
⬆ 위로 돌아갑니다
