ECharts 自定義構(gòu)建

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

1. 簡介

官方解釋：

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

慕課解釋

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 是官方定義的入口文件，對應(yīng)各個發(fā)布版本； src/echarts.js 包含框架主模塊源碼，必須引入；src/component 目錄包含各類組件源碼； src/chart 目錄包含各類圖表源碼。

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

2. 使用 build.js

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

# 使用 git 下載源文件
git clone git@github.com:apache/incubator-echarts.git

cd incubator-echarts

# 安裝依賴
npm i

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

執(zhí)行完畢后，可通過命令查看構(gòu)建腳本的幫助文檔：

node build/build.js --help

關(guān)鍵參數(shù)包括：

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

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

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

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

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

# 使用自定義語言包構(gòu)建
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 語法編寫，所以原則上開發(fā)環(huán)境只要支持 modules 語法就可以像引用其他代碼包一樣引入 ECharts 的各個模塊。下面演示如何搭建一個足夠支持 ECharts 構(gòu)建的基本環(huán)境，實例源碼可參閱 github。

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

安裝 webpack

執(zhí)行命令安裝 webpack 環(huán)境：

npm i -D webpack webpack-cli

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

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

執(zhí)行命令安裝 babel 環(huán)境：

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

在根目錄下新建配置文件 .babelrc，輸入內(nèi)容：

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

安裝 ECharts

執(zhí)行命令安裝 ECharts：

npm i echarts

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

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

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

// 指定圖表的配置項和數(shù)據(jù)
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);

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

4. 使用 rollup

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

安裝 rollup

執(zhí)行命令安裝本地 rollup 環(huán)境：

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

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

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

執(zhí)行命令安裝 babel 環(huán)境：

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

在根目錄下新建配置文件 .babelrc，輸入內(nèi)容：

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

安裝 ECharts

執(zhí)行命令安裝 ECharts：

npm i echarts

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

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

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

// 指定圖表的配置項和數(shù)據(jù)
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);

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

5. 個人經(jīng)驗

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

6. 小結(jié)

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