O sistema de design do governo australiano foi desativado, visite nossa página da comunidade para obter mais informações
A panqueca é uma ferramenta para fazer o trabalho com o NPM no front end de fácil e doce.
O NPM escreveu sobre os desafios que os desenvolvedores de front -end enfrentam ao tentar usar o NPM. A panqueca está abordando aqueles adotando a idéia de pequenos módulos independentes individualmente versionados. As interdependências são o que o NPM faz muito bem e a panqueca o ajudará a mantê -las planas e erradas em conflitos. Leia mais sobre nossa solução
O Pancake verificará suas "peerDependencies" em busca de conflitos e vem com plugins para compilar o conteúdo de seus módulos para você e lista todos os módulos disponíveis para você selecionar e instalar.
Se você estiver criando um novo projeto usando a panqueca, desejará criar seus próprios módulos de panqueca.
A panqueca vem instalada com os componentes do sistema de design do governo australiano. Para saber se você está instalado em pancake , verifique seu arquivo package.json para obter um objeto "pancake": { ... } . Se você tiver isso e deseja alterar a saída, observe a seção Configurações de panqueca.
Se você tiver problemas com o uso do Sass Globals em um projeto ReactJS, consulte o System de design React Starter Repo para obter um exemplo.
⬆ de volta ao topo
~3.0.0package.json na sua raiz (execute npm init --yes ) Somente a panqueca não vem com nenhuma dependência, enquanto todos os plug -ins têm dependências fixas para versões específicas para manter o impacto da segurança o mais baixo possível. Também enviamos um arquivo package-lock.json .
⬆ de volta ao topo
A panqueca vem com dois níveis diferentes de configurações. As configurações globais podem persistir em projetos e configurações locais específicas do projeto.
Para alterar as configurações globais, execute a panqueca com o sinalizador --set .
npx pancake --set [settingName] [value]| contexto | valor | padrão |
|---|---|---|
npmOrg | Este é o escopo da NPM Org | @gov.au |
plugins | Uma mudança para desativar ou habilitar plugins | true |
ignorePlugins | Uma variedade de plugins a ser ignorada | [] |
Exemplo:
npx pancake --set npmOrg yourOrg Para alterar as configurações locais, tudo o que você precisa fazer é incluir um objeto pancake no seu arquivo package.json . Todas as configurações possíveis são declaradas abaixo:
{
"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
}
}
}
} Para remover js você pode definir o valor de "name": false e Remover os valores minified , modules e location .
⬆ de volta ao topo
Você pode exibir a ajuda com pancake --help .
-n , --nosave
TIPO: <flag>
O comando impedirá a panqueca de mesclar suas configurações locais, preencher -as com os padrões e salvá -los em seu package.json . Isso meio que encolherá todas as configurações para que você seja completamente reproduzível. Você também pode optar por não participar desse comportamento adicionando "auds": { "auto-save": false } no seu package.json.
npx pancake --nosave -o , --org
TIPO: <flag> [value]
Você pode substituir temporariamente o escopo da NPM ORG, suando essa bandeira. Isso pode ser útil para testes. Certifique -se de usar as configurações para uma mudança permanente.
npx pancake --org @otherOrg -p , --noplugins
TIPO: <flag>
Você pode desativar temporariamente todos os plugins. Isso é ótimo para integração de IC.
npx pancake --noplugins -i , --ignore
TIPO: <flag> [comma separated list]
Você pode substituir temporariamente a lista de plugins a ser desativada.
npx pancake --ignore @gov.au/pancake-svg,@gov.au/pancake-js -v , --verbose
TIPO: <flag>
Execute a panqueca no modo bobo detalhado.
npx pancake --verbose⬆ de volta ao topo
Você pode usar panqueca com seus próprios módulos. Tudo o que você precisa fazer em seus módulos é:
package.jsonpostinstall panqueca ao seu arquivo package.jsonPara instalar o PanCake, use o Node Package Manager.
npm i @gov.au/pancake
Para garantir que a panqueca possa detectar seu módulo entre os outros pacotes de cem NPM, você deve adicionar o objeto pancake-module ao seu objeto 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"
} A magia da panqueca está dentro do script postinstall . Para ativar a panqueca, adicione -a como uma dependência e adicione o script:
{
"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"
} Isso será executado em panqueca logo após a instalação e certifique -se de obter sempre a versão mais recente da versão 1.0.0. Se você precisar alterar as configurações (muito provável), não precisará bifurcar este projeto. Você pode definir essas configurações globalmente antes de executá -las com seu script postinstall .
" postinstall " : " pancake --set npmOrg yourOrg && pancake " A adição de dependências de pares é simples, desde que você se lembre de adicioná -la às dependencies e peerDependencies . Dessa forma, o NPM instalará a dependência e a panqueca dos colegas podem verificar se você tiver conflitos.
{
"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"
}Agora você está pronto para publicar seus módulos e começar a usar panqueca.
⬆ de volta ao topo
Olá ?,
❤️ Nós amamos que você está olhando nesta seção. Congratulamo -nos com qualquer feedback ou solicitação de puxar e estamos super empolgados com você dedicar seu próprio tempo a este projeto. Para fazer sua contribuição contar, leia o código primeiro e veja qual foi o nosso pensamento. Faremos o mesmo com o seu.
NOTA : Se você deseja criar este projeto no Windows, precisará clonar esse repositório com symblinks ativados usando um shell do administrador.
git clone -c core.symlinks=true https://github.com/govau/pancakePara executar este projeto, você precisará instalar o fio.
yarn installyarn buildPara desenvolver em um dos módulos, execute o relógio dentro dele:
cd packages/pancake/
yarn watch ❗️ Certifique -se de editar apenas o arquivo dentro da pasta src/ . Os arquivos dentro da bin/ pasta são substituídos pelo transpiler.
Por favor, olhe para o estilo de codificação e trabalhe com ele, não contra ele. ?
⬆ de volta ao topo
Publicamos quatro módulos de teste em nossa organização NPM com escopo para testar interdependências e depurar com o modo detalhado. Encontre abaixo uma lista do que está dentro de cada versão:
@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.0Temos um script de teste de ponta a ponta que levará vários cenários e comparará a saída da panqueca com os equipamentos.
Também usamos testes de unidade com JEST.
Para executar todos os testes, use o comando abaixo:
npm testO Pancake foi testado com o Ubuntu 16.04, Mac OS 10.11, 10.12 e Windows 10 All Node Version vindo com o NPM 3 e superior:
v5.0.0v5.12.0v6.9.5v7.0.0v7.4.0v7.5.0v7.6.0v10.0.0⬆ de volta ao topo
Copyright (c) Commonwealth of Australia. Licenciado sob o MIT.
⬆ de volta ao topo