ECharts 自定義構建

上一節帶領大家學習多種安裝 ECharts 的方式，估計大多數同學都直呼“Easy”，但是上一節只是讓我們通過不同的方式輕松拿到了 ECharts 的整個項目，那如果我們只需要其中的一兩個小組件呢？我們還需要進行整體的加載引入嗎？不，按需加載可以有效的減少程序體積，避免資源浪費。So，這個小節我就帶領大家去看看用其他的方式構建自己的的 ECharts 項目。

1. 簡介

官方解釋：

一般來說，可以直接從 CDN 或 github 中的 echarts/dist 文件夾獲取構建好的 ECharts，也可以自己構建僅包含自己所需要圖表、組件的代碼包。

慕課解釋

ECharts 部分核心源碼文件如下：

.
├── src
|   ├── echarts.js
|   ├── component
|       ├── title.js
|       └── axis.js
|   └── chart
|       ├── bar.js
|       └── line.js
├── echarts.all.js
├── echarts.simple.js
└── echarts.common.js

其中， echarts.all.js、echarts.simple.js、echarts.common.js 是官方定義的入口文件，對應各個發布版本； src/echarts.js 包含框架主模塊源碼，必須引入；src/component 目錄包含各類組件源碼； src/chart 目錄包含各類圖表源碼。

自定義構建就是按照開發需求，在 src/echarts.js 基礎上引入各類組件、圖表，再使用構建工具打包出剛好契合項目需求的代碼包，可以減少體積，避免浪費流量。有多種方法實現自定義打包，包括：使用 ECharts 提供的 build.js 腳本、使用 webpack 按需引用、使用 rollup 按需引用等，下面展開介紹。

2. 使用 build.js

執行 build.js 前，需要先將 ECharts 源碼完整下載到本地：

# 使用 git 下載源文件
git clone [email protected]:apache/incubator-echarts.git

cd incubator-echarts

# 安裝依賴
npm i

官網提供的示例是用 npm install 方式下載源碼，但實測發現下載 ECharts 包沒有定義 peerDependencies，需要手動安裝其他依賴，過程比較繁瑣，所以這里推薦通過 git clone 下載源碼。

執行完畢后，可通過命令查看構建腳本的幫助文檔：

node build/build.js --help

關鍵參數包括：

執行構建命令前，需要先定義構建的入口文件。入口文件指明需要打包的模塊，簡單示例：

// 引入 ECharts 主模塊。
export * from './src/echarts';

// 引入餅圖
import './src/chart/pie';

將示例代碼保存到 ECharts 根目錄，命名為 echarts.custom.js，執行命令，即可生成只包含指定模塊的代碼文件：

node build/build.js -i echarts.custom.js -o echarts.custom.dist.js

# 使用自定義語言包構建
node build/build.js -i e.test.js -o e.test.dist.js --lang ./lang.custom.js

支持引入打包的圖表都定義在 src/chart 目錄下；組件則定義 在 src/component 目錄下。也可查閱：https://github.com/apache/incubator-echarts/blob/master/index.js。

3. 在 webpack 下使用 ECharts

最新版本 ECharts 源碼使用 es6 modules 語法編寫，所以原則上開發環境只要支持 modules 語法就可以像引用其他代碼包一樣引入 ECharts 的各個模塊。下面演示如何搭建一個足夠支持 ECharts 構建的基本環境，實例源碼可參閱 github。

我們先通過一個小視頻演示一下安裝步驟，從而幫助同學們快速上手。

安裝 webpack

執行命令安裝 webpack 環境：

npm i -D webpack webpack-cli

在根目錄下新建配置文件 webpack.config.js，輸入內容：

const path = require('path');

module.exports = {
	mode: 'none',
	entry: './src/index.js',
	output: {
		filename: 'bundle.js',
		path: path.resolve(__dirname, 'dist'),
	},
	module: {
		rules: [
			{
				test: /\.js$/,
				loader: 'babel-loader',
				exclude: /node_modules/,
			},
		],
	},
};

