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 了，输入框与输出框依赖一样的数据，达到实时渲染的效果。

文章太长，分开多篇记录，未完待续。