27、初步探索echarts源碼

1、首先發現隨筆中凡是和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）創建如下所示的項目目錄

|- dist
|- src
    |- index.js
    |- index.html
    |- style.css
    |- demo.png(隨便找一張圖片就可以)
|- package.json
|- webpack.config.js
（4）接下來，我們在webpack.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中加入命令

require('./style.css');這樣就可以使用style.css中的樣式表了

（8）webpack 的執行也很簡單，直接執行

webpack --display-error-details

(function webpackUniversalModuleDefinition(root, factory) {//通過這里可以看出Echarts是通過webpack進行打包的，webpack是近期最火的一款模塊加載器兼打包工具
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//，它能把各種資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都作為模塊來使用和處理。
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory();　　　　　　　　　　　　　　
    else if(typeof define === 'function' && define.amd)
        define([], factory);
    else if(typeof exports === 'object')
        exports["echarts"] = factory();
    else
        root["echarts"] = factory();
})(this, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/     // The module cache
/******/     var installedModules = {};

/******/     // The require function
/******/     function __webpack_require__(moduleId) {

/******/         // Check if module is in cache
/******/         if(installedModules[moduleId])
/******/             return installedModules[moduleId].exports;

/******/         // Create a new module (and put it into the cache)
/******/         var module = installedModules[moduleId] = {
/******/             exports: {},
/******/             id: moduleId,
/******/             loaded: false
/******/         };

/******/         // Execute the module function
/******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/         // Flag the module as loaded
/******/         module.loaded = true;

/******/         // Return the exports of the module
/******/         return module.exports;
/******/     }


/******/     // expose the modules object (__webpack_modules__)
/******/     __webpack_require__.m = modules;

/******/     // expose the module cache
/******/     __webpack_require__.c = installedModules;

/******/     // __webpack_public_path__
/******/     __webpack_require__.p = "";

/******/     // Load entry module and return exports
/******/     return __webpack_require__(0);
/******/ })