构建

构建说明

建立一套完善的构建流程是为了让渲染引擎的使用者可以更方便、快捷的引用和使用引擎库

引用方案

由于fego-chart的定位是跨平台绘制引擎，所以在设计构建流程上比一般的库多了一些复杂度，这体现在

• 开发时绘制组件有web端和移动端两种实现
• 使用者会在web端和移动端分别引用引擎库（工程内），或者在浏览器直接引用

为了设计出更好的构建和引用方式，我们调研了一些跨平台库，总结出三类引用方式

• Web/移动端分离: 这种方式是Victory/Victory-Native图表库使用的，好处是不同平台所安装的库分离，缺点是要维护多个库，带来开发和维护上的成本
• Web/移动端不分离，用户通过配置选择所需文件: Antd-mobile使用了这种方式，用户通过webpack resolve属性来决定在使用web版或者移动版文件,也是fego-chart目前采用的方式
• Web/移动端不分离，库自行判断: react-primitives使用了这种方式，该库会判断用户所在平台并自动帮用户选择文件，这种方式用户所需要做的就是引入库，是对用户上手最友好的方式

构建方案

fego-chart内置了两种构建流程：

构建方式1(默认)

• 输出commonJS格式：使用babel将es6文件打包成es5文件,维持源代码目录结构,输出路径为lib

  1	npm run build-cjs

构建方式2

• 输出umd格式: 使用webpack将所有模块文件打包成一个bundle文件,输出路径为dist

  1	npm run build-umd

补充说明

一条完整的开发、构建流程应该是这样的:

1. 开发: 开发工作在src里完成
2. 转译: 将src里的ES6+源代码转译成ES5代码，使用fego-chart的开发者可以通过npm引入fego-chart而不必做其他配置
3. 打包: 如果使用者需要在浏览器环境下直接引用fego-chart,我们可以将fego-chart打包成bundle.js提供给使用者