上一篇文章《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": "git@github.com: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 分为各种类型,然后对不同类型进行不同的校验组合,执行最终的回调。

它们之间的关系为:

 

async-validator 源码学习笔记(二):目录结构的更多相关文章

  1. jquery源码学习笔记二:jQuery工厂

    笔记一里记录,jQuery的总体结构如下: (function( global, factory ) { //调用factory(工厂)生成jQuery实例 factory( global ); }( ...

  2. jQuery源码学习笔记二

    //添加实例属性和方法 jQuery.fn = jQuery.prototype = { // 版本,使用方式:$().jquery弹出当前引入的jquery的版本 jquery: core_vers ...

  3. yii2源码学习笔记(二十)

    Widget类是所有部件的基类.yii2\base\Widget.php <?php /** * @link http://www.yiiframework.com/ * @copyright ...

  4. yii2源码学习笔记(二)

    yii\base\Object代码详解 <?php /** * @link http://www.yiiframework.com/ * @copyright Copyright (c) 200 ...

  5. jquery源码学习笔记三:jQuery工厂剖析

    jquery源码学习笔记二:jQuery工厂 jquery源码学习笔记一:总体结构 上两篇说过,query的核心是一个jQuery工厂.其代码如下 function( window, noGlobal ...

  6. async-validator 源码学习笔记(四):validator

    系列文章: 1.async-validator 源码学习(一):文档翻译 2.async-validator 源码学习笔记(二):目录结构 3.async-validator 源码学习笔记(三):ru ...

  7. async-validator 源码学习笔记(三):rule

    系列文章: 1.async-validator 源码学习(一):文档翻译 2.async-validator 源码学习笔记(二):目录结构 rule 主要实现的是校验规则,文件结构为下图: 一.rul ...

  8. async-validator 源码学习笔记(五):Schema

    系列文章: 1.async-validator 源码学习(一):文档翻译 2.async-validator 源码学习笔记(二):目录结构 3.async-validator 源码学习笔记(三):ru ...

  9. async-validator 源码学习笔记(六):validate 方法

    系列文章: 1.async-validator 源码学习(一):文档翻译 2.async-validator 源码学习笔记(二):目录结构 3.async-validator 源码学习笔记(三):ru ...

  10. Spring源码学习笔记12——总结篇,IOC,Bean的生命周期,三大扩展点

    Spring源码学习笔记12--总结篇,IOC,Bean的生命周期,三大扩展点 参考了Spring 官网文档 https://docs.spring.io/spring-framework/docs/ ...

随机推荐

  1. ListIterator特有的方法

    import java.util.ArrayList; import java.util.List; import java.util.ListIterator; /* 迭代 listIterator ...

  2. rsync 远程同步部署——上下行同步

    rsync 远程同步部署--上下行同步 1.rsync (Remote Sync,远程同步) : 是一个开源的快速备份工具,可以在不同主机之间镜像同步整个目录树,支持增量备份,并保持链接和权限,且采用 ...

  3. 从上下文中获取所有的原生controller

    1 /** 2 * 获取项目所有被注解修饰的url 3 * @param run 4 */ 5 public void getAllUrl(ConfigurableApplicationContext ...

  4. 使用 Sa-Token 解决 WebSocket 握手身份认证

    前言 相比于 Http 的单项通信方式,WebSocket 可以从服务器向浏览器主动推送消息,这一特性可以帮助我们完成诸如 订单消息推送.IM实时聊天 等一些特定业务. 然而 WebSocket 本身 ...

  5. Solution -「CF 840C」On the Bench

    \(\mathcal{Description}\)   Link.   给定数列 \(\{a_n\}\),求排列 \(\{p_n\}\) 的个数,使得 \((\forall i\in[1,n))(a_ ...

  6. PHP7.x环境下安装redis扩展

    注:以下介绍的安装方式为PHP的安装路径为/usr/local/php,如果你的服务器上PHP的安装目录不一致请按实际情况处理. 首先下载PHP7的redis扩展 wget https://githu ...

  7. Vue 源码解读(2)—— Vue 初始化过程

    当学习成为了习惯,知识也就变成了常识. 感谢各位的 点赞.收藏和评论. 新视频和文章会第一时间在微信公众号发送,欢迎关注:李永宁lyn 文章已收录到 github 仓库 liyongning/blog ...

  8. shell切割nginx日志

    用linux自带的计划任务切割nginx日志,每天0点执行 #!/bin/bash #GuoYabin nginxpid=`/bin/ps aux|grep nginx |awk /master/'{ ...

  9. 华为eNSP的防火墙(USG6000V)如何使用Web界面登入

    文章目录 华为eNSP的防火墙(USG6000V)如何使用Web界面登入 前言 一.使用步骤 1.导入USG6000V的镜像包 总结 前言 在华为的eNSP的模拟器上如何使用Web界面去管理与使用模拟 ...

  10. png图片隐写