Cómo utilizar Node.js para escribir andamios CLI

¿Qué es el andamio frontal?

Primero revisemos la definición de "andamio" en la Enciclopedia Baidu:

Un andamio es una plataforma de trabajo creada para garantizar el buen desarrollo de diversos procesos constructivos.

A medida que el concepto de ingeniería front-end se vuelve cada vez más popular, surgieron los andamios front-end.

En pocas palabras, el "andamio front-end" se refiere a una herramienta que construye rápidamente el código básico de un proyecto seleccionando algunas opciones y puede evitar efectivamente el mismo marco de código y configuración básica que nuestro ctrl + C y ctrl + V.

fondo

Cuando estemos listos para desarrollar un nuevo proyecto:

Es relativamente difícil construir un entorno básico de proyecto completo (pila de tecnología completa, funciones auxiliares ricas y teniendo en cuenta diferentes entornos) en un corto período de tiempo;
Los diferentes requisitos del proyecto y situaciones de equipo nos hacen imposible permanecer sin cambios al construir el entorno básico del proyecto;

Y las herramientas de andamio frontales:

Puede ayudarnos a generar rápidamente el código básico del proyecto;
La plantilla de proyecto de la herramienta de andamio ha sido refinada y probada por los desarrolladores y, hasta cierto punto, representa las mejores prácticas de un determinado tipo de proyecto;
La herramienta de andamiaje admite el uso de plantillas personalizadas, que podemos "personalizar" según diferentes proyectos;

En resumen: los andamios son una herramienta que le ayuda a reducir el trabajo repetitivo y realizar trabajos repetitivos.

El "andamio" frontal relativamente estable y sobresaliente tiene las siguientes categorías:

Andamios Vue/React
Usa Node y yeoman para construir tu propio andamio
Construya un andamio de paquete web desde cero

¿Qué es el andamio vue?

Vue CLI es un sistema completo para un desarrollo rápido basado en Vue.js
El autor nos ha ayudado a configurar la mayor parte del entorno de desarrollo. Podemos descargar el andamio y desarrollar directamente sin tener que pensar en construir estos entornos de herramientas.

Este nuevo paquete se puede instalar usando cualquiera de los siguientes comandos:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Ejecute el siguiente comando para crear un nuevo proyecto:

vue create kk-test

Se le pedirá que seleccione un ajuste preestablecido. Puede elegir el ajuste preestablecido predeterminado que contiene la configuración básica de Babel + ESLint, o puede elegir "Seleccionar funciones manualmente" para seleccionar las funciones que necesita.
directorio predeterminado

El directorio de código generado es el siguiente:
[La transferencia de la imagen del enlace externo falló. El sitio de origen puede tener un mecanismo anti-leeching. Se recomienda guardar la imagen y cargarla directamente (img-sl7XXtHE-1687761801189) (…/images/ kk-test-catalog.png)]

Esta configuración predeterminada es excelente para crear rápidamente prototipos de un nuevo proyecto, mientras que la configuración manual proporciona más opciones que son más necesarias para proyectos orientados a la producción.
Ajuste manual

Ahora tomemos any-cli como ejemplo para escribir nuestra propia herramienta de andamiaje.

principio fundamental

yoemanRequerido para proyectos de construcción yoeman-generator. yoeman-generatorEs esencialmente una plantilla con una estructura de archivos completa. Los usuarios deben descargar manualmente estas plantillas en su área local y luego yoemanse generarán automáticamente varios proyectos basados en estas plantillas.

vue-cli proporciona una gran cantidad de opciones y funciones de configuración, pero su esencia es extraer diferentes plantillas del almacén remoto al local, en lugar de alguna tecnología negra "generada localmente".

Desde este punto de vista, la idea está ahí: primero crear diferentes plantillas y luego el andamio generará proyectos reales basados en las instrucciones del usuario para hacer referencia a las plantillas.

Las plantillas pueden integrarse en andamios o implementarse en almacenes remotos.

Integradas en andamios, utilice node fileacciones para clonar plantillas localmente.

La ventaja es que no es necesario crear un nuevo almacén para guardar la plantilla. Especialmente cuando hay varias plantillas de proyecto, como init pcgenerar init mobiledos proyectos diferentes por separado, solo necesitamos un almacén para guardar el andamio.

La segunda ventaja: independientemente de los cambios de estructura o plantilla, solo necesita enviarlos una vez.
Implemente en un almacén remoto y git cloneclone el proyecto localmente.

La ventaja es que cada vez que hay un cambio de código en la plantilla, no es necesario que el usuario actualice el andamio localmente.

Si la plantilla está integrada en el andamio, cada vez que se cambia la plantilla, debido a que está en el mismo almacén, el usuario necesita actualizar el andamio. Es diferente cuando se implementa en un almacén remoto: solo necesitamos git clone para obtener la plantilla más reciente.

