使用webpack 使用Echarts3简单入门

来源：互联网发布：深入浅出python豆瓣编辑：程序博客网时间：2024/06/01 12:07

写在前面的话，文气的人叫前言

在阅读本文前，如果你没有接触过nodejs 和 webpack, gulp grunt 这类前端自动化工具的话，你可能需要了解一番，但也不需要太深入你就能理解了，毕竟都是撸起袖子干的人。

下面先了解webpack 的一些常用的基本配置，所谓入乡随俗，webpack 把这个配置文件叫webpack.config.js, 当然没有这个文件也可以把webpack跑起来（用命令），配置文件的本质是让我们的操作变得更加简便罢了。好，上码如下：

//一个常见的Webpack配置文件var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');var ExtractTextPlugin = require('extract-text-webpack-plugin');module.exports = {  entry: __dirname + "/app/main.js",  output: {    path: __dirname + "/build",    filename: "[name]-[hash].js"  },  module: {    loaders: [      {        test: /\.json$/,        loader: "json"      },      {        test: /\.js$/,        exclude: /node_modules/,        loader: 'babel'      },      {        test: /\.css$/,        loader: ExtractTextPlugin.extract('style', 'css?modules!postcss')      }    ]  },  postcss: [    require('autoprefixer')  ],  plugins: [    new HtmlWebpackPlugin({      template: __dirname + "/app/index.tmpl.html"    }),    new webpack.optimize.OccurenceOrderPlugin(),    new webpack.optimize.UglifyJsPlugin(),    new ExtractTextPlugin("[name]-[hash].css")  ]}

如果想对webpack的有一个大概的了解，在这里我就不再重复造wheel了，推荐前人写的2篇文章：
中文版本：http://web.jobbole.com/87408/
中文版本：http://www.liuhaihua.cn/archives/408337.html
英文原文：http://www.pro-react.com/materials/appendixA/
这些文章已经写的比较详细了，推荐看看，我也不想误人子弟，哈哈。

自己动手+-+

下面我只是简单的讲解一些如何通过webpack来使用Echarts3

首先我们建立一个项目文件
例如，我的机器是pc win7 x64
我在D盘目录建立一个项目文件叫 webpage-sample-project

我假设你的机器已经安装了nodeJS
执行命令

npm init // 初始化packge.json，这是一个nodeje的文件依赖包，相当于Maven gradle 之流。

这是会要求你输入一些信息，一直默认就是了,最终文件如下：

{  "name": "webpack-sample-project",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "",  "license": "ISC"}

在根目录下，建立2个文件app,public , app 下面建立Greet.js 和 main.js 2个文件，在public中建立 index.html 文件
局部安装webpack 和 echarts

$ npm install webpack --save$ npm install echarts --save

最终package.json 文件如下：

{  "name": "wepack-sample-project",  "version": "1.0.0",  "description": "webpack demo",  "main": "index.js",  "scripts": {    "start": "webpack"  },  "author": "R",  "license": "ISC",  "dependencies": {    "echarts": "^3.2.2",    "webpack": "~1.13.0",  }}

当然如果你熟悉package.json，你也可以直接往文件中添加。运行npm install 就会把需要的nodejs 模块下载到node_module 文件夹中。

// Greeter.jsmodule.exports = function() {  var greet = document.createElement('div');  greet.textContent = "webpack 的眼里一切都是模块";  return greet;};

// main.jsvar greeter = require('./Greeter.js');var echarts = require('echarts');var myChart = echarts.init(document.getElementById('main'));// 绘制图表myChart.setOption({    title: { text: 'ECharts 入门示例' },    tooltip: {},    xAxis: {        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]    },    yAxis: {},    series: [{        name: '销量',        type: 'bar',        data: [5, 20, 36, 10, 10, 20]    }]});document.getElementById('root').appendChild(greeter());

index.html, 如下

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <title>Webpack Sample Project</title>  </head>  <body>    <div id='root'>    </div>    <div id="main" style="width: 600px;height:400px;"></div>    <script src="bundle.js"></script>  </body></html>

到根目录运行：

$ node_modules\webpack\.bin\webpack  app\mian.js  public\bundle.js

执行完就会生成一个bundle.js ，自己打开index.html 就会出现图表了
对于团队项目，强烈建议采用nodeJS非全局安装(注意是： .bin )

项目目录结构

这里写图片描述

0 0