Web 前端小白入門（一）：心路歷程，非技術指南

此篇文章記錄一個小白入門 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 了，輸入框與輸出框依賴一樣的數據，達到實時渲染的效果。

文章太長，分開多篇記錄，未完待續。