El artículo anterior compartió el desarrollo, los ejemplos y los documentos de la biblioteca de componentes de la biblioteca de componentes. Este artículo comparte el desarrollo de la biblioteca de componentes cli.
1 ¿Por qué desarrollar la biblioteca de componentes cli?
Revise los pasos completos de desarrollo de un nuevo componente:
1 Cree el directorio de componentes xxx en el directorio de paquetes:
1.1 Utilice pnpm para inicializar package.json y modifique el atributo de nombre;
1.2 Cree el directorio src y el archivo index.ts en este directorio;
1.3 Cree el archivo type.ts y index.tsx en el directorio src / archivo index.vue;
2 En el módulo de entrada paquetes/yyg-demo-ui de la biblioteca de componentes:
2.1 Utilice pnpm install para instalar xxx creado en 1.1;
2.2 Introduzca xxx en paquetes/xxx-ui/index.ts y agréguelo a la matriz de componentes;
3 paquetes/scss/components/ directorio:
3.1 Crear _xxx.module.scss en este directorio;
3.2 Introducir _xxx.module.scss en index.scss en este directorio;
4 Documentación de la biblioteca de componentes:
4.1 Cree el archivo xxx.md en el directorio docs/components;
4.2 Cree el directorio xxx en el directorio docs/demos y cree el archivo xxx.vue en este directorio;
4.3 Agregue componentes en docs/components. elemento de menú ts;
Este paso es una operación de proceso mecanizado, que implica la creación o modificación de más de diez archivos, lo que requiere mucho tiempo y es un trabajo puramente manual. En este caso, puede utilizar herramientas para completar estas operaciones por nosotros, desarrollar una CLI, ejecutar comandos, ingresar el nombre del componente para crear automáticamente el componente y completar las operaciones anteriores, para que pueda concentrarse en el desarrollo de componentes y negocios.
2 Tecnologías utilizadas para desarrollar cli
Hay muchas bibliotecas para desarrollar cli. Brother Yaya está utilizando la pila de tecnología más tradicional aquí. Preste atención al número de versión cuando utilice las siguientes bibliotecas:
| Biblioteca | Versión | efecto |
|---|---|---|
| comandante | ^9.4.1 | Recibir comandos de entrada y analizar parámetros de comandos |
| tiza | 4.1.2 | Color del texto de la salida de la consola |
| investigador | 8.2.5 | Interacción de la línea de comando, solicitar al usuario que ingrese en la línea de comando y obtener el contenido ingresado por el usuario |
| símbolos de registro | 4.1.0 | Iconos generados por la consola, como éxito, fracaso y otros estados. |
| no | 5.4.1 | Mostrar cargando en la consola. |
| shelljs | ^0.8.5 | Ejecute comandos cmd, como cd, pnpm install, etc. |
3 Construir un marco de desarrollo CLI
Con la preparación de conocimientos anterior, ingresemos al cli real:
3.1 Inicializar el módulo cli
Ingrese al directorio cli en la línea de comando y aún use pnpm para inicializar:
pnpm init
Modifique el atributo de nombre del archivo package.json generado :
{
"name": "@yyg-demo-ui/cli",
"version": "1.0.0",
"description": "命令行工具",
"author": "程序员优雅哥",
"license": "ISC"
}
Cree el archivo de configuración ts tsconfig.json en el directorio cli :
{
"compilerOptions": {
"target": "es2015",
"lib": [
"es2015"
],
"module": "commonjs",
"rootDir": "./",
"allowJs": true,
"isolatedModules": false,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
Cree el archivo index.ts en el directorio cli como entrada:
#!/usr/bin/env node
console.log('hello cli!')
La primera línea del archivo no se puede omitir. Esta oración significa usar el nodo para ejecutar el archivo y encontrar el ejecutor del nodo en la variable de entorno /use/bin/env.
3.2 ts-node ejecuta el archivo ts
Con el archivo de entrada ¿cómo ejecutarlo? Actualmente, no hay sintaxis de TypeScript en index.ts. Puede usar el nodo index.js para ejecutarlo. Sin embargo, cuando hay sintaxis de TypeScript, necesita tsc para compilar el archivo ts primero y luego usar el comando de nodo para ejecutarlo. . Esto es problemático de ejecutar cada vez, afortunadamente, puedes usar ts-node para ejecutarlo.
En el directorio cli , siga ts-node como dependencia de desarrollo:
pnpm install ts-node -D
Puede intentar ejecutar ts-node index.ts en la línea de comando .
No es elegante ejecutar así directamente. El hermano Yaya preferiría agregar scripts al paquete cli.json :
"scripts": {
"gen": "ts-node ./index.ts create"
},
En el comando gen anterior, se agrega un parámetro create , que se analizará más adelante.
Vuelva a ejecutar en la línea de comando:
pnpm run gen
La consola puede generar hello cli! normalmente y el archivo ts se puede ejecutar normalmente.
3.3 Directorio de código fuente
El index.ts creado anteriormente es el punto de entrada para la ejecución del comando. Ahora creamos el directorio src en el cli para almacenar el código fuente y creamos index.ts en src como el punto de entrada para el código fuente. Primero, defina una entrada función en el archivo:
src/index.ts :
export const mainEntry = () => {
console.log('hello cli mainEntry')
}
Llame a esta función en el index.ts externo ( cli/index.ts ):
#!/usr/bin/env node
import {
mainEntry } from './src'
mainEntry()
Ejecute pnpm run gen para probar si el programa se ejecuta normalmente.
3.4 Análisis de parámetros
El comando gen definido anteriormente lleva el parámetro create.¿Cómo analizar este parámetro? Esto se puede hacer usando la biblioteca Commander .
Instale el comandante en cli :
pnpm install commander -D
Modifique el archivo cli/src/index.ts y use Commander para analizar los parámetros:
import {
program } from 'commander'
export const mainEntry = () => {
console.log('hello cli mainEntry')
program.version(require('../package').version)
.usage('<command> [arguments]')
program.command('create')
.description('create a new component')
.alias('c')
.action(() => {
console.log('创建组件')
})
program.parse(process.argv)
if (!program.args.length) {
program.help()
}
}
Si ejecuta ts-node index.ts directamente , se generará ayuda sobre el uso del comando:
hello cli mainEntry
Usage: index <command> [arguments]
Options:
-V, --version output the version number
-h, --help display help for command
Commands:
create|c create a new component
help [command] display help for command
Ejecute pnpm run gen (es decir, ts-node index.ts create ), ingresará la función de devolución de llamada de acción del comando de creación:
hello cli mainEntry
创建组件
Cree el comando de directorio en el directorio cli/src/ y cree el archivo create-component.ts en el directorio . Este archivo se utiliza para procesar el contenido ejecutado cuando se crea el parámetro (es decir, crear archivos de directorio relacionados con componentes, etc. .):
export const createComponent = () => {
console.log('创建新组建')
}
Este archivo exporta la función createComponent . Implementaremos la lógica de implementación interna de esta función en el próximo artículo. Este artículo primero configura el marco cli.
Modifique el archivo cli/src/index.ts , primero introduzca la función createComponent y luego llámela en la acción del comando create :
...
import {
createComponent } from './command/create-component'
export const mainEntry = () => {
...
program.command('create')
...
action(createComponent)
...
}
Cuando se ejecuta el comando gen , se llamará a la función createComponent .
3.5 Interacción del usuario
En createComponent , primero se debe solicitar al desarrollador del componente que ingrese el nombre, el nombre chino y el tipo de componente (tsx, vue) del componente. En este momento, se puede utilizar el investigador para lograr esto. Primero instale las dependencias en cli . Para evitar problemas, instalamos otras dependencias juntas:
pnpm install [email protected] [email protected] @types/[email protected] [email protected] [email protected] shelljs @types/shelljs -D
Luego defina el mensaje interactivo y el nombre de la variable en create-component.ts :
import inquirer, {
QuestionCollection } from 'inquirer'
// 交互提示
const questions: QuestionCollection = [
{
name: 'componentName',
message: 'Input the component name: ',
default: ''
},
{
name: 'description',
message: 'Input the component description: ',
default: ''
},
{
type: 'list',
name: 'componentType',
message: 'Choose the component type: ',
choices: [
'tsx', 'vue'
]
}
]
Finalmente, use el cuestionario en la función createComponent para implementar información de solicitud interactiva:
const createNewComponent = (componentName: string, description: string, componentType: string) => {
console.log(componentName, description, componentType)
}
export const createComponent = () => {
inquirer.prompt(questions).then(({
componentName, description, componentType }) => {
createNewComponent(componentName, description, componentType)
})
}
El efecto de ejecutar pnpm run gen es el siguiente:
En este punto, hemos creado el marco de la biblioteca de componentes cli, solo necesitamos implementar la función createNewComponent en esta función para crear directorios, archivos, ejecutar comandos, etc.
3.6 Embellecer el registro
Juguemos a algo elegante al final de este artículo . Si usa console.log directamente para generar, solo será blanco y negro, lo cual no es elegante. Podemos usar tiza para cambiar el color del texto de salida y agregar algunos íconos a través de símbolos de registro . Primero, cree el directorio util en src y cree el archivo log-utils.ts en este directorio para encapsular la versión elegante de console.log :
import chalk from 'chalk'
import logSymbols from 'log-symbols'
export const r = (msg: string, showIcon = true): void => {
if (showIcon) {
console.log(logSymbols.error, chalk.red(msg))
} else {
console.log(chalk.red(msg))
}
}
export const g = (msg: string, showIcon = true): void => {
if (showIcon) {
console.log(logSymbols.success, chalk.green(msg))
} else {
console.log(chalk.green(msg))
}
}
export const c = (msg: string): void => {
console.log(logSymbols.info, chalk.cyan(msg))
}
Este archivo exporta tres funciones: r, g y c. Es muy fácil utilizar otros archivos:
c('yyg-demo-ui cli 工具')
Este artículo ha creado el marco cli. A continuación, completaremos la función createNewComponent y realizaremos todo el proceso de creación de componentes.
Gracias por leer este artículo, su ID de trabajo (el mismo nombre es "Programador Elegant Brother") y manténgase actualizado con el artículo lo antes posible.