漫谈博客重构

由于种种说不清道不明的原因，博客停更了一年多。在此期间，也没有闲下来，将博客狠狠的重构了一波。

主要包括以下几个方面：

• 完善构建工具：webpack + Gulp + rollup

• 使用SASS预编译器，更好地组织管理样式文件

• 编辑器： 基于React开发了Markdown编辑器，后续文章统一使用Markdown格式

• 文章： 隐藏左边栏、新增内容目录栏、支持目录导航

• 待开发功能

构建工具

完善构建工具，采用Webpack + Gulp + rollup，对静态资源统一编译压缩。

Webpack

基于Webpack编译TypeScript + React。

Babel7配置：

{
    "presets": [
    ["@babel/preset-env", {
      "loose": true,
      "targets": {
        "browsers": ["ie >= 10", "chrome >= 31", "ios >= 8", "android >= 4.4"],
        "node": "8"
      }
    }],
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  ...
}

Gulp + rollup

针对一些旧的JS文件，使用Gulp + rollup进行模块化管理。

function buildJs() {
    return gulp.src(paths.js.src)
    .pipe(sourcemaps.init())
    .pipe(rollup({
        plugins: [
            commonjs(),
            resolve(),
            babel({
                runtimeHelpers: true
            }),
            uglify.uglify()
        ]
    }, {
        format: 'iife'
    }))
    .pipe(rename({
        suffix: ".min"
     }))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(paths.js.dest));
}

后续使用ES6、ES7语法，逐渐抛弃JQuery。

SASS预编译器

使用SASS预编译器，更好地组织管理样式文件。

编辑器

基于React + TypeScript开发了Markdown编辑器，后续文章统一使用Markdown格式。

主要特性

Markdown编辑器主要特性：

• 支持标准Markdown语法

• 支持实时预览、图片上传、代码块（高亮、行号）

• 支持TOC目录、Emoji表情

• 支持识别和解析 HTML 标签

依赖开源项目

• CodeMirror

• Marked

• highlight.js

• FontAwesome

文章

为了方便阅读，文章详细页隐藏了左侧边栏，新增了内容目录栏（仅针对Markdown文章），支持目录导航。

目录

新增内容目录栏。

上下导航

文章尾部新增上一篇、下一篇功能。

待开发功能

• 分享模块

• 评论模块（目前评论使用第三方disqus，但是有翻墙的问题，还未找到合适的国内工具，如有好的，欢迎推荐~）

• 公众完善管理

• H5案例新增

….

总结

重构过程中，耗费了不少功夫，断断续续的，一期总算是完成了，后续还有好多事情要做，一年又快结束了，希望自己勤奋点吧！

如有问题或发现Bug，可加群（QQ：481231348）反馈。