webpack-loader实现一个简化版gitbook

2018-02-27 11:02:44来源:https://juejin.im/post/5a7c711ef265da4e8e7852cc作者:稀土掘金人点击

分享

最近在看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解析还不完美。


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台