【项目结构】

项目文件目录

├── .husky                    # 哈士奇。在git执行一些操作的时候触发一些钩子，在钩子处执行一些自己需要的命令
                              （通常用来校验两处，eslint代码规范（yarn run lint）及commit message规范）
├── .rudder                   # 程序日志
├── .yarn                     # yarn-包管理工具
├── assets                    # 静态资源主题字体svg等
├── data-sources              # 数据源？备份，无实际效果
├── dist                      # 打包后的文件
├── node_modules              # 依赖包
├── src                       # 源代码
│   ├── lib                      # 库文件
│      ├── lottie-loading            # 引入lottie库
                                    （lottie-web库可以解析导出的动画json文件，并将其以svg或者canvas的方式将动画绘制到页面中）
│   ├── mobile                   # H5端
│   ├── PC                       # PC端
│   ├── share                    # 公用组件
├──  typing                   
│   ├── module-css.d.ts          # 类型声明文件：用来为已存在的 JS 库提供类型信息
├──  .browserslistrc          # 浏览器支持列表
├──  .editorconfig            # 编辑配置
                             （用这个文件来统一不同编辑器的一些配置，比如 tab 转 2 个空格、自动插入空尾行、去掉行尾的空格等）
├──  .env                     # 环境变量配置
├──  eslintignore             # eslint忽略文件
├──  .eslintrc.json           # eslint配置项 （与.husky文件配合控制提交代码规范）
├──  gitignore                # git忽略文件    
├──  .yarnrc.yml              # yarn配置文件
├──  jsconfig.json            # 配置 webpack 别名（简化引入文件路径）
├──  package.json             # 包配置说明（项目名称，项目版本，项目执行入口文件，项目贡献者等等）
├──  README.md                # 项目说明文档
├──  rudder.config.js         # 配置页面路由跳转
├──  theme.js                 # 样式主题文件
└──  yarn.lock                # 锁定当前项目所依赖的各个包的版本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

husky - Git Hooks 工具

git hooks类似Vue的生命周期钩子一样，Git也会在它运行周期里面的某些时间点，让用户添加和执行自定义的函数,在钩子处执行一些自己需要的命令，比如代码的eslint校验等。最佳实践一般是校验两处，eslint(代码规范)及commit message规范。

大多数前端程序员对编写shell脚本是不熟悉的，这个时候就有个神奇的工具Husky来帮助我们实现Git Hooks的使用需求；

• husky初始化的时候，会先检查该项目是否通过Git来托管代码的

• 检查通过之后，会创建.husky文件夹用来存放Githooks和husky的配置

• 然后通过core.hooksPath使项目Githooks的路径指向新创建的.husky文件夹，这样husky初始化的流程大致完成了

husky 哈士奇，拦截 git hooks 的工具。为确保团队合作开发，commit 上去的代码 是统一且规范的。每个人拉下来代码在git提交前必须先进行eslint的操作。

ESlint - JavaScript代码检测工具

语法规则和代码风格的检查工具 eslint （与.husky文件配合控制提交代码规范）

Eslint的出现就是为了让开发人员可以在开发的过程中就发现错误而非在执行过程中。

Eslint的配置文件.eslintrc的格式可以包含以下五种

• JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。
• YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构
• JSON - 使用 .eslintrc.json 去定义配置的结构，ESLint 的 JSON 文件允许 JavaScript 风格的注释。
• (弃用) - 使用 .eslintrc，可以使 JSON 也可以是 YAML。
• package.json - 在 package.json 里创建一个 eslintConfig属性，在那里定义配置。

当出现多份配置的时候则会按以下优先级进行排列

1 .eslintrc.js
2 .eslintrc.yaml
3 .eslintrc.yml
4 .eslintrc.json
5 .eslintrc
6  package.json
1
2
3
4
5
6

i18n - 国际化（语言转换）

i18n（其来源是英文单词 internationalization的首末字符i和n，18为中间的字符数）是“国际化”的简称。

i18n 提供多语言转换函数（通常是$t）

yaml - 标记语言

