Manual de desarrollo de proyectos de andamios

concepto basico

Con el concepto de ingeniería de front-end cada vez más popular, surgió el andamiaje. En pocas palabras, "andamiaje frontal" se refiere a una herramienta para construir rápidamente el código básico de un proyecto seleccionando algunas opciones. El andamiaje de front-end puede evitar efectivamente el mismo marco de código y la configuración básica de nuestro ctrl + C y ctrl + V.

Ideas de andamios

Antes de comenzar a desarrollar el scaffolding CLI, echemos un vistazo a las ideas y veamos varios scaffolding populares en la industria, encontraremos que aunque tienen diferente riqueza funcional y complejidad, generalmente incluyen las siguientes funciones básicas :

Proyecto de compilación CLI

• Genere archivos de configuración basados ​​en la entrada del usuario
• Descargar la plantilla de proyecto especificada
• Generar un nuevo proyecto en el directorio de destino
  

Proyecto de ejecución CLI

• Vista previa del lanzamiento local
• actualización caliente
• Detección de gramática y especificación de código
  

Diagrama de arquitectura de andamios

Comprender el flujo de trabajo general de scaffolding a través del diagrama de arquitectura

Dependencias de complementos

Desarrollar complementos comunes para scaffolding

nombre del complemento	breve descripción
comandante	Una solución completa para la interfaz de línea de comandos de node.js
descargar-git-repo	proyecto git de descarga remota
filete	Arte de palabras
bigote daliniano	motor de plantillas
investigador	Una colección de interfaces de usuario de línea de comandos interactivas comunes
símbolos de registro	Símbolos que proporcionan color para varios niveles de registro
niño_proceso	Ejecutar paquete de comandos
no	estado de espera de la barra de progreso
tiza	colorear fuente

crear andamios

Inicializar el proyecto

Descargue el nodo, cree una nueva carpeta, cmd ingrese el directorio de la carpeta y ejecute: npm init, genere el archivo package.json

{
    
    
  "name": "@gfe/cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    
    
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "xcc",
  "license": "ISC"
}

entrar en proyecto

Modifique el parámetro bin en package.json, coloque específicamente el comando personalizado del usuario y especifique la ubicación del archivo ejecutable. El comando en el contenedor es un comando ejecutable. Si el módulo se instala globalmente, npm lo configurará para el contenedor. El archivo crea una conexión suave global , que se puede ejecutar directamente en la herramienta de línea de comandos

{
    
    
  "name": "@gfe/cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "bin":{
    
    
  	"gfe-cli": "src/gfe-cli.js"
  },
  "scripts": {
    
    
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "xcc",
  "license": "ISC"
}

Cree una nueva carpeta src en el proyecto, agregue gfe-cli.js, el archivo es un archivo de entrada de comandos, la primera línea del archivo debe ser #!/usr/bin/env node , lo que significa que al ejecutar este script, llame a /usr/bin El intérprete del nodo.

Manejar la línea de comando

Establecemos diferentes comandos a través del comandante.
El método de comando se usa para establecer el nombre del comando, el método de descripción se usa para establecer la descripción del comando, el método de alias se usa para establecer la abreviatura del comando [imprescindible para los perezosos] y las opciones se usan para establecer los parámetros requeridos por el comando. Para obtener una documentación más detallada de Commander, puede visitar el sitio web oficial de Commander para verla.
Primero agregamos tres comandos al scaffolding: creación de proyectos, inicialización de proyectos e inicio de proyectos . El código fuente está en src/gfe-cli.js.

plantilla de proyecto

El scaffolding puede ayudarnos a generar rápidamente una estructura y configuración de proyecto específicas. La forma más común es que preparemos un conjunto de plantillas de proyecto generales, fáciles de usar y estandarizadas con anticipación y las almacenemos en la ubicación especificada. Cuando se ejecuta el scaffolding el comando para crear un proyecto, copie directamente la **plantilla preparada** en el directorio de destino.
PD: Hay dos puntos aquí a los que debemos prestar atención:

Método de ubicación de almacenamiento de plantilla de proyecto

El primero se empaqueta junto con el scaffolding. Cuando se instala el scaffolding, la plantilla del proyecto se almacenará en el directorio global. De esta manera, cada vez que se crea un proyecto, la velocidad de copia desde el local es muy rápida, pero la plantilla del proyecto en sí La actualización es más difícil .
La segunda es almacenar la plantilla del proyecto en un almacén remoto (como el almacén de gitlab), de esta manera, cada vez que se crea un proyecto, se descarga dinámicamente a través de una dirección determinada **, y la plantilla del proyecto es fácil de actualizar .
La elección de la segunda opción desacopla la plantilla y el andamiaje para facilitar la actualización y el mantenimiento.
código fuente del código:

#!/usr/bin/env node
const program = require("commander"); // 用于捕获命令
const chalk = require("chalk"); // 用于字体加色
const download = require("download-git-repo"); // 用于下载git的包
const inquirer = require("inquirer"); // 用于与用户输入做交互
const ora = require("ora"); // 进度显示
const symbols = require("log-symbols"); // 信息前面加✔或✖

