webpack-loader实现一个简化版gitbook

1,521 阅读2分钟

前言

最近在看weppack-loader,不看不知道,当我翻到markdown-loader的时候,大吃一惊,简直精简的不能再精简了,除去require和export语句,一共就有四行。基本上loader的作用一目了然:在js进入执行之前对其做改动。

webpack-loader如何工作

babel-loader是最常见的,作用就是将我们import的js中的es6语法转为es5。

{
    test: /\.js?$/,
    use:[{
        loader:'babel-loader'
    }],
}

通过以上配置,我们import的所有js文件就都会经过babel-loader处理了,而import的其他类型文件(例如图片、css啥的)就不会经过babel-loader处理。

举个简单例子:babel-loader会将let、const等ES6的写法转为var,那么实现的思路很可能就是code = code.replace(/let/g,'var').

详细请看《深入浅出webpack》 致敬。

markdown-loader怎么实现的

代码:

"use strict";

const marked = require("marked");
const loaderUtils = require("loader-utils");

module.exports = function (markdown) {
    // merge params and default config
    const options = loaderUtils.getOptions(this);

    this.cacheable();

    marked.setOptions(options);

    return marked(markdown);
};

配置markdown-loader后我们就可以import md文件了。例如:import md from './README.md'

如果README.md的内容是

# i am title

那么import得到的结果是:

<h1>i am title</h1>

怎么做到的?通过代码我们可以很清楚的发现就是调用了marked这个组件将原始的# i am title转成了<h1>i am title</h1>,然后return了出去。就这样这个loader每天有一万七千次下载。

loader实现gitbook功能

在我看来,loader的最厉害的地方是在于他运行在node环境里的,可以调用fs、path等模块获取磁盘上的文件信息。再加上loader可以随意修改js源码的功能,那么自然而然的就想到了gitbook。

gitbook允许用户编辑markdown文件时,能在浏览器中实时预览markdown文件转成的html样式。通过gitbook build命令,用户编写的md文件能生成对应的html文件。这样就能直接发布到cdn使用了。

由于webpack配合dev-server本身就具有热加载和打包的功能,配合loader也能识别md文件。

那么唯一的缺少的地方就是如何处理目录结构,在gitbook中需要用户维护有一个SUMMARY.md来管理目录。

而loader因为能调用fs和path模块,因此我们可以将目录结构直接抽象成文件夹结构,由loader解析文件夹结构抽象出目录。不再需要像gitbook那样维护一个单独的文件了。

基本思路就是这样。配合页面懒加载,即使文章再多,首屏打开速度也能得到保障。 配。

项目demo

基本流程实现,code解析还不完美。