@composi/create-composi-app:

• create-composi-app
• Instalación
• Uso

Uso

Cómo Crear los Proyectos

Como se menciona en la documentación de instalación, creas un nuevo proyecto predeterminado en el escritorio por ejecutar composi-create-app con el signo -n seguido de un nombre para el proyecto:

create-composi-app -n "My Proj"

Puede crear un proyecto en un lugar específico proporcionando un argumento como ruta para el proyecto, usand el signo -p:

create-composi-app -n "Mi Proyecto" -p "~/dev/proyectos-personales

Esto creará el proyecto "Mi Proyecto" en "~/dev/proyectos-personales".

Compilar & Lanzar

Usa la terminal para cd a la carpeta del proyecto y ejecuta:

npm i && npm start

Esto instalará las dependencias del proyecto, creará el proyecto, iniciará observadores e iniciará el proyecto en el navegador predeterminado. Cualquier cambio que realice en los archivos en la carpeta src del proyecto activará otra compilación y recargará el código actualizado en el navegador.

Otras Tareas

Cada proyecto Composi viene configurado para varias otras tareas útiles. Esto implica guía de estilo para el código, limpieza de la carpeta dist del proyecto y creación de una versión del proyecto lista para producción.

Eslint

Si tiene su proyecto en ejecución, puede abrir otra pestaña en su terminal, cd a su proyecto y ejecutar:

npm run lint

Su proyecto tiene un archivo .eslintrc.json en la raíz del proyecto. Puedes editar esto para que la línea funcione de la manera que quieras.

Si el JavaScript de su proyecto en la carpeta src viola alguna regla de Eslint, imprimirá el número de línea y la regla de salida rota en la consola. Usa esa información para solucionar el problema.

Lée la documentación de las reglas de eslint para aprender cómo personalizar la verificación del estilo de código para su proyecto.

Prettier

El proyecto viene configurado para usar Prettier en su código. Solo cd al proyecto y ejecute:

npm run format

El valor predeterminado es convertir las comillas dobles en una sola y eliminar todos los puntos y coma no necesarios. Si prefiere tener comillas dobles de forma predeterminada y apreciar los puntos y coma en su código, abre el archivo package.json y cambia esta línea:

"format": "prettier --no-semi --single-quote --write ./lib/*.js"

To:

"format": "prettier --write ./lib/*.js"

Limpiar y Recompilar

Los archivos finales que necesita se envían a la carpeta dist. Durante un período de tiempo, es posible que esta carpeta contenga la salida de archivos que ya no están en su carpeta src. Puede limpiar y repoblar la carpeta dist con el siguiente comando:

npm run clean && npm run build:fresh

If you want to launch your project after clean, then run this:

npm run clean && npm start

Versión de Producción

Para crear una versión del proyector para producción, cd a la carpeta y ejecuta:

npm run build:production

Esto creará una nueva carpeta en el mismo directorio que su proyecto, pero con "-production" anexada a su nombre. Por ejemplo, si el nombre de su proyecto era "mi-proyecto", esto crearía la versión de producción llamada "my-proj-production" en la misma carpeta cómo el proyecto original. Dentro de este proyecto encontrarás el archivo index.html y la carpeta dist. Puedes ponerlos donde sea necesario para la producción. Todos los enlaces en el index.html usan rutas absolutas, por lo que la ubicación de la carpeta dist puede estar en la carpeta pública, o como sea para que el servidor funcione apropiadamente.

En Cuanto a CSS

Dado que el base para Composi es el de los navegadores modernos, no creemos que realmente necesite Sass o Less. Si observa el CSS del proyecto, verá que utiliza variables de CSS para colores. Técnicamente estas se llaman propiedades personalizadas. Funcionan igual que los variables en Sass y Less. Si utiliza BEM, no tendrá necesidad de selectores anidados. Estos son más lentos de cualquier manera. Y para el diseño,puede utilizar flex box y maquetación con cuadrícula CSS.

Atajo

En caso de que te molesta escribir create-composi-app todo el tiempo, puedes crear un acceso directo para usar en la terminal. Para Linux y macOS, abre el archivo .bashprofile, o crea uno si no existe, y agrega lo siguiente:

alias cca="create-composi-app"

Después de guardar, cierra la terminal y ábrela de nuevo. Ahora puedes usar cca en vez de create-composi-app. Para Windows, abre el Prompt (línea de comando) y ejecuta:

doskey cca=create-composi-app