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資料夾裡的內容。