此篇文章記錄一個小白入門 web 前端開發的歷程，記錄了我如何學習前端開發技術，並開發自己工作中常用的工具集，並不是技術入門指導。
背景
決定學習 web 前端開發有兩個主要的契機，一是現在團隊負責的專案都含有管理系統，而內部專案是分配不到專業前端開發資源的（即使我屬於前端組），只能自己動手；二是自己想做一套支援日常工作的工具集（包含如：Markdown 編輯器、ToDo 管理、週報生成、網頁收藏等）。基於以上兩點，決定系統的學習下前端開發的知識。
邁出第一步，各種庫的選擇
2018 年這個時間點學習前端開發知識對於一個小白來說並不容易，經過最近幾年的演進，前端開發領域發生了翻天覆地的變化，各種前端庫層出不窮，在入門時如何選擇一個切入點變得難以抉擇。
UI 庫的選擇
促使我最終選擇從 React 入門的是 AntDesign（簡稱 AntD），很長一段時前就瞭解到 AntD 這個專案，看了文件中的設計語言部分感覺受益良多，因為我自己的性格比較喜歡規規矩矩的東西，做事情總想有個大局把控。AntD 在這一點上滿足了我的需求，讓我可以從設計理念開始規劃我的前端專案是什麼樣子，並且它告訴了為什麼這樣做更好。再通覽 AntD 元件，確定了我需要用到的元件基本覆蓋到了，並且元件的設計符合我的審美。前段時間參加了一次螞蟻金服舉辦的 SEE Conf，看了 AntD 團隊對 AntD 3.x 的介紹，就這樣，我選擇了 React，隨之而來並且毫無疑問的，前端路由庫就是 React-Router 了。
資料儲存庫的選擇
在資料儲存庫的選擇時著實糾結了好久，MobX 好還是 Redux 好？在網上瀏覽了大量的 MobX 與 Redux 的對比文章，眾說紛紜。總結了大部分文章的觀點，MobX 靈活，適用於小專案開發；Redux 嚴禁，適用於大專案的開發。秉著實踐出真知的原則，我嘗試用 MobX 與 Redux 分別寫了 demo，最終我選擇了 Redux。雖然我的專案不大，而且主要是獨自開發，按理說 MobX 的靈活應該更適合我，但是誰讓我喜歡規規矩矩的東西呢。
編譯打包工具的選擇
說到編譯打包工具，現在在前端開發領域也有好多工具。作為一個小白來說，耳熟能詳的就是 webpack，所以也沒有什麼思考，就直接選擇了 webpack 並通讀文件瞭解一些基本用法，足以滿足入門專案的需求。
第一個版本 Markdown 編輯器
在完成了所用技術棧的選擇後就該開始動手開發了。先從自己的小專案做起，滿足自己的日常工作需求，所謂工欲善其事必先利其器嘛。雖然是個小系統，不過它也擁有那麼多功能，既然是小白入門當然要從如何寫出第一個功能模組開始，就像是樂高，一點點拼裝，最終成為一個成品。我選擇先動工的功能是 Markdown 編輯器，主要出於兩點原因，一是 Markdown 編輯器功能簡單，資料關聯少，適合入門練手；二是因為我想動手自己做一個日常工具集的出發點就是現有的各種服務不能完美滿足需求，其中以 Markdown 編輯器最為突出。Markdown 在我的工作使用非常頻繁，但是現有的 Markdown 編輯器匯出 PDF 時想要設定字型是個比較麻煩的事情，所以就從 Markdown 編輯器開始，走進我的前端開發之旅。
在第一個版本（0.1.0）的 Markdown 編輯器非常的簡單，只有兩個框框，左邊一個 textarea 用於輸入文字，右邊一個 div 用於展示渲染後的 HTML 內容。所用到的技術棧如下：
- AntD
- markdown-it
- React
- webpack
在這一個版本中，我剛開始入門使用 webpack 與 React，完全沒有用到 Redux 與 React-Router。使用 AntD 的柵格元件與 Input 元件構建了頁面佈局和輸入框，markded 用於解析輸入並生成 HTML 內容，然後放到一個 div 中用於展示。
webpack 配置如下（此配置為最終版 Markdown 的配置，以後各版本中都使用此配置）：
/*
* @Author: fei
* @Date: 2018-01-14 00:20:43
* @Last Modified by: fei
* @Last Modified time: 2018-02-09 10:52:43
*/
/**
* builtin module
*/
const path = require('path');
/**
* third part module
*/
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: {
index: './src/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
devtool: 'inline-source-map',
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.(png|svg|jpg|jpeg|gif)$/, use: [ 'file-loader' ] }
]
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html',
title: 'shizuka'
}),
new UglifyJsPlugin()
]
};
複製程式碼在這個版本中，Markdown 的輸入框與輸出框沒有分成獨立元件，整個專案只有一個元件 MD。使用者輸入的 Markdown 內容存在 state 了，輸入框與輸出框依賴同樣的資料，達到實時渲染的效果。
文章太長，分開多篇記錄，未完待續。