# 准备工作

# 选定版本

当时下载的最新版本,应该是 4.3.0 以上的版本, 具体 git 提交的 ID 41d902816d9b934eae6e2c846afce5ef54974502

# 克隆版本

git clone https://github.com/ecomfe/zrender.git

如果版本相差太大的话,建议检出 41d902816d9b934eae6e2c846afce5ef54974502 版本

git checkout 41d902816d9b934eae6e2c846afce5ef54974502

# 安装依赖

npm install

or

yarn

# 执行 npm 脚本

  "scripts": {
    "prepublish": "node build/build.js --prepublish",
    "build": "node build/build.js --release",
    "dev": "node build/build.js --watch",
    "test": "node build/build.js",
    "lint": "./node_modules/.bin/eslint src"
  }

# 编译

npm run build

生成 <dist> 目录、 <lib> 目录、 index.js 文件

  • <dist> 目录中包含 zrender.js zrender.js.map zrender.min.js, iife 格式
  • <lib> 目录中包含 zrender 的各个模块,amd格式

zrender 使用 rollup 打包,生成包的格式如下:

  1. amd -- 异步模块定义,用于像RequestJS这样的模块加载器。
  2. cjs -- CommonJS, 适用于Node或Browserify/webpack
  3. es -- 将软件包保存为ES模块文件。
  4. iife -- 一个自动执行的功能,适合作为 <script> 标签这样的。
  5. umd -- 通用模块定义,以amd, cjs, 和 iife 为一体。

# 目录结构

主要的目录结构,其他的删除掉了

├── build (编译相关)
├── dist (编译生成的文件, iife)
├── lib (编译生成的文件,AMD)
├── index.js (库的入口)
├── package.json (项目配置文件)
├── src (源文件)
├── test (实例文件)
└── zrender.all.js (编译入口文件)

# build

# build.js

用于编译,使用 commander 来做命令行界面的整解决方案, 以 zrender.all.js 为入口,根据参数来选择编译还是监听模式。

相关链接:

commander: https://www.npmjs.com/package/commander

# src

zrender 的源代码

# zrender.all.js

编译的入口文件


export * from './src/zrender';
export * from './src/export'; 

import './src/svg/svg';
import './src/vml/vml';