我们按照echarts的官网用npm安装echarts并用require(“echarts”)引入echarts对象,但是如果直接运行js脚本会报“Uncaught ReferenceError: require is not defined”的错误,因为require()是nodejs的语法,应用于服务端,所以浏览器不能识别require()方法。
所以我们就需要借助webpack、glup、grunt等打包工具把require()转化为浏览器能识别的语法。这里我使用简单的webpack对项目中的echarts进行打包
新建一个目录,在目录中新建两文件夹dist、src和一个webpack.config.js的js文件,再在根目录npm init新建一个项目(前提是你的电脑安装了nodejs和npm),如图示:
- == 注:webpack.config.js不能随便命名,因为它是webpack打包时的默认入口==
2.在src->js目录下新建一个main.js的js文件,引入官方demo:
var echarts = require('echarts');
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
console.log(myChart);
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
3.在根目录下的index.html生命容器的ID和高宽:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echarts</title>
</head>
<body>
<div id="main" style="height: 400px;width: 600px"></div>
</body>
</html>
4.然后在项目中用npm安装webpack、webpack-cli、echarts:
npm install webpack --save-dev
npm install webpack-cli --save-dev
npm install echarts --save
npm install html-webpack-plugin --save
5.在package.json中的script对象上配置
"build": "webpack"//配置webpack在脚本中的命令
最后的webpack.json应该是:
{
"name": "echarts_project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.1"
},
"dependencies": {
"echarts": "^4.2.1"
}
}
6.最后进行最关键的webpack.config.js的配置,此处需要下载一个打包HTML代码的插件-html-webpack-plugin:
var webpackPlugin=require("html-webpack-plugin");
module.exports={
entry: './src/js/main.js',//入口,当执行webpack命令的时候,就会在这里的路径进去寻找要打包的文件(相对于根目录的的路径),这里是main.js
output:{//__dirname 是当前文件夹的绝对路径;__filename是当前文件的绝对路径
path:__dirname+"/dist",//打包生成的文件存放的目录
filename: "js/bundle.js"//打包生成的文件的文件名
},
plugins: [
new webpackPlugin({
template: "index.html"//对打包生成的HTML指定一个生成文件
})
]
};
7、最后在命令行执行npm run build开始打包生成,最后可以在dist文件夹中看到打包后的文件:
最后执行index.html在浏览器中运行: