Ant Design Vue項目解析-前言

源碼系列文章很長時間沒有更新，一是在考慮文章用什麼方式寫質量會更高，用什麼方式總結更易於擴展和總結知識點，加上工做、看書、健身佔用的時間比較多因此也沒時間去整理。最近在網上看到一篇文章感受這種方式不錯，恰好ant Desgin of vue發佈，就想試試用這種方式寫文章，並且經過畫思惟導圖來整理整個知識點：

尚未整理完，裏面常常會有打問號的解釋是由於要看到後面才能知道這個組件的用途。後續會將其補充完整。還想記錄下我在不熟悉源碼結構下怎麼牽出一個線頭順藤摸瓜的屬性整個項目。

把ant Desgin of Vue源碼下載後大概看了下目錄，可能最容易知道的是components文件夾是組件的源碼，其餘文件就知道里面是什麼，不用太着急知道其餘文件的內容。我拿到項目會先看package.json配置文件，主要是由於裏面記錄項目的一些指令。

其餘指令不太好理解但紅色框內的指令通過很好理解，上面框內是本地調試運行的指令，下面框內是打包指令。

運行指令：npm install 安裝依賴的包
而後在運行 npm start
能夠看到這個頁面

能夠知道本地調試是能看到ant Desgin of Vue官網api頁面，而後想到看webpack.config.js配置文件中配置的入口文件。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.config');

module.exports = merge(baseWebpackConfig, {
  mode: 'development',//配置模式
  output: {
    path: path.resolve(__dirname, './dist'),//輸出路徑
    publicPath: '/',//路徑前綴
    filename: 'build.js',//文件名稱
  },
  module: {
    rules: [//解析less、css文件
      {
        test: /\.less$/,
        use: [
          { loader: 'vue-style-loader' },
          {
            loader: 'css-loader',
            options: { sourceMap: true },
          },
          { loader: 'less-loader', options: { sourceMap: true, javascriptEnabled: true } },
        ],
      },
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader'],
      },
    ],
  },
  devServer: {//測試環境的配置
    port: 3000,//端口號
    host: '0.0.0.0',//用ip能夠訪問
    historyApiFallback: {//當使用 HTML5 History API 時，任意的 404 響應均可能須要被替代爲 index.html
      rewrites: [{ from: /./, to: '/index.html' }],
    },
    disableHostCheck: true,//設置爲true時，此選項會繞過主機檢查。
    headers: { 'Access-Control-Allow-Origin': '*' },//在全部響應中添加首部內容
  },
  performance: {//經過這些選項，您能夠控制webpack如何通知您超出特定文件限制的資產和入口點。
    hints: false,//關閉提示
  },
  devtool: '#source-map',//此選項控制是否生成，以及如何生成 source map。
  plugins: [//打包過程用到的插件
    new HtmlWebpackPlugin({
      template: 'site/index.html',//設置生成html模板
      filename: 'index.html',//輸出的文件名稱
      inject: true,//當傳遞true或body時，全部javascript資源都將放在body元素的底部。頭將把腳本放在頭元素中
    }),
  ],
});

以上註釋來自於《webpack中文文檔》

引用的包

• path

path 模塊提供用於處理文件路徑和目錄路徑的實用工具
（from：《Node.js v10.15.3 文檔》）

• html-webpack-plugin

HtmlWebpackPlugin簡化了HTML文件的建立，以便爲您的 webpack bundle 提供服務。這對於被更改文件的文件名中包含每次編譯哈希(hash) 的webpack bundle尤爲有用。您可讓插件爲您生成一個HTML文件，使用lodash templates提供您本身的模板，或使用本身的加載器(loader)。
（from：《webpack 2.2中文文檔》）

template設置生成html模板；filename輸出的文件名稱；inject當傳遞true或body時，全部javascript資源都將放在body元素的底部，頭將把腳本放在頭元素中。

• webpack-merge

合併公共配置
（參考文章：《webpack》《webpack-merge - Merge》）

代碼中引入了webpack.base.config.js文件對象合併配置對象，在來看webpack.base.config.js代碼

const path = require('path');
const hljs = require('highlight.js');
const Token = require('markdown-it/lib/token');
const cheerio = require('cheerio');
const WebpackBar = require('webpackbar');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const getBabelCommonConfig = require('./antd-tools/getBabelCommonConfig');
const babelConfig = getBabelCommonConfig(false);

babelConfig.plugins.push(require.resolve('babel-plugin-syntax-dynamic-import'));

const fetch = (str, tag, scoped) => {
};

/**
 * `{{ }}` => `<span>{{</span> <span>}}</span>`
 * @param  {string} str
 * @return {string}
 */
const replaceDelimiters = function(str) {
};

/**
 * renderHighlight
 * @param  {string} str
 * @param  {string} lang
 */

const renderHighlight = function(str, lang) {
};

const md = require('markdown-it')

const vueLoaderOptions = {

};
module.exports = {
  mode: 'production',//配置模式
  entry: {
    index: [`./site/${process.env.ENTRY_INDEX || 'index'}.js`],//入口文件
  },
  module: {
    rules: [
      {
        test: /\.md$/,//解析md文件
        use: [
          {
            loader: 'vue-loader',
            options: vueLoaderOptions,
          },
          {
            loader: 'vue-antd-md-loader',
            options: Object.assign(md, {
              wrapper: 'div',
              raw: true,
            }),
          },
        ],
      },
      {
        test: /\.vue$/,//解析vue文件
        loader: 'vue-loader',
        options: vueLoaderOptions,
      },
      {
        test: /\.(js|jsx)$/,//解析js|jsx文件
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: babelConfig,
      },
      {
        test: /\.(png|jpg|gif|svg)$/,//解析png|jpg|gif|svg文件
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]',
        },
      },
    ],
  },
  resolve: {//配置模塊如何解析
    modules: ['node_modules', path.join(__dirname, '../node_modules')],//告訴 webpack 解析模塊時應該搜索的目錄。絕對路徑和相對路徑都能使用，可是要知道它們之間有一點差別。
    extensions: ['.js', '.jsx', '.vue', '.md'],//自動解析的擴展
    alias: {//建立 import 或 require 的別名，來確保模塊引入變得更簡單
      vue$: 'vue/dist/vue.esm.js',
      antd: path.join(__dirname, 'components'),
      'ant-design-vue': path.join(__dirname, 'components'),
      '@': path.join(__dirname, ''),
    },
  },
  plugins: [new VueLoaderPlugin(), new WebpackBar()],//打包過程用到的插件,應該使用的額外的解析插件列表
};

由於有不少是插件的配置，爲了讓結構好理解，把配置的部分刪除了，rules用到插件解析會後面單獨篇幅。

引用的包

• cheerio：cheerio是jquery核心功能的一個快速靈活而又簡潔的實現，主要是爲了用在服務器端須要對DOM進行操做的地方（參考文章：《cheerio中文文檔》 《cheerio》）

• highlight:代碼高亮(參考文章：《highlight》)

• markdown-it:一個輔助解析 markdown 的庫(參考文章：《markdown-it》 《讀 VuePress（三）使用 markdown-it 解析 markdown 代碼》)

• vue-antd-md-loader:基於markdown-it的解析插件

• webpackbar：可視化打包進度條(參考文章：《webpackbar》)

在代碼中index: [./site/${process.env.ENTRY_INDEX || 'index'}.js],//入口文件知道入口文件是在site文件夾下的index.js文件，下一篇來看site文件夾裏的內容。