nodejs://实现静态html文件的公共文件包含功能

缘起

使用过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.编辑器

规定

思路非常简单：

这里，定义文件目录结构如下。

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.遍历每个文件，正则匹配语句，读取包含于其中的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，快速升职加薪，走上人生巅峰。

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/xiao_xiaokui/article/details/88778310
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-06-13 09:37:44
阅读 ( 1013 )
分类：前端

nodejs://实现静态html文件的公共文件包含功能

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看