Node.js | 内置模块 http | fs | path 综合小案例：分离HTML文件

🖥️ NodeJS专栏：Node.js从入门到精通
🖥️ 博主的内置前端之路：前端之行，任重道远（来自大三学长的模块万字自述）
🧧 个人社区：海底烧烤店ai（从前端到全栈）
🧑‍💼个人简介：即将大三的学生，一个不甘平庸的综合平凡人🍬
👉 你的一键三连是我更新的最大动力❤️！
🏆分享博主自用牛客网🏆：一个非常全面的小案面试刷题求职网站，真的例分离超级好用（点击跳转）🍬

在这里插入图片描述

前言

最近博主一直在牛客网刷题巩固基础知识，快来和我一起冲关升级吧！内置点击进入牛客网

在前面我们已经学习过Node.js的模块fs、path与http这三个内置模块，综合本篇文章将结合这几个模块写一个分离HTML文件的小案小案例（超级简单，一看就会！例分离），内置目的模块是巩固所学知识，加强记忆，综合让我们开始吧！小案

Node.js往期文章可查阅专栏：Node.js从入门到精通

文章目录

前言
- 案例效果
- 定义主函数
- 定义正则表达式
- 定义抽离CSS的例分离函数
- 定义抽离JS的函数
- 定义抽离HTML的文件
- 启动分离任务
- 服务端运行测试
结语

案例效果

有这样一个main.html文件：

在这里插入图片描述

我们需要分割这个main.html文件，将其中的CSS和JS代码抽离到单独的.css和.js文件中，既将main.html文件中的HTML，CSS，JS代码分离到三个文件中，最终分离HTML后的案例目录结构如下：

在这里插入图片描述

对于main.html中的css，js，html结构代码自己随便写，只要这些css和js代码能发挥作用，能看出效果就行

定义主函数

定义一个createFile函数，将其作为整个案例效果的主函数，我们只需将需要分割的HTML文件的地址路径作为参数传递给createFile函数即可实现分割该HTML文件的功能：

在main.html同级创建node.js文件

// node.jsconst fs = require("fs");const path = require("path");// 主函数function createFile(src) { 	// 读取文件内容    fs.readFile(path.join(__dirname, src), "utf-8", (err, data) =>{         if (err) {             return console.log("读取main.html失败！");        }        // 调用处理函数        createCss(data);        createJs(data);        createHtml(data);    });}

createFile函数的功能很简单，就是通过fs.readFile配合path.join来读取指定路径的文件内容，读取成功后分别调用：

createCss（抽离CSS的函数）
createHtml（抽离HTML的函数）
createJs（抽离JS的函数）

定义正则表达式

我们需要使用正则来提取main.html文件中的css和js代码，所以这里定义两个正则表达式：

node.js中添加以下代码

// node.js//  \s表示空白字符；\S 表示非空白字符 ；* 表示匹配任意次const regCss = /（内联CSS代码）和（内联JS代码）替换成外部导入的方式
启动分离任务
调用createFile函数并启动node.js文件，开始分离main.html文件
node.js中添加以下代码
// node.jscreateFile("./main.html");
完整node.js文件如下：
服务端运行测试
案例根目录下创建server.js用于启动node服务器：
// server.jsconst http = require("http");const fs = require("fs");const path = require("path");const server = http.createServer();server.on("request", (req, res) =>{ 	// 不匹配 /favicon.ico    if (req.url === "/favicon.ico") {         return;    }        // 根据请求路径去获取文件地址    const fpath = path.join(__dirname, req.url);    	// 读取文件内容    fs.readFile(fpath, "utf-8", (err, data) =>{         if (err) {             return console.log(err);        }        // 返回读取的内容        res.end(data);    });});server.listen(3000, () =>{     console.log("服务器启动成功！");});
此时浏览器访问http://localhost:3000/main.html与http://localhost:3000/static/index.html会发现展示效果一致，这就说明我们分割main.html文件后获得的index.html是正常的
访问http://localhost:3000/static/index.html发现页面、css、js都能正常加载，index.html中引入css路径是./index.css，./代表同级，则相当于是请求了http://localhost:3000/static/index.css，所以通过path.join能正确找到该css路径并正确加载该css，加载js文件同理
在本地打开main.html和/static/index.html文件也能验证我们是否分离成功，这里使用node服务器进行测试完全是为了加强巩固一下node知识
结语
好啦，这个分离HTML的小案例到此就结束了，是不是超级简单呢，赶快动手去试试吧！
如果你在食用过程中对fs，path，http等这些内置模块有不熟悉的地方，可以去我的Node.js专栏进行学习 👉 Node.js从入门到精通
订阅专栏，关注博主，学习前端（进击全栈）不迷路！
如果本篇文章对你有所帮助，还请客官一件四连！❤️
基础不牢，地动山摇！快来和博主一起来牛客网刷题巩固基础知识吧！