澳大利亚政府设计系统已退役,访问我们的社区页面以获取更多信息
煎饼是使与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)澳大利亚联邦。根据麻省理工学院许可。
⬆回到顶部