如何应用echarts引入 var echarts = require('echarts');

Question

尝试学习echarts过程中，看到官方教程提到引入 ECharts时，就很简单的描述就一带而过了

通过 npm 上安装的 ECharts 和 zrender 会放在node_modules目录下。可以直接在项目代码中 require('echarts') 得到 ECharts。

请问这里提到的require('echarts') 如何应用，我本地有搭建了gulp环境，也通过npm进行安装的echarts，将require('echarts') 放在单独的js文件中直接报错

echarts is not defined

添加<script src="js/echarts.min.js"></script> 引用后报错消失，但官方教程里的 require('echarts') 还有什么卵用？

Answer 1

require是模块化开发的写法，gulp构建工具等可以方便的添加依赖。

模块化调用需赋值给一个变量。

let echarts = require('echarts')

直接引用会将echarts添加到root对象，也就是window上。

Answer 2

像 echarts 这种包都支持 umd 模块化规范，如果直接用 script 标签引入，就会将 echarts 挂在全局对象（window）下，所以后面的文件中都能用到 echarts 对象。

但是，在 JS 模块化开发的过程中，还可以通过 AMD，CMD 等等规范进行模块化引入。const echarts = require('echarts') 就是通过 CMD 规范进行引入，同样可以在本文件用使用 echarts 对象。这是两种不同的使用方法。

Answer 3

请看完教程，使用 require 可以达到按需加载、减小打包体积的目的。如果页面只用到了折线图，没必要把整个echarts.min.js 都引入进来，使用下面的方式比较好

// 引入 ECharts 主模块
const echarts = require('echarts/lib/echarts');
// 引入折线图
require('echarts/lib/chart/line');
// 引入提示框
require('echarts/lib/component/tooltip');
// 引入图例
require('echarts/lib/component/legendScroll');
// 引入工具箱
require('echarts/lib/component/toolbox');