Webpack打包简单的使用ECharts，模块化处理的简单演示

来源：互联网发布：收割机webshell扫描器编辑：程序博客网时间：2024/06/07 04:42

参考

1、 webpack的很详细的教程阮一峰大神写的 https://github.com/ruanyf/webpack-demos#demo01-entry-file-source

2、官方的文档，我看了一点太多了没有仔细的看完 http://webpack.github.io/docs/usage.html

3、 Echarts教程，使用模块化规范
http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts

使用

1、安装Node

2、初始化项目结构

npm init

3、安装需要的webpack,ECharts,可以使用全局安装，-g或者安装到项目中,安装自己需要的全部的模块。

npm install --save-dev webpack  npm install --save jquerynpm install --save echarts

4、创建webpack.config.js 文件，这里就是进行webpack配置的文件,比如你要使用react或者ES6的语法就需要配置转换成浏览器可以认识的，还有就是将模块化的文件就行打包成浏览器可以识别的。
这里就配置一个简单的，不需要特别的复杂，我们仅仅是使用一下，看看模块化的特性！

module.exports = {    entry: {        bundle1: './main.js',    },    output: {        filename: 'bundle2.js'    }};

5、通过 npm 上安装的 ECharts 和 zrender 会放在node_modules目录下。可以直接在项目代码中 require(‘echarts’) 得到 ECharts。
ECharts：使用的主要的关键点在于，或者ehcarts对象，将一个结点绑定到一个新的图表上，然后在进行设置其属性，setOption();这里的属性配置文件，你可以从各种的地方去获取，通过ajax,或者其他的路径
这里是通过jquery获取Json文件，在进行绑定，刷新图表。
main.js

var echars = require("echarts");var $ =require("jquery");var mychars = echars.init(document.getElementById("test"));var options ={    title: { text: 'ECharts 入门示例' },    tooltip: {},    xAxis: {        data: []    },    yAxis: {},    series: [{        name: '销量',        type: 'bar',        data: []    }]};mychars.setOption(options);$.get("data.json").done(function (data) {    mychars.setOption({        xAxis: {            data: data.data        },        series: [{            // 根据名字对应到相应的系列            name: '销量',            data: data.cat        }]    })});

data.json

{ "cat":["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],  "data":[5, 20, 36, 10, 10, 20]}

index.html 非常的简单

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body><div id="test" style="width: 500px;height: 500px;position: fixed;left: 50px;top:50px"></div><script src="./bundle2.js" type="text/javascript"></script></body></html>

6、此时，我们只需要将main.js这个模块化的文件进行打包处理，转换到bundle2，这样我们才可以看到数据显示

#在控制台中输入 webpack 即可处理

然后进行访问浏览器即可看到图片
这里写图片描述

7、到现在为止，我们可以简单的体验一下子模块化打包工具的使用。

8、我是弄后台的，可能或喜欢上前端啊！恐怖！

0 0