怎么看源码

查看第一次提交记录

git log --reverse --oneline

检出分支到指定提交

git checkout

关键字日志

# 查看 commit 带有 build 的日志
git log --grep=build

提交信息

学会查看最开始得的提交信息，以下代码可以查看项目头五次得提交信息：

git log --reverse --oneline -5

--reverse 表示逆序
--oneline 表示简化输出信息
-n 表示输出n次提交记录

element-plus 项目最早的几次提交记录：

70995def2 update
1e981eadc update
2b0f192c5 update
5da603bff feat: add commit cz & vue-shim.d.ts
393830f94 fix/typescripting-button-component - Adding type definition for button component
e983ea1c4 fix/typescripting-button-component - Add type definition for button component
e08d5c627 Merge pull request #1 from element-plus/fix/typescripting-button-component
8e642a845 feat: add lerna basic config
165b17ac7 fix: set moduleResolution to node
95d0278c8 Merge pull request #11 from element-plus/feat-lerna
9a58577a7 chore: add editorconfig file
398fdb3ed Merge pull request #13 from element-plus/chore/editorconfig
dd01db13f feat/template-generator - Add `gc.sh` as template generator - Add `gc` as npm script to generate boilerplate
0c483880a Address PR comments
778113f2a fix: add dependencies to peer
b42f434c1 feat: add jest basic config
f0c59af2b feat: add the first test case
dfef2b9dc Merge pull request #15 from element-plus/fix/peer-dep
d24bbc9be Merge branch 'dev' of github.com:element-plus/element-plus into feat/test
1ae9f4635 feat: move jest to rootdir
63a6664a0 feat/add-storybook - Add story book for component previewing - Add custom preview method for renderering Vue3 Component - Modify scripts for storybook boilerplate - Add documentation in README for booting and previewing project
bf022e386 feat: add tests dir to template
b0984b0cb - Restore doc folder
0c2c8ea3f Merge pull request #22 from element-plus/feat/storybook
e2f7173c0 Merge branch 'dev' of github.com:element-plus/element-plus into feat/test

项目配置阶段

TS 支持

切换到第四次提交：

git checkout 5da603bff

第四次提交添加了 vue-shim.d.ts 文件。

shims-vue.d.ts是为了 typescript 做的适配定义文件，因为.vue 文件不是一个常规的文件类型，ts 是不能理解 vue 文件是干嘛的，添加这个文件是告诉 ts，vue 文件是这种类型的。

// vue-shim.d.ts

declare module '*.vue' { //declare声明宣告， 声明一个ambient module(即:没有内部实现的 module声明) 
  import { Component } from 'vue'
  const _default: Component
  export default _default
}

monorepo 项目管理

element-plus 在创建阶段使用 lerna 进行包管理，（后面更改为 pnpm monorepo ，关于为什么切换成 pnpm ，处了 pnpm 空间占用小，速度较快等众多优点之外，可能也是由于lerna不再维护的原因吧。详细内容可以查看这篇文章：[译]用 PNPM Workspaces 替换 Lerna + Yarn ）。learn 将分别管理 element-plus 项目与组件库的依赖版本管理，可以分别将每个组件单独发布成npm包，每个组件都有一个package.json文件。

切换到第七次提交：

git checkout 8e642a845

此时项目运行起来是这样的：

// packages\button\package.json
{
  "name": "@element-plus/button",
  "version": "0.0.0",
  "main": "dist/index.js",
  "license": "MIT",
  "dependencies": {
    "vue": "^3.0.0-rc.1"
  }
}

使用了 workspaces 匹配 packages 目录，依赖会统一放在根目录下的 node-modules，而不是每个组件下都有，这样相同的依赖可以复用，目录结构也更加清晰。

// package.json
"workspaces": [
    "packages/*"
],

element-plus 源码学习：项目构建

怎么看源码

提交信息

项目配置阶段

TS 支持

monorepo 项目管理