Hablemos de package.json y los campos de scripts más comunes.

La auto-salvación de una chica.
Mi biblioteca de herramientas de código abierto: Prepárese para aprender después de mdollar
: unocss, mecanismo de recolección de basura del navegador (v8)

Prefacio

En el desarrollo diario, el desarrollo front-end actual ha sido reemplazado por tres marcos principales, los más comunes son vue y reaccionar. Al desarrollar estos proyectos, debe entrar en contacto con el archivo package.json. Pero, ¿realmente entiende? ¿Este archivo?

¿Qué es el paquete.json?

El archivo package.json es un archivo en formato JSON que contiene metadatos e información de dependencia para el proyecto Node.js. Es el núcleo del sistema Node.js y el archivo de configuración de npm. Con el archivo package.json, puede administrar e instalar fácilmente los módulos externos que requiere su proyecto, así como definir algunos scripts que se pueden ejecutar en la línea de comandos. El archivo package.json también hace que su proyecto sea más reconocible y utilizable por otros desarrolladores, ya que proporciona información sobre el nombre, la descripción, el autor, la licencia y más de su proyecto.

Explicación detallada de la estructura del archivo package.json

El archivo package.json es un objeto compuesto por pares clave-valor, cada par clave-valor tiene un significado y una función específicos. A continuación se muestra un ejemplo de un archivo package.json:

{
    
    
  "name": "my-project",
  "version": "1.0.0",
  "description": "一个测试项目",
  "main": "index.js",
  "scripts": {
    
    
    "start": "node index.js",
    "test": "mocha"
  },
  "dependencies": {
    
    
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    
    
    "mocha": "^9.1.3"
  },
  "author": "作者名字 <[email protected]>",
  "license": "MIT",
  "homepage": "https://example.com/my-project",
  "bugs": {
    
    
    "url": "https://github.com/myname/my-project/issues"
  },
  "repository": {
    
    
    "type": "git",
    "url": "https://github.com/myname/my-project.git"
  }
}

nombre: Este es el nombre de tu paquete. Debe estar en minúsculas y contener solo una palabra. Puede contener guiones y guiones bajos. Si planea publicar su paquete, este campo es obligatorio porque, junto con el campo de versión, forma un identificador único.
versión: este es el número de versión de su paquete, que debe cumplir con la especificación de versión semántica, es decir, en el formato xxx. Este campo también es obligatorio si planea publicar su paquete, ya que, junto con el campo de nombre, forma un identificador único. Si no planea publicar su paquete, ambos campos son opcionales.
descripción: esta es una introducción a su paquete, que es una cadena. Este campo ayuda a otros a descubrir su paquete en búsquedas de npm.
principal: este es el archivo de entrada de su paquete, generalmente index.js. Este archivo se cargará cuando alguien más use la función require() para presentar su paquete.
scripts: este es un objeto utilizado para definir algunos scripts que se pueden ejecutar mediante el comando npm run. Por ejemplo, el script de inicio define cómo iniciar su paquete y el script de prueba define cómo probar su paquete.
dependencias: este es un objeto que enumera otros paquetes de los que depende su paquete y sus rangos de versiones. Estas dependencias se instalan automáticamente cuando instala o publica su paquete. Por ejemplo, lodash es una biblioteca de herramientas de uso común. Puede especificar su rango de versiones como ^4.17.21, lo que significa instalar la última versión mayor o igual a 4.17.21 y menor que 5.0.0.
devDependencies: este también es un objeto que se utiliza para enumerar otros paquetes y sus rangos de versiones de los que depende su paquete durante el desarrollo o las pruebas. Estas dependencias sólo se instalarán en el entorno de desarrollo y no afectarán al entorno de producción. Por ejemplo, mocha es un marco de prueba de uso común y puede especificar su rango de versiones como ^9.1.3.
autor: esta es la información del autor de su paquete, que puede ser una cadena o un objeto. Si es una cadena, normalmente contiene el nombre del autor y la dirección de correo electrónico. Si es un objeto, puede contener campos como nombre, correo electrónico, URL, etc.
licencia: este es el tipo de licencia que utiliza su paquete, generalmente una cadena. Por ejemplo, MIT significa utilizar la licencia MIT.
página de inicio: esta es la dirección de la página de inicio del proyecto de su paquete, generalmente una cadena. Por ejemplo, https://example.com/my-project significa que la página de inicio del proyecto está en example.com.
errores: esta es la dirección de seguimiento de problemas de su paquete o la dirección de correo electrónico para informar errores. Puede ser una cadena o un objeto. Si es una cadena, normalmente representa la dirección del rastreador de problemas. Si es un objeto, puede contener dos campos: url y correo electrónico.
repositorio: esta es la dirección y el tipo de repositorio de código donde se encuentra su paquete, generalmente un objeto. Puede contener dos campos: tipo y url. type representa el tipo de almacén, como git. URL representa la dirección del almacén, como https://github.com/myname/my-project.git.

