Este artículo es el segundo de una serie de artículos sobre la creación de una biblioteca de componentes Vue3 desde 0. Este artículo lo llevará a usar pnpm para crear un proyecto Monorepo simple y completar la asociación y prueba del paquete.
¿Qué es Monorepo?
De hecho, es muy simple, es decir, un código base contiene muchos proyectos, y aunque estos proyectos están relacionados, son lógicamente independientes y pueden ser mantenidos por diferentes personas o equipos.
¿Por qué usar pnpm?
pnpm es muy conveniente para la gestión de paquetes, especialmente para un proyecto Monorepo. Porque puede haber varios paquetes (paquetes) para la biblioteca de componentes que estamos a punto de desarrollar, y estos paquetes deben probarse localmente, y sucede que pnpm lo admite de forma natural. De hecho, otras herramientas de gestión de paquetes, como yarn y lerna, también pueden hacerlo, pero es relativamente engorroso. Y pnpm es muy maduro ahora, las bibliotecas de componentes estrella como Vant y ElementUI están usando pnpm, por lo que este proyecto también usa pnpm como una herramienta de administración de paquetes.
Uso de pnpm
Instalar
npm install pnpm -g
Inicializar el proyecto
Ejecutado en el directorio raíz del proyecto , el archivo pnpm initse generará automáticamentepackage.json
{
"name": "easyest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
gestión de paquetes
Creamos una nueva carpeta de paquetes para el almacenamiento posterior de nuestros diversos paquetes. pnpm initSi tenemos un paquete y un paquete b, cree a y b en paquetes (aquí se usa para probar la referencia local de pnpm), y luego realice la inicialización en los directorios a y b respectivamente. Aquí necesitamos cambiar el nombre del paquete, yo cambiará el nombre
aquí Cheng @easyest/a indica que el paquete pertenece a la organización easyest. Así que recuerde iniciar sesión en npm y crear una nueva organización antes de publicar; por ejemplo, easyst. Por ejemplo, el paquete.json de a en este momento
{
"name": "@easyest/a",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Aquí, nuestro paquete representa el conjunto de herramientas, y el atributo principal de package.json es la entrada del paquete, a saber, index.js.
Así que crea un nuevo index.js en el directorio a
export default () => {
console.log("我是@easyest/a包");
};
Luego crea un nuevo index.js bajo el paquete b como referencia
import sayHello from "@easyest/a";
sayHello();
Usamos el paquete a, por lo que primero debemos instalar uno y ejecutarlo en el directorio B. pnpm add @easyest/aObviamente, esto provocará un error, porque no hemos asociado los dos paquetes, por lo que la forma de asociarlo es realmente muy simple.
nuevo pnpm en el directorio raíz El archivo de espacio de trabajo pnpm-workspace.yaml puede asociar paquetes
packages:
- 'packages/**'
Esto significa que todos los paquetes en el directorio de paquetes se asocian y luego se ejecutan. pnpm add @easyest/a
Tenga en cuenta que aquí usamos la sintaxis import es6, por lo que debemos package.jsonagregar campos en A y B. "type": "module"
Encontraremos que a aparece directamente en los node_modules de b directorio El enlace suave. A su vez el paquete.json de b tiene más campos de dependencia "@easyest/a": "workspace:^1.0.0", lo que significa que ha sido asociado al @easyest/apaquete local,
en este momento lo ejecutamos en el directorio b
node index.js
En este punto, hemos completado la asociación del paquete local y será más conveniente probar el paquete en el futuro.