Web 前端小白入门（一）：心路历程，非技术指南-CSDN博客

此篇文章记录一个小白入门 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()
    ]
};
复制代码