Uno de los retos que en la oficina me plantearon es crear una plantilla de Ionic para que otros la usen, genial verdad? pero eso no es un concepto nuevo, ni la idea del millón de dolares, hay muchos sitios en internet que actualmente venden plantillas, por nombrar algunos Themeforest, ionic market place, y así una lista interminable.
De ahí la idea de crear este post para exponer el código y que lo puedas implementar de forma rápida y sencilla, obviamente mejorando el código.
Empezamos:
1.- ejecutar el comando npm init -y, esto lo que hace es crear un paquete json con todas las características que se necesitan para comenzar a crear mi paquete, tienes que añadirle el nombre del proyecto, version, descripcion, keywords, esto se lo hace en base el asistente.
2.- en la seccón main del package json debes poner el archivo que se va a ejecutar las rutinas para crear la plantilla. En mi caso lo llame index.js
3.- Abre el archivo js con un editor de codigo, yo uso Visual Studio Code.
4.- Escribe el siguiente código:
run();
Listo para ejecutarlo: node index.
Si quieres crear un tipo comando deberias modificar el archivo package.json, debajo de las líneas main: "index.js"
Crea una carpeta llamada bin y dentro de esta carpeta crea un archiv create-template
dentro del archivo create-template añadimos el siguiente código:
finalmente ejecutamos npm install para que se instalen las dependencias.
Ahora para ejecutar el comando debemos crear la referencia al comando ejecutando el siguietne comando:
npm link
Y ejecutamos el comando creado anteriormente: create-template
Saludos.
Pero el reto consistía en crear este template pero que no se distribuya como siempre, a través de un archivo zip. Que alguien lo compra, lo descarga y lo implementa. El reto era que se implemente a través de comando. algo así como un npm install david-template.
Por lo que tocó ir a investigar en san Google y leerme unos 100 blogs en inglés los cuales te enseñan algo parecido pero no exactamente y unos 30 en español que están aún más lejos de lo que queremos.
De ahí la idea de crear este post para exponer el código y que lo puedas implementar de forma rápida y sencilla, obviamente mejorando el código.
Empezamos:
1.- ejecutar el comando npm init -y, esto lo que hace es crear un paquete json con todas las características que se necesitan para comenzar a crear mi paquete, tienes que añadirle el nombre del proyecto, version, descripcion, keywords, esto se lo hace en base el asistente.
2.- en la seccón main del package json debes poner el archivo que se va a ejecutar las rutinas para crear la plantilla. En mi caso lo llame index.js
3.- Abre el archivo js con un editor de codigo, yo uso Visual Studio Code.
4.- Escribe el siguiente código:
const chalk = require('chalk');
const clear = require('clear');
const figlet = require('figlet');
const fs = require('fs');
const inquirer = require('inquirer');
const clone = require('git-clone');
clear();
console.log(
chalk.yellow(
figlet.textSync('David Ortega', { horizontalLayout: 'full' })
)
);
export function run() {
inquirer.prompt({
name:'template',
type:'input',
message:'Ingrese el nombre del template?',
default:"miPlantilla",
validate: function( value ) {
if (value.length) {
return true;
} else {
return 'Por favor ingresa el nombre de la plantilla.';
}
}
})
.then(nombrePlantilla => {
fs.mkdirSync(nombrePlantilla.template);
clone('tu repositorio', nombrePlantilla.template);
console.log("Plantilla Creada");
console.log("Ingrese al directorio:" + nombrePlantilla.template)
console.log("y ejecute el comando Ionic Serve");
})
}
Listo para ejecutarlo: node index.
Si quieres crear un tipo comando deberias modificar el archivo package.json, debajo de las líneas main: "index.js"
"bin": {
"create-template": "bin/create-template"
},
Crea una carpeta llamada bin y dentro de esta carpeta crea un archiv create-template
dentro del archivo create-template añadimos el siguiente código:
#!/usr/bin/env node
require = require('esm')(module /*, options*/);
require('../index').run();
finalmente ejecutamos npm install para que se instalen las dependencias.
Ahora para ejecutar el comando debemos crear la referencia al comando ejecutando el siguietne comando:
npm link
Y ejecutamos el comando creado anteriormente: create-template
Saludos.
Comentarios
Publicar un comentario