proceso general

Según la práctica estándar, primero veamos el proceso general.

添加模板->输入模板名->是否有重名模板?-添加成功:给出提示

删除模板->输入模板名->是否有模板?-删除成功:给出提示

模板列表->列出所有模板

初始化模板-输入模板名-是否有模板?-输入模块名-克隆远程仓库到本地模块-切换分支:给出提示

Puntos técnicos

proceso.cwd()与__dirname

Los comandos se encuentran en andamios y los lugares donde se ejecutan los comandos suelen estar en proyectos de plantilla.

Por ejemplo, la ruta de scaffolding es D:\Documents\Downloads\any-cli\src\commandy la ruta para ejecutar el comando de scaffolding global es C:\Users\Administrator.

a.jsPor ejemplo: el código de scaffolding quiere leer los archivos en el directorio de scaffolding y escribirlos en el proyecto de plantilla (donde se ejecuta el comando de scaffolding global) b.js.

Entonces la ruta de readFile es path.resolve(__dirname,'a.js'),

La ruta de escritura del archivo es path.resolve(process.cwd(),'b.js').

Process.cwd(): el directorio de trabajo cuando se ejecuta el proceso actual de Node.js:
__dirname: nombre del directorio del módulo actual

papelera

Muchos módulos npm tienen ejecutables que desean instalarse en la ruta global del sistema.

Es necesario proporcionar un campo bin en package.json, que es una asignación de nombres de comandos a rutas de archivos. como sigue:

"bin": {
    "any": "./bin/any.js"
},

Esto asigna el comando any al ejecutable local ./bin/any. Es decir, cuando ejecuta cualquier comando en la línea de comando, se ejecutará el archivo ejecutable ./bin/any.

Para la instalación global, npm utilizará enlaces simbólicos para vincular estos archivos al directorio /usr/local/bin, donde se encuentran todos los comandos binarios del sistema.
Si se instala localmente, se vinculará al directorio ./node_modules/.bin. Solo tendrá efecto cuando se ejecute cualquier comando en el directorio actual.

Si solo tiene un archivo ejecutable con el mismo nombre que el nombre del paquete. Entonces puedes usar una cadena (ruta del archivo), como:

{
    "name": "any-cli",
    "version": "1.2.5",
    "bin": "./bin/any"
}

Equivalente a:

{
    "name": "any-cli",
    "version": "1.2.5",
    "bin": {
        "any-cli": "./bin/any.js"
    }
}

enlace npm

Directorio local vinculado al módulo global

npm link puede vincular el directorio local al módulo global.

Para los desarrolladores de módulos, este es el comando más valioso. Por ejemplo, cuando desarrollamos any-cliun módulo, necesitamos usarlo en la línea de comando anypara probar nuestro código (si no se publica durante el desarrollo, el módulo no se puede instalar globalmente). No te preocupes, es muy fácil con npm link.

Por ejemplo, en nuestro any-cliproyecto package.json, hay un comando como el siguiente:
```
"bin": {
    "any": "./bin/any.js"
},
```
Usando el enlace npm desde la línea de comando
```
$ npm link
```
Obtuve el siguiente resultado
```
/usr/local/bin/any -> /usr/local/lib/node_modules/any-cli/bin/any.js
/usr/local/lib/node_modules/any-cli -> /Users/{Username}/work/any-cli
```
Debajo de la ventana:
```
C:\Users\Administrator\AppData\Roaming\npm\any -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\any-cli\bin\any.js
C:\Users\Administrator\AppData\Roaming\npm\node_modules\any-cli -> D:\Documents\Downloads\any-cli
```
Ingrese a los directorios /usr/local/bin y /usr/local/lib/node_modules para verlos respectivamente. Descubrimos que contiene más anyarchivos y any-clidirectorios ejecutables.
De esta forma, cada vez que haya un cambio en el almacén local, también se actualizará el comando global. Luego podremos desarrollar y probar al mismo tiempo .
El directorio local hace referencia al módulo global

Si tiene otros módulos temp-clique dependen del any-climódulo, puede usar el siguiente comando para anyvincularlo globalmente al módulo actual.
```
$ cd C:\temp-cli
$ npm link any-cli # 把全局模式的模块链接到本地
```
El comando npm link any-cli buscará /usr/local/lib/node_modulesel módulo any-cli en el directorio y, después de encontrar el módulo, vinculará /usr/local/lib/node_modules/any-cliel directorio al temp-clidirectorio actual ./node_modules/any-cli.

Ahora cualquier cambio en el módulo any-cli se asignará directamente a temp-cli.

Otros campos: motor y motorEstricto (en pakeage.js)

node7.6.0开始支持async，如何保证用户本地安装node7.6.0以上版本呢