YAML 是一个类似 XML、JSON 的标记性语言。YAML 强调以数据为中心，并不是以标识语言为重点。因而 YAML 本身的定义比较简单，号称“一种人性化的数据格式语言”。

YAML 是 “YAML Ain’t a Markup Language”（YAML 不是一种标记语言）的递归缩写。在开发的这种语言时，YAML 的意思其实是：“Yet Another Markup Language”（仍是一种标记语言）。

YAML 的语法和其他高级语言类似，并且可以简单表达清单、散列表，标量等数据形态。它使用空白符号缩进和大量依赖外观的特色，特别适合用来表达或编辑数据结构、各种配置文件、倾印调试内容、文件大纲（例如：许多电子邮件标题格式和YAML非常接近）。YAML 的配置文件后缀为 .yml。
此项目中多用来组织和处理语言包，或者用作配置文件。

data-sources - 数据源

数据源是对数据库以及对数据库交互操作的抽象，它封装了目标源的位置信息，验证信息和建立与关闭连接的操作。

数据源，简单理解为数据源头，提供了应用程序所需要数据的位置。数据源保证了应用程序与目标数据之间交互的规范和协议，它可以是数据库，文件系统等等。其中数据源定义了位置信息，用户验证信息和交互时所需的一些特性的配置，同时它封装了如何建立与数据源的连接，向外暴露获取连接的接口。应用程序连接数据库无需关注其底层是如何如何建立的，也就是说应用业务逻辑与连接数据库操作是松耦合的。

数据源可以看做程序中一个组件，它把传统中需要在代码里编写配置信息和获取连接等操作抽象出一个规范或者接口，这样不同的第三方可以自行实现该接口提供不同的策略。这样，数据源就是对应用程序是透明的，开发者只需为应用程序配置特定的数据源即可与数据库进行连接等操作。

当需要更换数据库服务器或者更换数据库种类时，只需修改配置中信息即可，无需修改程序代码。

lottie-web - 动画渲染库

Lottie 是一款由Airbnb开源的跨平台动画渲染库，支持Android, iOS, Web, Windows平台。

是专门用于解析从AE(Adobe After Effects)中通过Bodymovin插件导出的JSON文件，直接渲染动画。

Lottie方法方案是由设计师出动画，导出为json，给前端播放。

简单使用

1. 引入Lottie JS 文件
2. 定义动画渲染的容器

// loadAnimation 渲染动画
function attachLottie(element) {
  return lottie.loadAnimation({
    container: element, // 选取一个容器，用于渲染动画
    renderer: 'svg', // 渲染的格式svg/canvas/html，svg性能更优，兼容性更好
    loop: true, // 是否循环播放
    autoplay: true, // 是否自动播放
    animationData, // JSON动画数据
    // 定义JSON文件路径 与animationData属性不共存
    // path: "./loading.json",
  });
}
1
2
3
4
5
6
7
8
9
10
11
12

TIPS: 当设置path属性的时候，并不是简单的一个相对路径或者是绝对路径引入，而是lottie会发送一个http请求，访问这个json文件。如果是在vue/react项目中要注意最终的打包访问路径。

考虑页面性能更优，建议使用svg渲染方式，通过path加载远程JSON文件，使用animationData会让json文件打包到JS中

.d.ts - 类型声明文件

类型声明文件：用来为已存在的JS库提供类型信息。

TypeScript 相比 JavaScript 增加了类型声明。这些类型声明帮助编译器识别类型。创建demo.d.ts文件
原则上，TypeScript 需要开发者做到先声明后使用。这就导致开发者在调用很多原生接口（浏览器、Node.js）或者第三方模块的时候，因为某些全局变量或者对象的方法并没有声明过，导致编译器的类型检查失败。

用 ts 写的模块在发布的时候仍然是用 js 发布，这就导致一个问题：ts 那么多类型数据都没了，所以需要一个 d.ts 文件来标记某个 js 库里面对象的类型
然后 typings 就是一个网络上的 d.ts 数据库d.ts类型定义文件，用来为已存在的 JS 库提供类型信息。

这样在 JS 项目中使用这些库时，就像在用 TS 一样，都会有代码提示、类型保护等机制了。