webpack frames

Insignia

• comprobar && formato
• paquete web1-ie8
• webpack3-reaccionar
• paquete web3-vue
• paquete web4-reaccionar
• paquete web4-vue

Instrucciones de actualización

1. Las carpetas contenidas en webpack4-vue y webpack3-vue son exactamente iguales. Cópielas usted mismo si es necesario.
2. Las carpetas incluidas en webpack4-react y webpack3-react son exactamente iguales. Cópielas usted mismo si es necesario.
3. La diferencia entre el paquete web 2 y 3 es muy pequeña. Básicamente, no hay problema en reemplazar directamente 2 con 3. Aquí solo se analizan las versiones 1/3/4, el documento oficial de migración.
4. El entorno de desarrollo se ha recargado en caliente. Si desea que el entorno de desarrollo sea compatible con ie11 o inferior, borre la recarga en caliente.
   • Elimine react-hot-loader/babel del archivo plugins .babelrc
   • Elimine react-hot-loader de devDependencies en package.json
   • devServer.inline en config/opt.dev.js debe ser falso (vue solo necesita modificar este punto)
   • Eliminar react-hot-loader del código
5. El entorno de desarrollo ya admite la mock api de front-end, que leerá automáticamente los archivos en src/mock y realizará actualizaciones en caliente. La lógica del código está en config/mock.js , que contiene example .
6. Las versiones de vue y vue-template-compiler deben ser completamente consistentes; de lo contrario, habrá errores imprevistos.
7. Se han unificado las configuraciones de webapck134,react,vue en config . Diferentes proyectos solo necesitan cambiar opt.self.js
8. Hay omisiones en la descripción readme . Vaya al archivo para leer los comentarios del código. El punto clave es que los archivos en el directorio config tienen comentarios y direcciones de documentos de referencia oficiales.
9. devDependencies se utiliza para colocar las dependencias de la versión bloqueada. dependencies son las dependencias más recientes. Dado que no es necesario publicarlas en npm, esta clasificación es más arbitraria e incluso incorrecta. Si desea publicar, haga una distinción. Baidu para obtener detalles específicos. Encuentre documentación.
10. Dado que DllPlugin y CommonsChunkPlugin或splitChunks tienen funciones duplicadas y el primero necesita ejecutar un comando de paquete web de antemano, puede simplemente reemplazarlo con externals . El segundo tiene un gran espacio de operación y se puede descomprimir libremente para que el tamaño del archivo sea más uniforme. , lo siguiente ya no se utilizará DllPlugin

Preparación ambiental

1. Establecer npm config set registry https://registry.npm.taobao.org
2. Ejecute npm i -g npminstall como administrador
3. Ingrese al directorio actual con la línea de comando y ejecute npminstall -c
4. Si se produce un error, las soluciones comunes son las siguientes:
   • Ejecute npm cache clean -f y npm cache verify -f como administrador
   • Eliminar el directorio node_modules
   • Vuelva a ejecutar npminstall -c
   • Finalmente, cambie a una red mejor y actualice node y npm
5. Notas de uso:
   • npminstall -c y npm install no son compatibles. El primero es mucho más rápido que el segundo, pero no se pueden usar juntos.
   • Cambiar al uso requiere eliminar la carpeta node_modules
   • Si hay un problema con node-v12.0.0 , no lo actualice todavía. La última versión de node-v12 no tiene problemas.
   • Ocasionalmente, se producen errores de empaquetado o de codificación inexplicables. Elimine node_modules y vuelva a intentarlo.

Inicio del entorno de desarrollo

1. npm start
   • Úselo cuando necesite soporte, es decir
   • npm run env -- FOR_IE=1 npm start
2. Abra http://localhost:8888 en el navegador

Implementación del entorno de producción

1. npm run app
   • Úselo cuando necesite soporte, es decir
   • npm run env -- FOR_IE=1 npm run app
2. Simplemente copie el contenido de la carpeta dist al servidor

Agregar otras características

1. npm run report para ver la composición del paquete de producción
   • Úselo cuando necesite soporte, es decir
   • npm run env -- FOR_IE=1 npm run report
2. npm run debug agrega inicio de depuración de punto de interrupción, puerto 7777
   • Úselo cuando necesite soporte, es decir
   • npm run env -- FOR_IE=1 npm run debug

Actualizar paquete.json

• Instalar npm i -g npm-check-updates
• Ejecute ncu (ver) ncu -u (actualizar) en el directorio package.json

Utilice la recarga en caliente de reaccionar-hot-loader

Documentación oficial

