缘起
使用过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文件内容
<!DOCTYPE HTML>
<html>
<head>
<title>nodejs 制作html静态公共文件包含工具</title>
<meta charset="utf8" />
<style>
html,body,div{padding:0;border:0;margin:0;box-sizing:border-box;}
html,body{height:100%;}
body{display:flex;flex-direction:column;}
.center-middle{display:flex;justify-content:center;align-items:center;}
.header{flex:0 0 50px;border-bottom:1px solid #ddd;background-color:#95cfd4;}
.bodyer{flex:1 1 100%;background-color:#ececec;}
.footer{flex:0 0 50px;border-top:1px solid #ddd;background-color:#7def40;}
</style>
</head>
<body>
<include src="./header.html"></include>
<div class="bodyer center-middle">bodyer</div>
<include src="./footer.html"></include>
</body>
</html>
- header.html文件内容
<div class="header center-middle">header</div>
- footer.html文件内容
<div class="footer center-middle">footer</div>
思路
1.用nodejs的fs模块的readdirSync同步文件读取函数读取pages目录下的所有文件。
2.遍历每个文件，正则匹配<include src="***.html"></include>语句，读取包含于其中的src属性指定的文件路径，并用此文件内容替换掉当前所匹配的include标签。
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.*src="(.*)">.*\<\/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，快速升职加薪，走上人生巅峰。
