Pinia源码分析【1】- 源码分析环境搭建

专栏导航

分析pinia源码之前必须知道的API

Pinia源码分析【1】- 源码分析环境搭建

Pinia源码分析【2】- createPinia

pinia源码分析【3】- defineStore

pinia源码分析【4】- Pinia Methods

前言

​ 经过vue3从beta版本走向默认版本，vue2.x更新最后一个版本Naruto，全局状态管理也从vuex慢慢走向更加易用更加契合vue3的pinia。

本系列文章将会带领大家从源码角度去理解下一代vue全局状态管理库 pinia 的实现原理。

参考源码pinia V2.0.14

源码分析仓库：https://github.com/vkcyan/goto-pinia

工欲善其事，必先利其器，我们应该如何去阅读pinia的源码呢？

本文将手摸手教大家如何在vue3环境搭建pinia的源码阅读环境。

创建源码分析环境

我们使用vue3开箱即用的CLI初始化一个项目，创建项目非常简单，不做过多赘述。

https://vuejs.org/guide/quick-start.html

npm init vue@latest

pinia源码入口分析

先去pinia的官方仓库下载源码

源码地址：https://github.com/vuejs/pinia，我们将其clone到本地

git clone https://github.com/vuejs/pinia.git

首先分析pinia仓库的打包文件，寻找源代码位置

源码地址

​ 在pinia/packages/package.json中，我们找到了打包命令，打包命令中可以得知，打包文件为../../rollup.config.js

​ 在打包文件中，我们找到了被打包源码的入口文件，即为pinia/packages/pinia/src/index.ts

仓库依赖

​ 在打包文件rollup.config.js中line121标注了依赖文件，不过我们通过CLI生成的项目中已经包含了以下依赖文件，所以这一步我们不需要额外操作。

环境变量

​ 源码中存在大量环境变量注入代码，具体配置在rollup.config.js中line121；如果缺失环境变量声明，会导致源码无法正常运行。

​ 所以在源码阅读环境，我们需要添加合适的环境变量，让源码正常运行起来。

环境适配

将pinia/packages/pinia目录下的所有文件复制到我们之前通过CLI生成项目的/src中。

并根据我们通过源码入口分析获取的信息进行环境变量补全。

在vite.config.ts增加环境变量

define: {
	__DEV__: "true", // 是否开发环境
	__TEST__: "false", // 是否测试环境
},

全局环境变量报错

​ 我们在vite的配置文件中向运行环境注入了pinia必要的环境变量，但是TypeScript并不认识相关全局变量，便会发出警告。

​ 我们需要将源码中的pinia/packages/pinia/src/global.d.ts文件内的声明复制到项目中的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;

至此，我们解决了项目静态检查阶段中所有报错信息，接下来我们启动项目。

浏览器控制台报错’…ComputedRef’

​ 启动项目后，在浏览器控制台收获了一个报错信息

我们找到报错代码type.ts进行分析

​ 错误提示已经非常贴心，可以得知是tsconfig.json配置问题，我们根据报错信息修改配置

出现报错的原因是因为这里vue CLI生成的代码自带一份配置文件，此文件与pinia源码的tsconfig部分配置发生了冲突。

{
  "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"
    }
  ]
}

源码分析环境测试

在源码处增加打印，测试pinia源码是否正常运行。

log被正常打印，说明pinia源码已经被正常运行。

​ 如果感觉搭建环境过于繁琐，又想阅读pinia源码，可以直接clone项目，https://github.com/vkcyan/goto-pinia，开箱即用~

结语

​ 至此，我们便完成了万里长征第一步；植入的源码文件被正常运行，我们便可以通过log debug的方式来进行逻辑观测，接下来我们将正式开始pinia核心实现的探索之旅~