最近写的一个小项目，感觉很有意思就与大家分享一下，当然我给的这个是 Demo 。项目地址是 https://github.com/bigshans/art-html 。

背景

公司的主页是用静态网页写的，主要是用来展示，但是分很多个页面，页面间有几个公用的组件。首先不考虑用 Vue 或者 React ，杀鸡焉用牛刀是其一，其二是首页需要做 SEO ，但是特意用一个 Nuxtjs 的又不太想（不需要那么多东西），我的 Leader 不太想再弄一个服务去跑这个东西，因为原来就直接丢到 OSS 上不需要管，根本不用考虑它对服务器的影响（反正又是找阿里就行了）。考虑了几种方案，感觉还是用传统的模板引擎最好，因为返回给前端的时候直接是生成好的页面，SEO 肯定没问题，问题是不开一个服务怎么弄呢？那就提前生成好就行了。

我们可以用模板引擎将所有模板编译成 html ，然后写入文件。嗯，其实就是这么个思路。

简单的技术选型

首先引擎用 art ，因为我们公司在用，无门槛上手。然后 art 速度也很快，所以没有什么争议。

然后再写一个开发时用到的服务，我直接用 express ，用 koa 也没有关系，随你喜欢。

中间再加一个热加载功能，就是模板有变动，页面也随之自动 reload 。用到 ws 和 cheerio 。

其中还要涉及到文件读写，我就又用了 fs-extra 。

开发

前后大概花了一天时间，然后我还摸了会儿鱼。

编译模板部分理一下逻辑：作为组件的模板不编译，作为入口的 html 需要编译。于是做了个简单的判断。

热加载功能需要在每个页面追加一段 script 代码，所以不能简单的使用 static ，需要判断是 html 就插入代码。解析操作编译好的代码就使用 cheerio 了。

结语

整体来说还是很有意思的，最后拿去交差了。我在搜索的时候也发现有些人有同样的问题，不过看时间也过去挺久了，不知道他们有没有解决。总之，我也把我这个解决方案放在这里了，希望能对你有帮助。