Piniaソースコード分析[1]-ソースコード分析環境の構築

序文

この間、開発を切り替えて、シンプルで効率的だと感じpiniaたので、の内部実装にとても興味がありました。vuexpiniapiniapinia

このシリーズの記事の参照ソースコードpinia V2.0.14

ソースコード分析レコード：github.com/vkcyan/goto…

この記事では、主にソースコードを分析する前に環境構築を紹介します

ソースコード分析環境を作成する

vue3のすぐに使用できるCLIを使用して、プロジェクトを分析環境として初期化します。プロジェクトの作成は非常に簡単なので、詳細については説明しません。

npm init vue@latest

piniaソースコードエントリ分析

まずpinia、公式倉庫に行き、ソースコードをダウンロードします

ソースアドレス：github.com/vuejs/pinia、ローカルでクローンを作成します

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

piniaまず、ウェアハウスのパッケージファイルを分析して、ソースコードの場所を見つけます

送信元アドレス

でpinia/packages/package.json、packagesコマンドを見つけました。packagesコマンドで確認できます。packagesファイルは次のとおりです。../../rollup.config.js

画像-20220706112404074

画像-20220706112113981

パッケージファイルには、パッケージ化されたソースコードのエントリファイルがあります。pinia/packages/pinia/src/index.ts

リポジトリの依存関係

rollup.config.js依存関係ファイルはパッケージファイルline121でマークされていますが、次の依存関係ファイルはCLIで生成したプロジェクトにすでに含まれているため、この手順で追加の操作を行う必要はありません。

画像-20220706100633575

環境変数

ソースコードには多数の環境変数インジェクションコードがあり、特定の構成が含まrollup.config.jsれてline121います。環境変数宣言がない場合、ソースコードは正常に実行されません。

画像-20220706102739081

ソースコードの適応

pinia/packages/piniaディレクトリ内のすべてのファイルを、前にCLIで生成した空のプロジェクトにコピーします。そして、ソースコード入力分析を通じて得られた情報に基づいて、環境を完成させます。

vite.config.tsに環境変数を追加します

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

地球環境変数エラー

DEV環境変数をvite構成ファイルのランタイム環境に挿入しましたが、TSはそれを挿入したことを認識せず、警告を発行します。

画像-20220706113750507

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'

プロジェクトを開始した後、ブラウザコンソールにエラーメッセージが表示されました

画像-20220706104253811

type.ts分析用のエラーコードを見つけます

画像-20220706104358605

エラープロンプトは非常に親密で、構成の問題であることがわかりますtsconfig.json。エラー情報に従って構成を変更します

エラーの理由は、ここでvue CLIによって生成されたコードに、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"
    }
  ]
}

ソースコード分析環境テスト

ソースコードに印刷を追加して、piniaソースコードが正常に実行されているかどうかをテストします。

画像-20220706105740320

画像-20220706105829188

ログは正常に印刷され、pinpaソースコードが正常に実行されたことを示します。

エピローグ

これで、piniaソースコード解析環境の構築が完了しました。次に、piniaのコア実装ロジックを段階的に解析していきます。

ナゲッツテクノロジーコミュニティのクリエイター署名プログラムの募集に参加しています。リンクをクリックして登録し、送信してください。