ECharts webpack

最新推荐文章于 2021-12-03 17:25:03 发布

飞走的鸭子

最新推荐文章于 2021-12-03 17:25:03 发布

阅读量10w+

点赞数

文章标签： javascript html5

本文链接：https://blog.csdn.net/a984120978/article/details/111188789

版权

我们按照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在浏览器中运行：

飞走的鸭子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ECharts webpack

我们按照echarts的官网用npm安装echarts并用require(“echarts”)引入echarts对象，但是如果直接运行js脚本会报“Uncaught ReferenceError: require is not defined”的错误，因为require()是nodejs的语法，应用于服务端，所以浏览器不能识别require()方法。所以我们就需要借助webpack、glup、grunt等打包工具把require()转化为浏览器能识别的语法。这里我使用简单的webpack对项目中的ec..
复制链接

扫一扫