安裝 babel

執行命令安裝 babel 環境：

npm i -D @babel/core @babel/preset-env babel-loader

在根目錄下新建配置文件 .babelrc，輸入內容：

{
  "presets": [
    "@babel/preset-env"
  ]
}

安裝 ECharts

執行命令安裝 ECharts：

npm i echarts

安裝完成后，即可通過 import 或 require 語法引入 ECharts。例如，新建 src/index.js 文件，輸入內容：

import * as echarts from 'echarts/src/echarts';
import 'echarts/src/chart/bar';

const myChart = echarts.init(document.getElementById('app'));

// 指定圖表的配置項和數據
const option = {
	title: {
		text: 'ECharts 入門示例',
	},
	tooltip: {},
	legend: {
		data: ['銷量'],
	},
	xAxis: {
		data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子'],
	},
	yAxis: {},
	series: [
		{
			name: '銷量',
			type: 'bar',
			data: [5, 20, 36, 10, 10, 20],
		},
	],
};

myChart.setOption(option);

上例代碼，在根目錄上執行 npx webpack 命令，即可生成只含 echarts 核心包、bar 圖表以及上例代碼的文件，在頁面中引入該文件即可，建議下載 示例源碼 查看運行效果。

4. 使用 rollup

我們先通過一個小視頻演示一下安裝步驟，從而幫助同學們快速上手。

安裝 rollup

執行命令安裝本地 rollup 環境：

npm i -D rollup rollup-plugin-uglify rollup-plugin-node-resolve

在跟目錄下新建配置文件 rollup.config.js，輸入內容：

import resolve from 'rollup-plugin-node-resolve';
import { uglify } from 'rollup-plugin-uglify';
import babel from 'rollup-plugin-babel';

export default {
	input: './src/index.js',
	plugins: [resolve(), babel(), uglify()],
	output: {
		format: 'umd',
		sourcemap: true,
		file: 'dist/bundle.js',
	},
};

安裝 babel

執行命令安裝 babel 環境：

npm i -D @babel/core @babel/preset-env

在根目錄下新建配置文件 .babelrc，輸入內容：

{
  "presets": [
    "@babel/preset-env"
  ]
}

安裝 ECharts

執行命令安裝 ECharts：

npm i echarts

安裝完成后，可復用 webpack 例子中的 src/index.js 代碼：

import * as echarts from 'echarts/src/echarts';
import 'echarts/src/chart/bar';

const myChart = echarts.init(document.getElementById('app'));

// 指定圖表的配置項和數據
const option = {
	title: {
		text: 'ECharts 入門示例',
	},
	tooltip: {},
	legend: {
		data: ['銷量'],
	},
	xAxis: {
		data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子'],
	},
	yAxis: {},
	series: [
		{
			name: '銷量',
			type: 'bar',
			data: [5, 20, 36, 10, 10, 20],
		},
	],
};

myChart.setOption(option);

上例代碼，在根目錄上執行 npx rollup -c 命令，即可生成只含 echarts 核心包、bar 圖表以及上例代碼的文件，在頁面中引入該文件即可，建議下載 示例源碼 查看運行效果。

5. 個人經驗

ECharts 項目始于 2013 年，當時的前端工程化技術才剛起步，項目團隊貼心地提供了 build.js 腳本來應對潛在的個性化需求。但現今工程化體系已經非常成熟，webpack、rollup、browserify均可支持定制需求，相比 build.js 更標準、容易調試、容易集成，因此建議盡量使用這些工程化環境，避免使用 build.js 腳本。

6. 小結

本節主要介紹按需構建 Echarts 版本的幾個方法，包括：使用官方提供的 build.js 工具、使用 webpack 構建、使用 rollup 構建。按需構建能夠減少包尺寸，是非常高效的性能優化手段，讀者可根據實際場景參考使用。