上一篇文章《async-validator 原始碼學習（一）：文件翻譯》已經將 async-validator 校驗庫的文件翻譯為中文，看著文件可以使用 async-validator 非同步校驗表單。本篇文章繼續學習 async-validator 原始碼目錄結構。

在專案中安裝 async-validator：

npm i async-validator

之後，找到 async-valiror 資料夾，開啟 package.json 檔案，

一、配置及目錄結構

package.json 的程式碼如下：

{
  "name": "async-validator", // 名稱
  "description": "validate form asynchronous", //
 
描述
  "version": "4.0.7", //版本號
  "license": "MIT", //許可證
  "files": [ //包含檔案
    "dist-*/",
    "bin/"
  ],
  "pika": true,
  "sideEffects": false,
  "keywords": [ // 關鍵字，用於檢索
    "validator",
    "validate",
    "async"
  ],
  "homepage": "https://github.com/yiminghe/async-validator",
  "bugs": {
    "url": "https://github.com/yiminghe/async-validator/issues"
  },
  
 
"repository": { //倉庫
    "type": "git",
    "url": "[email protected]:yiminghe/async-validator.git"
  },
  "dependencies": {}, //執行依賴
  "devDependencies": { //開發依賴
    "@babel/core": "^7.15.0",
    "@babel/node": "^7.14.9",
    "@babel/preset-env": "^7.8.7",
    "@babel/preset-typescript": "^7.13.0",
    "@pika/pack": "^0.5.0",
    
 
"@types/jest": "27.x",
    "babel-jest": "27.x",
    "coveralls": "^2.13.1",
    "jest": "27.x",
    "lint-staged": "^7.2.0",
    "np": "^5.0.3",
    "pika-plugin-build-web-babel": "^0.10.0",
    "pika-plugin-ts-types": "0.1.x",
    "pre-commit": "^1.2.2",
    "prettier": "^1.11.1",
    "typescript": "^4.3.2"
  },
   //定義js檔案和無副檔名檔案的處理方式
  "types": "dist-types/index.d.ts",
  "main": "dist-node/index.js", //指定入口檔案
  "module": "dist-web/index.js"//指定模組入口，main與module同時存在時優先使用module
}

也可在
https://github.com/yiminghe/async-validator 倉庫中，檢視原始碼。

所有原始檔目錄為：

二、檔案關係及作用

2.1、入口檔案

"main": "dist-node/index.js", //指定入口檔案

dist-node 中有 index.js 和 index.js.map 檔案。

index.js 作為主入口檔案，而 index.js.map 是 index.js 檔案壓縮後，檔案的變數名替換對應、變數所在位置等元資訊資料檔案，一般與主檔案放到同一目錄下。

"module": "dist-web/index.js"//指定模組入口

dist-web 中有 index.js 和 index.js.map 檔案

與上述的 dist-node 中的關係相同。

2.2、兩個入口有什麼區別？

{
 "main": "dist-node/index.js", //指定入口檔案
 "module": "dist-web/index.js"//指定模組入口，
}

main 與 module 都是指定入口檔案的，如果同時存在時優先使用 module 。兩個 index.js的作用及區別：

dist-node 中的 index.js 檔案

'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
.....
var Schema = /*#__PURE__*/function () {  }
.....
exports['default'] = Schema;

dist-web 中的 index.js 檔案

......
var Schema = /*#__PURE__*/function () {  }
.....
export { Schema as default };

由於原始碼太長，此處不復制，可以自行去閱讀這兩個檔案。這兩個檔案的內容除了 dist-node 中多了兩行之外，剩餘的內容完全一樣。

你知道 Object.defineProperty(exports, '__esModule', { value: true }) 有什麼作用呢？

它的作用是把一個匯出物件標識為一個 ES 模組，也可以使用以下語法：

exports.__esModule = true

詳情瞭解 main 和 module 的區別，可以檢視《package.json 中，有多個入口檔案可該咋辦？》

2.3、校驗主體

dist-types 中檔案目錄結構如圖：

• util.d.ts 檔案，是一個典型的工具函式庫。
• interface.d.ts 檔案來定義介面
• index.d.ts 檔案 宣告 Schema 類。
• rule 資料夾內定義的是校驗規則。
• validator 檔案內將檢驗的 value 分為各種型別，然後對不同型別進行不同的校驗組合，執行最終的回撥。

它們之間的關係為：