Introducción a Monorepo
La tecnología front-end ha evolucionado rápidamente en los últimos años, incluido ES6, preprocesamiento SCSS, npm, marco front-end, CI/CD, Docker... etc. Si desea completar una aplicación pequeña, además de las tecnologías enumeradas anteriormente, es posible que también necesite mantener una plataforma relativamente grande y compleja.
Monorepository es un concepto arquitectónico. Desde el significado literal de Mono (one) repo (repositorio), podemos saber que esta arquitectura (Monorepo) consiste en colocar una gran cantidad de código de programa bajo la misma base de código para su administración. de las primeras empresas en adoptar Monorepo en lugar del antiguo concepto de separación.
Para obtener más información, consulte los siguientes artículos:
¿Entiendes realmente Monorepo? Cinco minutos para presentarle la arquitectura front-end a gran escala.
Introducción a Nx
Nx es una herramienta Monorepo rápida, eficaz y muy extensible, y tiene las siguientes características.
1. Admite tres marcos front-end principales:Vue, reaccionar, angular
2. Soporte de marco de back-end:Expreso, Nido, Siguiente
3. para el marco Monorepo
4. Admite varios tipos de pruebas:Ciprés, broma
Concepto de marco de interfaz de usuario de Nx
Nx es un framework front-end cuya filosofía de diseño es muy similar al conocido editor de programas Visual Studio Code. En Visual Studio Code, puede obtener una excelente experiencia de desarrollo incluso sin instalar ninguna extensión. Nx sigue un principio similar. Sus características principales son concisas y claras, sin ambigüedades, lo que hace que el desarrollo sea más explícito.
Las características principales de Nx incluyen gestión de proyectos, ejecución de tareas, generación de código y análisis de dependencia. Estas capacidades permiten a los equipos de desarrollo colaborar de manera más efectiva, administrar grandes proyectos de front-end y garantizar la calidad y coherencia del código. Con Nx, puede crear, mantener y escalar fácilmente proyectos front-end sin preocuparse por la configuración y la confusión de herramientas.
Al igual que la extensión de Visual Studio Code, Nx también admite kits de complementos (complementos), lo que le permite elegir el kit de complementos apropiado según las diferentes necesidades del proyecto. Esta flexibilidad hace que Nx sea adecuado para una variedad de proyectos front-end, desde pequeñas aplicaciones hasta grandes aplicaciones de nivel empresarial.
A continuación, intentemos crear un proyecto Nx simple. Primero, necesitas instalar Nx y crear un nuevo proyecto. Luego puede utilizar las herramientas de línea de comandos de Nx para generar componentes, servicios y otros archivos de código. Nx también proporciona algunas plantillas de proyecto predefinidas para acelerar el proceso de inicio del proyecto. Puede personalizar fácilmente la estructura y configuración del proyecto para satisfacer sus necesidades específicas.
Nx también proporciona potentes funciones de ejecución de tareas que pueden ayudarle a automatizar el proceso de construcción, prueba e implementación. Esto ayuda a garantizar la confiabilidad y estabilidad del proyecto y mejora la eficiencia del desarrollo.
En resumen, Nx es un marco de front-end potente y flexible. Su concepto de diseño se centra en la simplicidad y la personalización, lo que permite a los equipos de desarrollo gestionar proyectos de front-end más fácilmente y brindar una excelente experiencia de desarrollo. Ya sea que sea un desarrollador individual o un equipo grande, Nx puede ayudarlo a crear aplicaciones front-end de alta calidad.
construcción nx
Crear un nuevo entorno Nx
Los lectores pueden crear un nuevo entorno de trabajo de Nx mediante los siguientes comandos
npx crear-nx-espacio de trabajo @ más reciente
Una vez completada la creación, también debe seleccionar las configuraciones preestablecidas. A continuación se proporcionan varias configuraciones preestablecidas de Nx para referencia de los lectores.
Espacio de trabajo (mecanografiado)
npx crear-nx-espacio de trabajo –preset=core
Reaccionar
npx crear-nx-espacio de trabajo –preset=react
Siguiente.js
npx crear-nx-espacio de trabajo –preset=siguiente
Angular
npx crear-nx-espacio de trabajo –preset=angular
FullStack: Angular y Nest.js
npx crear-nx-espacio de trabajo –preset = nido-angular
Servidor: exprés
npx crear-nx-espacio de trabajo –preset=express
En un proyecto existente, cree un entorno Nx
Si hay un monorepo de Lerna o Yarn en un proyecto existente, puede usar el siguiente comando para crear npx add-nx-to-monorepo
Si ya tiene un proyecto de aplicación React, también puede usar el siguiente comando para compilar Nx
npx cra-a-nx
Instalar la CLI de Nx
Si desea mejorar la experiencia del desarrollador, también se recomienda instalar la CLI global de Nx.
instalación npm -g nx
Estructura de carpetas nx
A continuación se muestra un ejemplo rápido utilizando la documentación oficial de Nx como ejemplo.
Un proyecto Nx generalmente tendrá las siguientes carpetas
1. myorg/ es el nombre de su propio proyecto Nx a gran escala
2. /apps/ almacenará varios proyectos y también es el punto de entrada principal para todos los proyectos. Se recomienda que todos los proyectos en esta carpeta sean lo más livianos posible. Por el contrario, los programas con archivos más grandes y códigos reutilizables deben colocarse en Bibliotecas y cargarse en cada proyecto.
3. /libs/ contendrá todos los proyectos de la biblioteca. Tomando mi propio trabajo como ejemplo, modularizaremos algunas funciones comunes y las almacenaremos aquí, como: PWA
4. /tools/ contendrá algunos scripts de código de uso común y los parámetros también se pueden colocar en esta carpeta. Por ejemplo: configuración de base de datos y scripts
5. /workspace.json enumerará todos los proyectos pequeños en su proyecto grande de Nx
6. /nx.json se configurará de acuerdo con la CLI de Nx y también informará a Nx a través de este archivo qué se debe almacenar en caché o cómo ejecutarlo.
7. /tsconfig.base.json establece el TypeScript global y crea alias en cada biblioteca para ayudar en la carga de TypeScript o JavaScript.
Conclusión
Lo anterior es una introducción rápida a Nx, que explica qué admite Nx además de ser una herramienta del marco Monorepo. Además, los comandos se utilizan para construir el entorno de Nx de acuerdo con la situación actual del usuario.
Actualmente trabajo para una empresa extranjera, también uso las herramientas de Nx para gestionar múltiples proyectos en el trabajo. Personalmente, lo encuentro bastante cómodo de usar. Además de mejorar la reutilización del código, también tengo más oportunidades para colaborar y discutir con ingenieros de otros equipos.
Cita
Español 
繁體中文 
English 
简体中文 
한국어 
日本語