motor
Puede instalar versiones específicas del nodo localmente:
```
"engines": { "install-node": "7.6.0" }
```
También puede utilizar enginescampos para especificar qué npmversión inicializa mejor su programa, como por ejemplo:
```
{ "engines" : { "npm" : "~1.0.20" } }
```
motorEstricto

Si está seguro de que el módulo solo funcionará correctamente con la versión especificada por el parámetro de motores, puede package.jsonconfigurarlo en el archivo engineStrict:true, que anulará la engine-strictconfiguración del usuario.
Esta característica ha quedado obsoleta en npm 3.0.0.

Paquete de terceros: pre-commit/ora/commander/chalk

pre-commit: script de enlace Git útil para identificar problemas simples antes de comprometerse con la revisión del código;
Commander: es un módulo ligero de Nodejs que proporciona potentes funciones para la entrada de línea de comandos del usuario y el análisis de parámetros;
tiza: se utiliza para generar texto en diferentes colores en la línea de comando;
ora: utilizado para mostrar el efecto de carga, similar al efecto de carga;

archivo de código

crear any-cliproyecto

mkdir any-cli
cd any-cli
git init && npm init

contenido del paquete.json

{
  "name": "any-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "pub": "npm version patch && npm publish",
    "pre-commit": "eslint src"
  },
  "author": "kk",
  "devDependencies": {
    "eslint": "^3.16.1",
    "eslint-config-airbnb": "^12.0.0",
    "eslint-plugin-babel": "^3.0.0",
    "eslint-plugin-import": "^1.6.1",
    "eslint-plugin-jsx-a11y": "^2.0.1",
    "eslint-plugin-markdown": "*",
    "eslint-plugin-react": "^6.3.0",
    "eslint-tinker": "^0.3.2",
    "pre-commit": "^1.2.2"
  },
  "dependencies": {
    "chalk": "^1.1.3",
    "child_process": "^1.0.2",
    "commander": "^2.9.0",
    "prompt": "^1.0.0"
  },
  "engines": {
    "install-node": "7.6.0"
  },
  "pre-commit": [
    "pre-commit"
  ],
  "bin": {
    "any": "./bin/any.js"
  },
  "license": "ISC"
}

La configuración bajo el campo bin se trata como un comando ejecutable de línea de comando. Señale cualquier archivo en /bin.
Los motores de campo se utilizan para instalar el nodo de la versión 7.6.0 en el directorio actual. Puede usar la función asíncrona directamente sin usar el módulo co.
La confirmación previa se utiliza para verificar el código antes de enviarlo y ejecutar el script de confirmación previa, que es eslint.

Cree la carpeta /bin en el directorio raíz y cree cualquier archivo.

mkdir bin

Este /bin/any es el archivo de entrada de todo el scaffolding, por lo que lo escribimos primero.

cd bin
cd.> any.js

#!/usr/bin/env node //解决不同的用户node路径不同的问题，可以让系统动态的去查找node来执行你的脚本文件
const add = require('../src/command/add')
const list = require('../src/command/list')
const init = require('../src/command/init')
const del = require('../src/command/del')
const program = require('commander')
const { version } = require('../package')

// 定义当前版本
program
.version(version)

program.parse(process.argv)
if (!program.args.length) {
  program.help()
}

Continuamos agregando código en /bin/any

// 定义使用方法
/*
* 添加模板
* */
program
.command('add')
.description('add template')
.alias('a')
.action(add)

/*
 * 删除模板
 * */
program
.command('del')
.description('Delete a template')
.alias('d')
.action(del)

/*
 * 模板列表
 * */
program
.command('list')
.description('List all the templates')
.alias('l')
.action(list)

/*
 * 删除初始化
 * */
program
.command('init')
.description('Generate a new project')
.alias('i')
.action(init)

El comando se usa para configurar los parámetros de cualquier comando, el alias configura la abreviatura y la acción configura qué función ejecutar.

otro:

commander 的具体使用方法在这里就不展开了，可以直接到 [官网][2] 去看详细的文档。

Ejecute npm link para vincular el proyecto actual al global. De esta manera, puede usar directamente el comando any en la línea de comando para probar el código debajo de /bin/any

// D:\Documents\Downloads\any-cli
npm link

Utilice el comando any para ver el siguiente resultado, que demuestra que se ha escrito el archivo de entrada.

  Usage: any [options] [command]


  Commands:

    add|a    add template
    del|d    Delete a template
    list|l   List all the templates
    init|i   Generate a new project

  Options:

    -h, --help     output usage information
    -V, --version  output the version number

A continuación, creamos el directorio src/command,

Cree los archivos correspondientes a los cuatro parámetros ahora mismo.

El contenido del archivo es el código comercial específico (correspondiente a la inicialización de adición, eliminación y consulta respectivamente),

No se hará ninguna introducción aquí. Consulte el enlace de github .