prefacio
Durante este período de tiempo , cambié el desarrollo entre y sentí piniaque era simple y eficiente, por lo que estaba muy interesado en la implementación interna de .vuexpiniapiniapinia
Código fuente de referencia para esta serie de artículospinia V2.0.14
Registro de análisis de código fuente: github.com/vkcyan/goto…
Este artículo presenta principalmente la construcción del entorno antes de analizar el código fuente.
Crear un entorno de análisis de código fuente
Usamos la CLI lista para usar de vue3 para inicializar un proyecto como un entorno de análisis Crear un proyecto es muy simple, por lo que no entraré en detalles.
npm init vue@latest
análisis de entrada de código fuente pinia
Primero ve al piniaalmacén oficial para descargar el código fuente
Dirección de origen: github.com/vuejs/pinia , lo clonaremos localmente
git clone https://github.com/vuejs/pinia.git
Primero analice piniael archivo del paquete del almacén para encontrar la ubicación del código fuente
Dirección de la fuente
En pinia/packages/package.json, encontramos el comando de empaquetado, que se puede ver en el comando de empaquetado, el archivo de empaquetado es../../rollup.config.js
En el archivo del paquete, encontramos el archivo de entrada del código fuente empaquetado, que espinia/packages/pinia/src/index.ts
dependencias del repositorio
rollup.config.jsLos archivos de dependencia están marcados en el archivo de empaquetado line121, pero los siguientes archivos de dependencia ya están incluidos en el proyecto que generamos a través de la CLI, por lo que no necesitamos operaciones adicionales en este paso.
Variable ambiental
Hay una gran cantidad de códigos de inyección de variables de entorno en el código fuente, la configuración específica está rollup.config.jsen line121; si falta la declaración de la variable de entorno, el código fuente no se ejecutará normalmente.
adaptación del código fuente
Copie pinia/packages/piniatodos los archivos en el directorio al proyecto vacío que generamos a través de la CLI anteriormente. Y en base a la información que obtuvimos a través del análisis de entrada del código fuente para completar el entorno.
Agregar variables de entorno en vite.config.ts
define: {
__DEV__: "true", // 是否开发环境
__TEST__: "false", // 是否测试环境
},
error de variable de entorno global
Inyectamos la variable de entorno DEV en el entorno de tiempo de ejecución en el archivo de configuración de vite , pero TS no sabía que la inyectamos y emitiría una advertencia.
Solo necesitamos pinia/packages/pinia/src/global.d.tscopiar las declaraciones en los archivos en el código fuente al proyecto env.d.ts.
/// <reference types="vite/client" />
// Global compile-time constants
declare var __DEV__: boolean;
declare var __TEST__: boolean;
declare var __FEATURE_PROD_DEVTOOLS__: boolean;
declare var __BROWSER__: boolean;
declare var __CI__: boolean;
declare var __VUE_DEVTOOLS_TOAST__: (
message: string,
type?: "normal" | "error" | "warn"
) => void;
Hasta ahora, hemos resuelto todos los mensajes de error en el proyecto y luego comenzamos el proyecto.
La consola del navegador informa un error '... ComputedRef'
Después de iniciar el proyecto, recibí un mensaje de error en la consola del navegador.
Encontramos el código de error type.tspara el análisis.
El aviso de error ha sido muy íntimo, puedes saber que es un tsconfig.jsonproblema de configuración, modificamos la configuración de acuerdo a la información del error
El motivo del error es que el código generado por vue CLI viene con un archivo de configuración que entra en conflicto con el código fuente de pinia.
{
"extends": "@vue/tsconfig/tsconfig.web.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
},
"importsNotUsedAsValues": "remove", // 默认被设置为error error情况下类型导入必须增加前缀type 以区分类型 改成remove即可
"preserveValueImports": false // 对于类型，在同时启用了 "preserveValueImports" 和 "isolatedModules" 时，必须使用仅类型导入进行导入；改成false即可
},
"references": [
{
"path": "./tsconfig.config.json"
}
]
}
Prueba de entorno de análisis de código fuente
Agregue la impresión en el código fuente para probar si el código fuente de pinia se ejecuta normalmente.
El registro se imprime normalmente, lo que indica que el código fuente de pinpa se ha ejecutado normalmente.
Epílogo
Hasta ahora, la construcción del entorno de análisis del código fuente de pinia está completa. A continuación, comenzaremos a analizar la lógica de implementación central de pinia paso a paso.
Estoy participando en el reclutamiento del programa de firma de creadores de la Comunidad Tecnológica de Nuggets, haga clic en el enlace para registrarse y enviar .