Explicación detallada de los guiones.

scripts es probablemente el campo con el que más hemos entrado en contacto. Hablemos del campo scripts en detalle. El campo scripts es un objeto. Cada uno de sus atributos es el nombre de un comando de script, y el valor correspondiente es el comando a ejecutar. ser ejecutado. Por ejemplo:

{
    
    
  "scripts": {
    
    
    "build": "node build.js",
    "test": "mocha test/*.js",
    "start": "node index.js"
  }
}

Aquí se definen tres comandos de script: compilar, probar e iniciar. Podemos ejecutar node build.js mediante npm run build, mocha test/*.js mediante npm run test y node index.js mediante npm run start.

Tenga en cuenta que npm run agregará el directorio node_modules/.bin en el proyecto actual a la variable de entorno PATH, por lo que podemos usar directamente el comando del módulo instalado localmente sin especificar la ruta completa. Por ejemplo, en el ejemplo anterior, podemos usar mocha directamente sin escribir node_modules/.bin/mocha.

¿Cuáles son los comandos de script especiales en el campo de scripts?

Además de nuestros comandos de script personalizados, el campo scripts también admite algunos comandos de script especiales, que se ejecutarán automáticamente en circunstancias específicas. Estos comandos de script especiales son:

start: cuando ejecutamos npm start directamente, se ejecutará este comando de script. Generalmente se utiliza para iniciar un proyecto.
prueba: cuando ejecutamos npm test directamente, se ejecutará este comando de script. Generalmente se utiliza para ejecutar pruebas.
instalar: cuando ejecutamos npm install en el proyecto actual, este comando de script se ejecutará una vez completada la instalación. Generalmente se usa para realizar algunas operaciones de inicialización después de la instalación.
desinstalar: cuando ejecutamos npm uninstall en el proyecto actual, este comando de script se ejecutará una vez completada la desinstalación. Generalmente se usa para realizar algunas operaciones de limpieza después de la desinstalación.
publicar: cuando ejecutamos npm Publish en el proyecto actual, este comando de script se ejecutará antes de publicar. Por lo general, se utiliza para realizar algún trabajo de preparación o inspección previa a la liberación.
prexxx y postxxx: cuando ejecutamos cualquier comando de script, si hay un comando de script prexxx o postxxx correspondiente (xxx es cualquier nombre), el comando de script prexxx o postxxx se ejecutará antes o después del comando de script. Generalmente se utiliza para realizar algunas operaciones previas o posteriores.

¿Cuáles son los beneficios de los campos de scripts?

El uso del campo scripts tiene los siguientes beneficios:

Algunos comandos complejos se pueden simplificar, por ejemplo, podemos usar npm run build en lugar de node build.js --env production --minify --sourcemap, etc.
Puede unificar comandos bajo diferentes sistemas operativos y entornos. Por ejemplo, podemos usar npm run clean en lugar de rm -rf dist o del /s /q dist, etc.
Puede usar algunas variables y parámetros proporcionados por npm. Por ejemplo, podemos usar npm_package_name para obtener el valor del campo de nombre en package.json, o usar npm_config_xxx para obtener el valor del campo xxx en la configuración de npm.
Puede llamar fácilmente a otros comandos de script. Por ejemplo, podemos usar npm run xxx para llamar al comando de script xxx definido en el campo scripts, o usar npm explore – npm run xxx para llamar al comando de script xxx definido en el paquete dependiente.

¿Cuáles son las precauciones para el campo de los scripts?

Al utilizar el campo scripts, existen varias consideraciones:

Si el comando de secuencia de comandos contiene espacios o caracteres especiales, debe estar entre comillas dobles o simples, como "echo "Hello World"" o 'echo "Hello World"'.
Si necesita usar varios comandos en un comando de secuencia de comandos, debe usar && o || para conectarlos, como "echo "Hello" && echo "World"" o "echo "Hello" || echo "World"" .
Si es necesario utilizar variables de entorno en comandos de script, deben citarse con $ o %, como "echo $PATH" o "echo %PATH%".
Si es necesario utilizar comentarios en los comandos del script, deben comenzar con # o //, como "# esto es un comentario" o "// esto es un comentario".

¿Cuáles son los ejemplos de campo de scripts?

Finalmente, veamos algunos ejemplos de campos de scripts, con la esperanza de brindarle algo de inspiración y referencia.

Ejemplo 1: utilizar el campo scripts para compilar y empaquetar el proyecto

Suponiendo que tenemos un proyecto desarrollado usando TypeScript y Webpack, podemos definir los siguientes comandos de script en el campo scripts:

{
    
    
  "scripts": {
    
    
    "build": "npm run clean && npm run compile && npm run bundle",
    "clean": "rimraf dist",
    "compile": "tsc",
    "bundle": "webpack"
  }
}

De esta manera, podemos compilar y empaquetar nuestro proyecto con un clic mediante npm run build. en:

Build es un comando de script combinado que ejecuta comandos de script de limpieza, compilación y agrupación en secuencia.
clean es un comando de script de limpieza que utiliza el módulo rimraf (similar a rm -rf) para eliminar el directorio dist.
compilar es un comando de script compilado que utiliza el módulo tsc (compilador TypeScript) para compilar todos los archivos .ts en el directorio src y enviarlos al directorio dist.
Bundle es un comando de script de empaquetado que utiliza el módulo webpack (herramienta de empaquetado) para empaquetar todos los archivos .js en el directorio dist y enviarlos al directorio dist.

Ejemplo 2: utilizar el campo scripts para ejecutar y depurar el proyecto

Suponiendo que tenemos un proyecto desarrollado usando Express y Nodemon, podemos definir los siguientes comandos de script en el campo scripts:

{
    
    
  "scripts": {
    
    
    "start": "node index.js",
    "dev": "nodemon index.js",
    "debug": "node --inspect index.js"
  }
}

De esta forma, podemos ejecutar y depurar nuestro proyecto mediante npm start, npm run dev o npm run debug. en:

start es un comando de script de inicio que utiliza el módulo de nodo para ejecutar el archivo index.js, que es el archivo de entrada de nuestro proyecto.
dev es un comando de script de desarrollo, utiliza el módulo nodemon para ejecutar el archivo index.js y se reinicia automáticamente cuando el archivo cambia, esto nos permite ver los efectos de las modificaciones en tiempo real.
debug es un comando de script de depuración. Utilizará el parámetro –inspect del módulo de nodo para ejecutar el archivo index.js y activar el modo de depuración, lo que nos permite usar Chrome DevTools u otras herramientas de depuración para establecer puntos de interrupción, avanzar paso a paso y ver variables, etc.

Ejemplo 3: utilizar el campo scripts para probar y publicar proyectos

Suponiendo que tenemos un proyecto desarrollado usando Jest y npm-publish-git-tag, podemos definir los siguientes comandos de script en el campo scripts:

{
    
    
  "scripts": {
    
    
    "test": "jest",
    "prepublishOnly": "npm test",
    "publish": "npm-publish-git-tag"
  }
}

De esta forma podremos probar y publicar nuestro proyecto mediante npm test, npm Publish o npm run Publish. en:

test es un comando de script de tipo prueba que utiliza el módulo jest (marco de prueba) para ejecutar todos los casos de prueba en el directorio de prueba y generar resultados de prueba e informes de cobertura.
prepublishOnly es un comando de script previo al lanzamiento que se ejecutará antes de la publicación de npm para garantizar que pasemos todas las pruebas antes de la publicación.
publicar es un comando de script de publicación. Utilizará el módulo npm-publish-git-tag (herramienta de publicación) para publicar nuestro proyecto, creará automáticamente una etiqueta git que es la misma que el campo de versión en package.json y la enviará a Almacén remoto.

Conclusión

Lo anterior es mi introducción a los campos package.json y scripts, espero que sea útil para todos. El campo scripts es una característica muy poderosa y flexible que nos permite definir y administrar una variedad de comandos de script en el archivo package.json, mejorando así la eficiencia y calidad de nuestros proyectos de desarrollo y mantenimiento. Por supuesto, hay muchos otros usos y técnicas en el campo de los scripts, por lo que no los enumeraré todos. Los amigos interesados pueden explorarlos y probarlos ellos mismos.

Gracias a todos por leer la publicación de mi blog. Si la encuentra útil, denme un me gusta o dejen un comentario. Si cree que hay errores o deficiencias, indíquemelos y los revisaré y mejoraré a tiempo. Finalmente, ¡les deseo a todos una feliz programación!