program
  .version(require("../package.json").version, "-v,--version")
  .command("init <name>")
  .description("初始化项目中...")
  .action((name) => {
    
    
    inquirer
      .prompt([{
    
    
        type: "list", 
        name: "templates", 
        message: "templates:", 
        choices: [{
    
    
          name: "vue",
          value: {
    
    
            gitUrl: "http://***/vue-demo.git",
          }
        },
                  {
    
    
                    name: "react",
                    value: {
    
    
                      gitUrl: "http://***/react-demo.git",
                    }
                  }]
      }])
      .then((answers) => {
    
    
        const {
    
     gitUrl } = answers.templates
        download(
          `${
      
      gitUrl}`,
          `./${
      
      name}`,
          {
    
     clone: true },
          function (err) {
    
    
            if (err) {
    
    
              console.log(err);
            } else {
    
    
              console.log(symbols.success, chalk.green("创建项目成功"));
            }
          }
        );
      });
  });

program.parse(process.argv);

Si el proyecto se descarga, debe ejecutar el comando de shell

En la secuencia de comandos del nodo, ejecute el comando de shell especificado

const {
    
     spawn } =  require('child_process')
// 执行终端命令的子线程
const terminal = async (...args) => {
    
    
  return new Promise((resolve) => {
    
    
    // 子线程
    const proc = spawn(...args)
    // 子线程 proc --终端的输出转到--> 主线程 process
    proc.stdout.pipe(process.stdout)
    proc.stderr.pipe(process.stderr)
    proc.on('close', () => {
    
    
      resolve()
    })
  })
}
module.exports = {
    
    
  terminal
}

const install = async(name) => {
    
    
  const npm = process.platform === 'win32' ? 'npm.cmd' : 'npm'
  await utils.terminal(npm, ['install'], {
    
    cwd: `./${
      
      name}`})
}

// 初始化
module.exports = install

Ejecutar el comando de proceso npm necesita juzgar const npm = process.platform === 'win32' ? 'npm.cmd' : 'npm'

Configurar comandos CLI globales

Después de que nuestro scaffolding se desarrolle y se lance a npm, se puede instalar mediante npm install -g gfe-cli **instalación global** y luego el comando CLI se puede usar directamente.
Sin embargo, para **depuración conveniente y sincronización en tiempo real** modificación durante el proceso de desarrollo, se necesita otra forma de vincular los comandos CLI al global.
Puede ejecutar **npm link** en el directorio gfe-cli, este comando puede vincular el comando bin bajo gfe-cli al global y usarlo directamente.
Sugerencias: Encontré algunas fallas pequeñas al vincular npm, y me gustaría compartir con ustedes que
durante el proceso de desarrollo, es posible que encuentre ** fallas al ejecutar comandos **, como zsh: comando no encontrado: gfe-cli.

• Intente volver a vincular el enlace npm y, si falla, intente eliminar el comando global npm unlink gfe-cli y luego vuelva a vincularlo. En general, esto puede resolver el problema.
• Si aún no funciona, vaya al directorio global y elimine la carpeta gfe-cli
  

publicar configuración

{
    
    
  "name": "@gfe/cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "bin":{
    
    
    "gfe-cli": "src/gfe-cli.js"
  },
  "keywords": [
    "tools",
    "javascript",
    "cli"
  ],
  "scripts": {
    
    
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "xcc",
  "license": "ISC"
}

name es el nombre del paquete, puede escribir directamente el nombre del paquete, como cli, o agregar un dominio, similar a @gfe/cli, @ es seguido por su nombre de usuario registrado npm. key es la palabra clave del paquete.
Archivo .npmrc, archivo de configuración de publicación

registry=https://*******/
email=****
always-auth=true
_auth=****

.npmignorar archivo, ignorar archivos cargados

node_modules/
.babelrc
tsconfig.json
.eslintrc.js

npm publicar publicar

nota de desarrollo

Breve descripción de los módulos ESM y CJS

En los inicios del lenguaje Javascript, no existía el concepto de modularidad. No fue hasta el nacimiento de nodejs que se introdujo el sistema de módulos en js. nodejs usa la especificación CJS (Commonjs), que es el requisito y las exportaciones de módulos que solemos ver. La especificación del módulo del estándar del lenguaje js es ESM (Módulo Ecmascript), que es la sintaxis de importación y exportación que usamos ampliamente en proyectos front-end. nodejs ha admitido gradualmente ESM, y muchos navegadores principales han admitido ESM de forma nativa.

¿El proyecto utiliza ESM o CJS?

Node.js 8.5.0 agrega soporte experimental para ESM. Usar el indicador **–experimental-modules** y agregar el nombre de archivo con el sufijo **.mjs** permite que nodejs ejecute los módulos de importación y exportación de la especificación ESM. Por ejemplo:

node --experimental-modules index.mjs

