上一节带领大家学习多种安装 ECharts 的方式，估计大多数同学都直呼“Easy”，但是上一节只是让我们通过不同的方式轻松拿到了 ECharts 的整个项目，那如果我们只需要其中的一两个小组件呢？我们还需要进行整体的加载引入吗？不，按需加载可以有效的减少程序体积，避免资源浪费。So，这个小节我就带领大家去看看用其他的方式构建自己的的 ECharts 项目。

一般来说，可以直接从 或 中的 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 按需引用等，下面展开介绍。

执行 build.js 前，需要先将 ECharts 源码完整下载到本地：

# 使用 git 下载源
git clone git@github.com: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 目录下。也可查阅：。

最新版本 ECharts 源码使用 语法编写，所以原则上开发环境只要 modules 语法就可以像引用其他包一样引入 ECharts 的各个模块。下面演示如何搭建足够 ECharts 构建的基本环境，实例源码可参阅 。

我们先通过小视频演示一下安装步骤，从而帮助同学们上手。

执行命令安装 webpack 环境：

npm i -D webpack webpack-cli

在根目录下新建 webpack.con.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 环境：

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

在根目录下新建 .babelrc，输入：

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

执行命令安装 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: [, , , , , ],
		},
	],
};

myChart.setOption(option);

上例，在根目录上执行 npx webpack 命令，即可只含 echarts 核心包、bar 图表以及上例的，在中引入该即可，建议下载 查看运行。

我们先通过小视频演示一下安装步骤，从而帮助同学们上手。

执行命令安装本地 rollup 环境：

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

在跟目录下新建 rollup.con.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 环境：

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

在根目录下新建 .babelrc，输入：

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

执行命令安装 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: [, , , , , ],
		},
	],
};

myChart.setOption(option);

上例，在根目录上执行 npx rollup -c 命令，即可只含 echarts 核心包、bar 图表以及上例的，在中引入该即可，建议下载 查看运行。

ECharts 项目始于 2013 年，当时的前端工程化技术才刚起步，项目团队贴心地提供了 build.js 脚本来应对潜在的个性化需求。但现今工程化体系已经非常成熟，webpack、rollup、browserify均可定制需求，相比 build.js 更标准、容易调试、容易集成，因此建议尽量使用这些工程化环境，避免使用 build.js 脚本。