element-plus 解析-目录结构

口水鱼
2,751 阅读2分钟

为了对框架有个初步的印象，我们先了解一下element的目录结构,目录中省略了一下次要的文件,如更新日志,node_modules等。

.
├── LICENSE
├── README.md
├── babel.config.js
├── build
├── commitlint.config.js
├── es
├── jest.config.js
├── lerna.json
├── lib
├── package.json
├── packages
├── scripts
├── tsconfig.json
├── typings
├── website
├── website-dist
└── yarn.lock

配置文件

babel.config.js

babel的配置文件，用来将编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

jest.config.js

jest的配置文件，用来对添加组件代码进行单元测试。

tsconfig.json

typescript的配置文件, vue3使用了typescript重写,作为基于vue3重构对element-plus自然也使用了typescript。

commitlint.config.js

commitlint的配置文件，用来规范git提交的message。

lerna.json

lerna一个用于管理具有多个程序包的JavaScript项目的工具

脚本文件

scripts

build.sh

这里用到了webpack和rolllup打包需要发布的文件，如将scss转为css，vue文件转为js，ts文件转为js等，

gc.sh

通过模版，方便添加新组件

publish.sh

将新版本发布到npm中

update-versions.sh

批量更新项目中引用到的vue版本号

build

scripts/build.sh的工作是通过package.json的scripts调用这里的文件触发的。

package.json

我们想要了解一个npm项目需要首先看他的package.json文件,通过该文件我们可以看的入口文件位置、依赖库、都有那些脚本命令等内容，这里我着重介绍下scripts,包含项目中用到的脚本命令，下面我介绍其中几个命令

  • bootstrap: 安装依赖包
  • test: 运行单元测试
  • lint: eslint检查
  • fast-build: 打包源码文件的快捷命令，
  • website-build: 构建官网,如果你想要在离线状态下访问需要用到这个命令
  • gen: 添加新组的快捷方式，如我们想要添加一个button的组件可以执行yarn gen button,

原始代码

packages

通过打包工具对配置文件rollup.config.bundle,可以知道这是原始代码存放目录,里面包含了各个组件，样式等原始代码，打包工具通过vue-loader或者rollup-plugin-vue,将单文件组件.vue打包成.js文件,这里比lib或者es文件中经过转换后的代码更易读。

其他

.github

这个文件主要通过Github Action为仓库添加自动化，如: 更新gh-pages，单元测试、新版本发布等

lib

fast-build命令打包后的文件 lib文件夹为CommonJS格式,适用于 Node 和 Browserify/Webpack等环境 此外为了方便下面这种方式使用还在lib中打包了单文件引入的index.esm.js、index.full.js文件

<script src="https://unpkg.com/element-plus/lib/index.full.js"></script>

es

fast-build命令打包后的文件 es文件夹下为ES格式，可以通过 <script type=module> 标签引入

typings

源码中用到对ts类型定义文件

website

构建官网的源码

website-dist

website-build命令打包后的文件，官网打包后的代码

avatar
文章
阅读
粉丝