使用webpack 使用Echarts3简单入门

最新推荐文章于 2023-05-16 17:59:46 发布

灯塔引路

最新推荐文章于 2023-05-16 17:59:46 发布

阅读量2k

点赞数

分类专栏： ECharts3.x 前端攻城狮 webpack 文章标签：前端 nodejs 自动化

本文链接：https://blog.youkuaiyun.com/a82793510/article/details/52240286

版权

前端攻城狮同时被 3 个专栏收录

12 篇文章

订阅专栏

ECharts3.x

4 篇文章

订阅专栏

webpack

3 篇文章

订阅专栏

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

在阅读本文前，如果你没有接触过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.js
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "webpack 的眼里一切都是模块";
  return greet;
};

// main.js
var 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 )

项目目录结构

这里写图片描述