自定义构建Echarts问题描述

今天我们来学习一下Echarts，本文主要是总结自定义构建Echarts遇到的问题，跟着我一起来学习吧~

1.使用命令行，创建自己的工程：

1 2	mkdir myProject cd myProject

2.在 myProject 目录下使用命令行，初始化工程的 npm 环境并安装 echarts（这里前提是您已经安装了 npm）：

1 2	npm init npm install echarts --save

3.使用 echarts 提供的构建脚本自定义构建

在这个例子中，我们要创建一个饼图，并且想自定义构建一个只含有饼图的 echarts 文件，从而能使 echarts 文件的大小比较小一些。
echarts 已经提供了构建脚本 echarts/build/build.js，基于 Node.js 运行。我们可以在 myProject 目录下使用命令行，看到它的使用方式：

1	node node_modules/echarts/build/build.js --help

注意：这里会出现报错

1	Error: Cannot find module 'XXX'

翻译出来就是找不到 ‘XXX’ 组件，我也是通过查找的方法，进行实践，缺啥就安装啥，可能会有很多的模块找不到，就一个一个进行安装就行，执行

1 2	npm install XXX --save //这里的 XXX 指的是报错中缺少的模块名

以上几个模块安装成功就会显示如下，你可以输入–help指令查看参数的含义：

其中我们在这个例子里会用到的参数有：

-i：代码入口文件，可以是绝对路径或者基于当前命令行路径的相对路径。
-o：生成的 bundle 文件，可以是绝对路径或者基于当前命令行路径的相对路径。
–min：是否压缩文件（默认不压缩），并且去多余的打印错误信息的代码，形成生产环境可用的文件。
–lang ：是否使用其他语言版本，默认是中文。例如：–lang en 表示使用英文，–lang my/langXX.js 表示构建时使用 /my/langXX.js 替代 echarts/lib/lang.js 文件。
–sourcemap：是否输出 source map，以便于调试。
–format：输出的格式，可选 ‘umb’（默认）、’amd’、’iife’、’cjs’、’es’。

4.既然我们想自定义构建一个只含有饼图的 echarts 文件，我们需要创建一个入口文件，可以命名为 `myProject/echarts.custom.js`，文件里会引用所需要的 echarts 模块：

// 引入 echarts 主模块。
export * from 'echarts/src/echarts';
// 引入饼图。
import 'echarts/src/chart/pie';
// 在这个场景下，可以引用 `echarts/src` 或者 `echarts/lib` 下的文件（但是不可混用），
// 参见下方的解释：“引用 `echarts/lib/**` 还是 `echarts/src/**`”。

5.然后我们可以在 myProject 目录下使用命令行，这样开始构建：

1	node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js

注意：这里会出现报错

1	TypeError: uglifyPlugin is not a function

出错原因是依赖插件rollup-plugin-uglify版本过高，查看当前版本：

1	npm view rollup-plugin-uglify versions

重新npm install特定的版本：

1	npm install rollup-plugin-uglify@3.0.0 --save

这回就能构建成功了这样，myProject/lib/echarts.custom.min.js 就生成了。

6.我们可以创建 myProject/pie.html 来使用它：

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <title>myProject</title>
    <!-- 引入 lib/echarts.custom.min.js -->
    <script src="lib/echarts.custom.min.js"></script></head><body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        // 绘制图表。
        echarts.init(document.getElementById('main')).setOption({
            series: {
                type: 'pie',
                data: [
                    {name: 'A', value: 1212},
                    {name: 'B', value: 2323},
                    {name: 'C', value: 1919}
                ]
            }
        });
    </script></body></html>