El sistema de diseño del gobierno australiano ha sido desmantelado, visite nuestra página de la comunidad para obtener más información.
Pancake es una herramienta para hacer que trabajar con NPM en la parte delantera sea fácil y dulce.
NPM escribió sobre los desafíos que enfrentan los desarrolladores frontend cuando intentan usar NPM. Pancake está abordando aquellos adoptando la idea de pequeños módulos independientes de versiones individuales. Las interdependencias es lo que NPM hace realmente bien y Pancake lo ayudará a mantenerlos planos y errores en los conflictos. Lea más sobre nuestra solución
Pancake verificará sus "peerDependencies" para obtener conflictos y viene con complementos para compilar el contenido de sus módulos para usted y enumera todos los módulos disponibles para que seleccione e instale.
Si está creando un nuevo proyecto usando Pancake, querrá buscar en la creación de sus propios módulos de panqueques.
Pancake viene instalado con componentes del sistema de diseño del gobierno australiano. Para saber si tiene instalado pancake , consulte su archivo package.json para un "pancake": { ... } objeto. Si tiene esto y desea cambiar la salida, mire la sección Configuración de panqueques.
Si tiene problemas con el uso de Sass Globals en un proyecto ReactJS, consulte el sistema de diseño React Repo para obtener un ejemplo.
⬆ De vuelta a la cima
~3.0.0package.json en su raíz (ejecute npm init --yes ) Pancake solo no viene con dependencias, mientras que todos los complementos tienen dependencias fijas a versiones específicas para mantener el impacto de seguridad lo más bajo posible. También enviamos un archivo package-lock.json .
⬆ De vuelta a la cima
Pancake viene con dos niveles diferentes de configuraciones. La configuración global puede persistir en proyectos y configuraciones locales específicas del proyecto.
Para cambiar la configuración global, ejecute Pancake con la bandera --set .
npx pancake --set [settingName] [value]| configuración | valor | por defecto |
|---|---|---|
npmOrg | Este es el alcance de la org NPM | @gov.au |
plugins | Un interruptor para deshabilitar o habilitar complementos | true |
ignorePlugins | Una variedad de complementos a ignorar | [] |
Ejemplo:
npx pancake --set npmOrg yourOrg Para cambiar la configuración local, todo lo que tiene que hacer es incluir un objeto pancake en su archivo package.json . Todas las configuraciones posibles se indican a continuación:
{
"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 eliminar js puede establecer el valor de "name": false y eliminar los valores minified , modules y location .
⬆ De vuelta a la cima
Puede mostrar la ayuda con pancake --help .
-n , --nosave
Tipo: <flag>
El comando evitará que Pancake fusione su configuración local, las completará con los valores predeterminados y los guardará en su package.json . Este tipo de configuración se encoge todas las configuraciones para que sea completamente reproducible. También puede optar por no participar en este comportamiento agregando "auds": { "auto-save": false } en su paquete.json.
npx pancake --nosave -o , --org
Tipo: <flag> [value]
Puede sobrescribir temporalmente el alcance de la organización NPM sujetando esta bandera. Esto puede ser útil para las pruebas. Asegúrese de usar la configuración para un cambio permanente.
npx pancake --org @otherOrg -p , --noplugins
Tipo: <flag>
Puede deshabilitar temporalmente todos los complementos. Esto es ideal para la integración de CI.
npx pancake --noplugins -i , --ignore
Tipo: <flag> [comma separated list]
Puede sobrescribir temporalmente la lista de complementos que se deshabilitarán.
npx pancake --ignore @gov.au/pancake-svg,@gov.au/pancake-js -v , --verbose
Tipo: <flag>
Ejecute panqueque en modo tonto.
npx pancake --verbose⬆ De vuelta a la cima
Puedes usar panqueque con tus propios módulos. Todo lo que tienes que hacer en tus módulos es:
package.jsonpostinstall a su archivo package.jsonPara instalar Pancake, use el Administrador de paquetes de nodo.
npm i @gov.au/pancake
Para asegurarse de que Pancake pueda detectar su módulo entre los otros cientos de paquetes de NPM, debe agregar el objeto pancake-module a su 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"
} La magia del panqueque se encuentra dentro del guión postinstall . Para habilitar Pancake, agrégalo como dependencia y agregue el 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"
} Esto ejecutará Pancake justo después de la instalación y se asegurará de obtener la última versión de la versión 1.0.0. Si tiene que cambiar la configuración (muy probable), en realidad no tiene que desembolsar este proyecto. Puede configurar esas configuraciones a nivel mundial antes de ejecutarla con su script postinstall .
" postinstall " : " pancake --set npmOrg yourOrg && pancake " Agregar dependencias de pares es simple siempre que recuerde agregarlo a las dependencies y peerDependencies al mismo tiempo. De esa manera, NPM instalará la dependencia de los pares y el panqueque puede verificar si tiene conflictos.
{
"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"
}Ahora está listo para publicar sus módulos y comenzar a usar Pancake.
⬆ De vuelta a la cima
Hola ?,
❤️ Nos encanta que estés investigando esta sección. Agradecemos cualquier comentario o solicitud de extracción y estamos súper emocionados acerca de que ponga su propio tiempo en este proyecto. Para que su contribución cuente, lea primero el código y vea cuál era nuestro pensamiento. Haremos lo mismo con el tuyo.
Nota : Si está buscando construir este proyecto en Windows, deberá clonar este repositorio con enlaces simbólicos habilitados con un shell de administrador.
git clone -c core.symlinks=true https://github.com/govau/pancakePara ejecutar este proyecto, deberá tener hilo instalado.
yarn installyarn buildPara desarrollarse en uno de los módulos, ejecute el reloj dentro de él:
cd packages/pancake/
yarn watch ❗️ Asegúrese de editar solo archivo dentro de la carpeta src/ . El transpilador sobrescribe los archivos dentro de la bin/ carpeta.
Mire el estilo de codificación y trabaje con él, no contra él. ?
⬆ De vuelta a la cima
Hemos publicado cuatro módulos de prueba en nuestra organización NPM de ámbito para probar las interdependencias y depurar con el modo verboso activado. Encuentre a continuación una lista de lo que hay dentro de cada versión:
@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.0Tenemos un script de prueba de extremo a extremo que tomará varios escenarios y comparará la salida de panqueques con accesorios.
También usamos pruebas unitarias con broma.
Para ejecutar todas las pruebas, use el siguiente comando:
npm testPancake ha sido probado con Ubuntu 16.04, Mac OS 10.11, 10.12 y Windows 10, todas la versión de nodo que viene con NPM 3 y superior:
v5.0.0v5.12.0v6.9.5v7.0.0v7.4.0v7.5.0v7.6.0v10.0.0⬆ De vuelta a la cima
Copyright (c) Commonwealth of Australia. Licenciado bajo MIT.
⬆ De vuelta a la cima