缘起
使用过php或其他后台语言的朋友们应该知道，对于公共文件，比如html的头部，底部等，可以单独写成一个.php文件。
比如header.php和footer.php，然后用include('header.php')或者require('header.php')包含进来。
当修改了header.php文件之后，所有引入了这个文件的代码，都会自动加载最新的文件。
这样，一个普通网站如果有十个页面，那么我们只需要改动一次就可以令这十个文件的头部效果都改变。
但是，静态的html文件，是没有类似这样公共html包含功能的。
不过，目前的很多打包工具，比如，gulp，webpack等，都具有这样的插件。
但是，如果在某个时候，我们仅仅只是需要这样的一个简单的功能，而不想npm install webpack 安装一整个webpack工具，也不想安装各种晦涩难懂的插件，更不想去进行令人头疼的webpack配置的时候，我们该如何去实现这样的一个需求呢？
准备
这里，仅仅只用nodejs的原生fs文件模块，去实现这样的一个公共文件包含工具。
需要准备的东西有：
1.安装好的nodejs程序
2.编辑器
规定
思路非常简单：
这里，定义文件目录结构如下。
[图片上传失败...(image-f0f796-1553416201164)]
src是源码目录，包含了pages目录，其下是所有的页面文件，里面可能会引用公共文件。common是公共文件目录，包含了header.html和footer.html等文件。
dist是资源目录，用来存放页面include标签被公共文件替换后的实际使用的页面文件资源。
- index.html文件内容
nodejs 制作html静态公共文件包含工具
- header.html文件内容
header
- footer.html文件内容
思路
1.用nodejs的fs模块的readdirSync同步文件读取函数读取pages目录下的所有文件。
2.遍历每个文件，正则匹配
3.将替换掉include标签后的新的文件内容，写入到dist资源目录，文件名跟当前pages下的文件名同名。
include.js文件代码
const $Fs = require('fs'); // 引入文件模块
let files = $Fs.readdirSync('./src/pages'); // 读取pages页面文件目录下的html文件
files.forEach((file,index) => { // 遍历获得的所有页面文件
let old_data = $Fs.readFileSync('./src/pages/' + file,'utf8'); // 读取当前文件的内容
let new_data = old_data.replace(/\.*\<\/include\>/gi,(match,p1,offset,string) => {//查找html文件中include标签
let inc_data = $Fs.readFileSync('./src/common/' + p1,'utf8'); // p1是第一个括号匹配到的值，也就是include包含的文件路径，读取此公共文件
return inc_data; // 此回调函数返回的值，将替换正则匹配到的字符串
});
$Fs.writeFileSync('./dist/' + file,new_data); //将include标签被替换后新的html内容，写入到dist资源目录的同名file文件中(不存在会自动新建)。
});
console.log('执行成功');
node执行include.js文件
此时dist目录下已经生成index.html文件
内容如下图所示
浏览器打开查看
如上所示，仅仅通过nodejs的fs模块，一个静态html公共文件包含打包功能用十行代码便能实现。
不过，很多人肯定也能一眼看出来，此工具的通用性，可扩展性，健壮性都比较差，路径硬编码，合法性判断等都没有做处理。对此，我的回答如下：
- 编程是一个创造性的职业，程序员不应该完全被工具左右，造轮子永远是一个值得尝试的行为。
- 10行代码，不到1kb的大小，能够基本达到webpack + 插件所能达到的功能，何乐而不为？
- 一叶障目，不见泰山，编程思想就是那几行代码所蕴含的思维，路径硬编码，路径合法性等问题，只是边角料而已。
结语
感谢您的观看，如有不足之处，欢迎批评指正。
获取资料
本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。
对web开发技术感兴趣的同学，欢迎加入Q群：147076513，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。
最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。