2七、初步探索echarts源碼

一、首先發現隨筆中凡是和echarts相關的點擊率都特別高，因而乎就接着寫了echarts由於感受要轉點擊率

　　首先聲明我並非專業作前端的，因此若是有些說得不對的地方，但願前端大神們出來指正

首先發現echart是由webpack進行打包的，

因此這裏先行講解一下webpack 打包工具

webpack是對於node.js進行包管理的一個工具

（1）首先上網https://nodejs.org/en/下載最新的node.js的msi包管理程序，並進行安裝

（2）在打開控制檯，輸入npm install webpack -g來進行安裝npm

　　　　　　　　　　而後繼續輸入命令npm init npm install webpack --save來說你的js應用程序的依賴寫入 package.json 包

（3）建立以下所示的項目目錄

（4）接下來，咱們在下加上以下代碼|- dist
|- src
    |- index.js
    |- index.html
    |- style.css
    |- demo.png(隨便找一張圖片就能夠)
|- package.json
|- webpack.config.jswebpack.config.js

// webpack.config.js
var path = require('path')
var webpack = require('webpack');

module.exports = {
  entry: ['./src/index'],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false,
      },
    })
  ],
  module: {
    loaders: [{
      test: /\.css$/,
      loaders: ['style', 'css']
    },
    {
        test: /\.(png|jpg)$/,
        loaders: [
            'file?hash=sha512&digest=hex&name=[hash].[ext]',
            'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
    }]
  }
}

　　在開始用webpack以前，要先安裝相對應的模塊，解析css文件 圖片文件以及由於要對文件進行壓縮，因此也要用到上文中所說的webpack自身內置的插件,因此也要導入webpack模塊

（5）而後在DOM窗口執行

npm install style-loader css-loader image-webpack-loader webpack --save-dev

命令，安裝 webpack內置的css-loader的插件來解析css文件，

module.loaders 是最關鍵的一塊配置。它告知 webpack 每一種文件都須要使用什麼加載器來處理

module: {
        //加載器配置
        loaders: [
            //.css 文件使用 style-loader 和 css-loader 來處理
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            //.js 文件使用 jsx-loader 來編譯處理
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            //.scss 文件使用 style-loader、css-loader 和 sass-loader 來編譯處理
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            //圖片文件使用 url-loader 來處理，小於8kb的直接轉爲base64
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    }


//最後是 resolve 配置，這塊很好理解，直接寫註釋了

resolve: {
        //查找module的話從這裏開始查找
        root: 'E:/github/flux-example/src', //絕對路徑
        //自動擴展文件後綴名，意味着咱們require模塊能夠省略不寫後綴名
        extensions: ['', '.js', '.json', '.scss'],
        //模塊別名定義，方便後續直接引用別名，無須多寫長長的地址
        alias: {
            AppStore : 'js/stores/AppStores.js',//後續直接 require('AppStore') 便可
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
    }

 

（6）執行完成後再執行webpack命令，看到以下內容說明打包成功

（7）而後再在入口文件index.js中加入命令

webpack 的執行也很簡單，直接執行require('./style.css');這樣就可使用style.css中的樣式表了

（8）

webpack --display-error-details

 1 (function webpackUniversalModuleDefinition(root, factory) {//經過這裏能夠看出Echarts是經過webpack進行打包的，webpack是近期最火的一款模塊加載器兼打包工具
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//，它能把各類資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都做爲模塊來使用和處理。
 2     if(typeof exports === 'object' && typeof module === 'object')
 3         module.exports = factory();　　　　　　　　　　　　　　
 4     else if(typeof define === 'function' && define.amd)
 5         define([], factory);
 6     else if(typeof exports === 'object')
 7         exports["echarts"] = factory();
 8     else
 9         root["echarts"] = factory();
10 })(this, function() {
11 return /******/ (function(modules) { // webpackBootstrap
12 /******/     // The module cache
13 /******/     var installedModules = {};
14 
15 /******/     // The require function
16 /******/     function __webpack_require__(moduleId) {
17 
18 /******/         // Check if module is in cache
19 /******/         if(installedModules[moduleId])
20 /******/             return installedModules[moduleId].exports;
21 
22 /******/         // Create a new module (and put it into the cache)
23 /******/         var module = installedModules[moduleId] = {
24 /******/             exports: {},
25 /******/             id: moduleId,
26 /******/             loaded: false
27 /******/         };
28 
29 /******/         // Execute the module function
30 /******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
31 
32 /******/         // Flag the module as loaded
33 /******/         module.loaded = true;
34 
35 /******/         // Return the exports of the module
36 /******/         return module.exports;
37 /******/     }
38 
39 
40 /******/     // expose the modules object (__webpack_modules__)
41 /******/     __webpack_require__.m = modules;
42 
43 /******/     // expose the module cache
44 /******/     __webpack_require__.c = installedModules;
45 
46 /******/     // __webpack_public_path__
47 /******/     __webpack_require__.p = "";
48 
49 /******/     // Load entry module and return exports
50 /******/     return __webpack_require__(0);
51 /******/ })