Node.js 12.17.0 eliminó el indicador **–experimental-modules**. Aunque ESM todavía es experimental, ha sido relativamente estable.
En versiones posteriores, nodejs juzga si el sistema del módulo usa ESM o CJS de acuerdo con el siguiente proceso:

Cómo usar require e import en el mismo archivo

Después del lanzamiento del estándar ES6, el módulo se convirtió en el estándar. El uso estándar es exportar la interfaz con el comando de exportación e importar el módulo. Sin embargo, en nuestro módulo de nodo habitual, usamos la especificación CommonJS, usamos require para importar módulos, y utilice module.exports para exportar
Los módulos que se introducen normalmente en requieren sintaxis, no importan sintaxis. Puede escribir un archivo js que admita tanto la sintaxis requerida como la sintaxis de importación

export const funA = () => {
    
    } ; // 函数funA 
export const funB = () => {
    
    } ; // 函数funB

cambiado a

const funA = () => {
    
    } ; // 函数funA 
const funB = () => {
    
    } ; // 函数funB
module.exports = {
    
    
  funA:funA,
  funB:funB,
}

ejecutar servir.js

const Utils = require('./util')

Nodejs originalmente admite la especificación modular de commonjs, que es el tipo de requisito.
Si desea utilizar la especificación modular de exportación e importación de es6, inicie el método:
modifique el archivo con el sufijo mjs, o modifique el tipo: módulo en el paquete. json

Atención de embalaje enrollable

Por qué usar la herramienta de empaquetado acumulativo

Rollup.js es una herramienta de empaquetado de módulos que puede ayudarlo a comenzar desde un archivo de entrada y empaquetar todos los archivos de módulos usados ​​en un archivo de versión final (muy adecuado para crear una biblioteca de herramientas, que también se empaqueta con Reason acumulativo) Rollup.js tiene
dos funciones importantes, una de las cuales es que utiliza el módulo estándar ES6, lo que significa que puede utilizar directamente la importación y exportación sin introducir babel (por supuesto, en los proyectos actuales, se puede decir que babel es una herramienta imprescindible) Una
importante La característica de Rollup.js se denomina "sacudida de árboles", que puede ayudarlo a eliminar código inútil (es decir, código que no se usa) del archivo final generado. (Esta función se basa en el análisis estático de los módulos ES6, es decir, las variables que solo exportan pero no importan no se empaquetarán en el código final)

Problema 1 informa de un error SyntaxError: Carácter inesperado '!'

La primera línea del archivo de entrada debe agregar el nodo #!/usr/bin/env para usar Rollup para empaquetar e informar errores. Puede configurar este código en rollup.config.js. Dos atributos
del archivo de configuración de resumen: banner y pie de página , estos dos atributos se generarán en el archivo. Puede agregar un nuevo banner de parámetro insertando una cadena personalizada al principio y al final de: '#!/usr/bin/env node'

Pregunta 2 error [!] Error: 'predeterminado' no es exportado por ****

Rollup no es compatible con los módulos CommonJS de forma predeterminada. Puede intentar evitar el uso de la sintaxis de los módulos CommonJS al escribir los suyos propios, pero algunas bibliotecas externas son cjs o umd (empaquetadas por webpack), por lo que el uso de estas bibliotecas externas requiere compatibilidad con los módulos CommonJS que se puede
importar procesamiento rollup-plugin-commonjs

Pregunta 3 error (!) Dependencias no resueltas

1. Ayuda a Rollup a encontrar módulos externos import rollup-plugin-node-resolve
2. Atributo externo: use el paquete acumulativo, necesitamos usar bibliotecas de terceros en nuestra propia biblioteca, como fs, ruta, etc., y no queremos que fs, ruta aparezca en el archivo de paquete generado final
   

Configurar rollup.config.js

import json from 'rollup-plugin-json';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import del from 'rollup-plugin-delete'
import {
    
     dependencies } from './package.json'
const external = Object.keys(dependencies || '')
export default {
    
    
  input: './src/gfe-cli.js',
  output: {
    
    
    file: './dist/gfe-cli.mjs',
    banner: '#!/usr/bin/env node'
  },
  external:[...external, 'fs', 'path'],
  plugins: [
    del({
    
    
      targets: 'dist/*'
    }),
    commonjs(),
    resolve({
    
    
      modulesOnly: true,
      preferBuiltins: true
    }),
    json()
  ],
};

npm publicar nota

Después de que npm publica con éxito la biblioteca privada, ¿no se puede encontrar la dirección de descarga?

Motivo: la dirección de la biblioteca privada no está configurada para descargar.
Por ejemplo: el scaffolding es **@gfe/n-cli**, que debe instalarse globalmente - g debe configurarse
globalmente: abra cmd y localice automáticamente C:\Users\55409>
en la carpeta 55409 Configure el archivo .npmrc en

@gfe:registry=https://****/
registry=https://registry.npm.taobao.org/

@gfe debe corresponder a la dirección de la biblioteca privada, y el resto de las dependencias internas van a npm public