1. Agregue react-hot-loader a devDependencies en package.json
2. devServer.inline de webpack.cfg.dev.js debe ser true
3. Agregue react-hot-loader/babel a plugins de .babelrc
4. Agregue --hot al comando de inicio, no use HotModuleReplacementPlugin al mismo tiempo
5. El componente raíz export se modifica y se introduce react-hot-loader antes de react

 import { hot } from 'react-hot-loader' ;
export default hot ( module ) ( App ) ;

Nota: Solo 4.3.12 admite ie8+react@0 y requiere un pequeño cambio, que se ha completado en el script

Procesamiento de imágenes

• Imagen normal => https://tinypng.com图片压缩=> url-loader (menos de 4 kb)
• imagen svg => https://github.com/svg/svgo svg压缩=> svg-url-loader

 // 建议4kb以下使用,较大文件建议用file-loader
const src = require ( "!svg-url-loader?noquotes!./x.svg" ) ;

webpack 3 4 admite la investigación de ie8

1. El código empaquetado por DllPlugin no se ha convertido y es muy probable que tenga problemas de incompatibilidad, por lo que la velocidad de empaquetado no se puede mejorar mucho.
2. El principio de recarga en caliente es Object.defineProperty, que no es compatible con ie8
3. No se puede utilizar la última versión de reaccionar/antd, [email protected]/[email protected] solo admite ie8, vue no admite directamente ie8;
4. En este punto, casi todas las ventajas de webpack 3 4 no son compatibles. Webpack 3 4 no se considera por el momento y la compatibilidad de la versión en línea no es muy buena.
5. Si realmente desea utilizar el paquete web 3 4 para que sea compatible con ie8, se proporciona lo siguiente como referencia, pero no se ha probado (todos deberían tener problemas)
   • https://github.com/ediblecode/webpack4-ie8
   • https://github.com/natural-fe/natural-cli/blob/master/ie8-mvvm.md

Referencia de especificación de código

• http://eslint.cn/docs/rules eslint规则文档
• https://github.com/yuche/javascript js规范中文版
• https://github.com/airbnb/javascript js规范es5,es6,react
• https://github.com/JasonBoy/javascript/tree/master/react react规范中文版
• https://github.com/sivan/javascript-style-guide/tree/master/es5 es5规范中文版
• Configuraciones esling de uso común eslint-config-egg eslint-config-react-app eslint-config-ali

Hábitos personales de codificación (diferentes de persona a persona, elija lo que crea correcto, solo como referencia)

Acerca de dejar una línea en blanco al final del archivo

• Los individuos siguen sus hábitos y el desarrollo del equipo se unifica mediante eslint --fix

Acerca de la sangría del código

• Los individuos siguen sus hábitos y el desarrollo del equipo se unifica mediante eslint --fix
• Existe un debate interminable entre pestañas y espacios: si no busca la alineación de salto de línea de atributos de html y la alineación de dos puntos de css, no hay nada de malo con las pestañas; si desea buscar la alineación, es mejor usar espacios;

Acerca de las comillas

• js unifica las comillas dobles, las comillas dobles dentro de la cadena se unifican " , comillas simples x27 , comillas dobles x22 , de manera que las comillas dobles quedan unificadas
• CSS unifica las comillas dobles y se debe escapar el contenido del contenido para evitar caracteres confusos.
• css/less/scss, en muchos casos se pueden usar comillas dobles en lugar de comillas simples y, en algunos casos, las comillas simples pueden causar problemas al compilar. Además, las etiquetas html también usan comillas dobles, que resultan estar unificadas.

Ya sea para agregar una coma

• Si no hay errores de sintaxis, agréguelo y habrá menos cambios de diferencias.

Ya sea para agregar un punto y coma

• Si no hay errores de sintaxis, agréguelo y habrá menos cambios de diferencias.

Acerca de la definición de variables

• Si se define por separado, una variable por línea, se le da prioridad a const y se usa let en lugar de var.
• Si es posible, utilice la desestructuración de objetos o matrices para las asignaciones.

Sobre el pedido de importación

• La máxima prioridad es introducir polyfill, seguido de React/Vue
• En segundo lugar, en el directorio del módulo (node_modules), primero se ordena la profundidad de la ruta del módulo y el orden se clasifica y ordena según (componente> función> constante)
• Luego se carga a través del medio del cargador, como: promesa-cargador
• Luego está el directorio de desarrollo (dev_dir), que se clasifica y ordena según (componente>función>constante)
• Introduzca archivos de estilo, clasifique y ordene según (node_modules>dev_dir)
• Importe archivos de imagen, clasifíquelos y ordénelos según (node_modules>dev_dir)