360 Front-end Star Project-Analysis of Front-end Engineering (Tian Dongdong)

1. Ingeniería de front-end?

1.1 Objetivo

En el campo de front-end, se utilizan diversas soluciones aportadas por el avance tecnológico continuo y la acumulación gradual de experiencia para resolver varios problemas ineficientes y engorrosos encontrados en las fases de desarrollo, prueba y mantenimiento del proyecto .

1.2 tecnología

La ingeniería es un tipo de pensamiento, y la tecnología es un tipo de práctica. La tecnología continuará evolucionando y cambiando a medida que avancen los tiempos. En diferentes períodos, habrá diferentes tecnologías para llevar y practicar ideas de ingeniería.
La implementación de ideas no puede separarse de la acción y la práctica, aunque la tecnología estará desactualizada, la práctica debe basarse en el presente.

1.3 Razón

La ingeniería de front-end es para mejorar la eficiencia. Esta mejora se refleja en las fases de desarrollo, prueba y mantenimiento del proyecto.

2. Centrarse en el frente

Enfoque en el extremo frontal: estandarizado / modularizado / componente / automatizado

2.1 Normalización

• Gestión de versiones y especificación del proceso de desarrollo
  -git: gestión de versiones y almacén de código
  -gitflow: basado en git para simplificar la operación, modelo de actividad para estandarizar el comportamiento
• Especificaciones de escritura (script, estilo, estructura de directorios)

2.2 modular

Generalmente, hay modularización CSS / modularización JS.
En general, el código lógicamente relacionado se coloca en el mismo archivo que el mismo módulo. De esta manera, solo necesita prestar atención a la implementación lógica interna del módulo y considerar la contaminación variable y otros problemas fuera de servicio.

Solución modular CSS: La idea central es evitar conflictos a través de las reglas de estilos efectivos.

• ámbito: agregue el atributo de versión de datos v al nodo DOM
• CSS en JS: escriba estilos con módulos de script, incluso los módulos de estilo encapsulados se pueden llamar directamente
• Módulos CSS: con la compilación previa, los estilos se denominan variables en los scripts
• BEM : Block_Element-Modifier, de acuerdo con las reglas, css escrito a mano y agrega la clase correspondiente en el módulo (Element cumple con las especificaciones BEM, puede usar css programable)

Solución modular js: commonJs, especificación del cargador de módulos ES

2.3 Componentización

La idea central de la componente y la modularización es dividir y conquistar. El beneficio real es la mejora de la eficiencia de la colaboración en equipo y la mantenibilidad del proyecto.

¿Qué es un componente? La IU se encapsula principalmente como un componente, como el encabezado de página se encapsula en un componente Encabezado; la lógica es principalmente, una función se encapsula en un componente.
Podemos llamar al paquete altamente cohesivo y de bajo acoplamiento hecho por lógica específica y UI como componente.

• Los componentes que se centran en el embalaje de la interfaz de usuario no son universales
• Componentes que se centran en el empaquetado lógico, con alta universalidad.
• Los componentes pueden contener componentes, como los componentes de la interfaz de usuario parcial a menudo contienen componentes lógicos parciales

2.4 Automatización

La idea central: las cosas que las máquinas pueden hacer automáticamente nunca están hechas para hacerse. La automatización es el núcleo de la ingeniería front-end.

• Inicialización automática, como vue-cli
• Compilación automática (empaquetado), como webpack
• Pruebas automáticas, como karma, jet.
• Despliegue automático, como Jenkins

2.4.1 Pruebas automatizadas

2.4.2 Despliegue automatizado

2.4.3 Inicialización automática

2.4.4 Construcción automatizada

2.4.5 Ejemplo: herramienta de desarrollo de páginas temáticas de búsqueda 360

Utilice la CLI para especializarse en la inicialización del proyecto y el lanzamiento en línea; configure el proyecto webpack para satisfacer las necesidades de precompilación; desarrolle un complemento basado en webpack4 para cargar recursos estáticos en el CDN de la empresa

Use webpack4 para construir el proyecto:

module.exports = {
	mode:'develpment',
	entry:{
		main:'./src/main.js'
	},
	output:{
		path:path.resolve(_dirname, '../dist'),
		filename:'[name].js'
	},
	module:{
		rules:[]
	},
	plugins:[]
};

Sugerencias para la construcción del proyecto usando webpack4:

• Diferenciar la configuración de diferentes entornos.
  - webpack.base.conf.js
  - webpack.dev.conf.js
  -webpack prod.conf.js
• Los accesorios enchufables de la herramienta integrada se colocan por separado.
  - .babelrc
  - .eslintrc
  -.postcssrc
• El .browserslistrcarchivo de configuración env se coloca por separado.