3. Node 之使用 path 模块来处理路径

一、path 路径模块定义

path 模块 是 Node.js 官方提供的。用来处理路径的模块。它提供了一系列的方法和属性，用来满足用户对路径的处理需求。

例如：
path.join() 方法， 用来将多个路径片段拼接成一个完整的路径字符串。
path.bassename() 方法，用来从路径字符串中，将文件名解析出来。

如果要在 JS 代码中，使用 path 模块来处理路径，则需要使用如下的方式先导入它。

const path = require('path')

二、path 模块的一些方法

1. path.join( )

path.join([...paths]) 方法，用来将多个路径片段拼接成返回成一个完整的路径字符串 参数解读： ...paths , string 类型，表示路径片段的序列
返回值：string 类型

注意：一个 【../ 】表示忽略上一级，二个【../】 表示忽略两个上一级，以此类推。但是只有【 ../】 才能表示忽略上一级的作用。

const path = require('path')

// 二个【../】 表示忽略两个上一级
let fPath = path.join('/a', '/b', 'c/d', '../../', 'e')
console.log(fPath)  // \a\b\e

提示：今后凡是涉及到路径拼接的操作，都需要使用 path.join( )方法处理。不要直接使用 + 进行字符串拼接。 如下，我们在要读取的文件路径前面加个【.】 点，看下使用 path.join( ) 和不使用 path.join( )的区别。

2. path.basename( )

使用path.basename() 方法，可以获取路径中的最后一部分的数据，可以通过这个方法获取路径中的文件名
语法格式如下： path.basename(path[, ext])
参数解读： path: string 类型，表示路径的字符串
ext: string 类型，表示文件扩展名，如果不传扩展名称，则返回完整的文件名
返回：string 表示 路径中的最后一部分

const path = require('path')

let fpath = '/a/b/c/index.html'

// 不传文件扩展名参数，返回完整的文件名称
let strname = path.basename(fpath);
console.log(strname)   // index.html

// 传了文件扩展名参数，返回文件名
let ectname = path.basename(fpath, '.html')
console.log(ectname)   // index

三、fs 和 path 结合应用

1. 需求：

把 file 文件夹里面的 html 中的内容拆解成 css 、js ，html， html引入 拆解成后的css 、js。 并且这些拆解后的 文件放在 newFile 文件夹下面。

目录如下：

file 文件夹里面的 html 代码如下：

2. 实现代码

拆解代码如下：

const fs = require('fs');
const path = require('path');


// 匹配<style></style> 标签正则，便于识别 css 
//  /s 表示 空白字符； /S 表示非空白字符； * 号表示匹配任意次
const regStyle = /<style>[\s\S]*<\/style>/;

// 匹配<script></script> 标签正则
const regScript = /<script>[\s\S]*<\/script>/


fs.readFile(path.join(__dirname, '/file/index.html'), (err, data) => {
    if(err) {
        console.log('读取文件失败', err.message)
    }
    resolveCss(data)
    resolveScript(data)
    resolveHtml(data)
})

// 解析 css 内容
function resolveCss(htmlSrc) {
    // 使用正则提取页面中的 <style></style>
    const rSrc = regStyle.exec(htmlSrc);
    // 将提出来的样式字符串，去掉<style></style>标签
    const newCss = rSrc[0].replace('<style>', '').replace('</style>', '');
    // 再把内容写入 newFile中
    resetWriteFile( '/newFile/index.css', newCss, 'css')
}

// 解析 js 内容
function resolveScript(htmlSrc) {
    const rJs = regScript.exec(htmlSrc);
    const newScript = rJs[0].replace('<script>', '').replace('</script>', '');
    resetWriteFile('/newFile/index.js', newScript, 'js')
}

// 解析 html 内容
function resolveHtml(htmlSrc) {
    // htmlSrc 从 fs 读取出来是一个 byte 流，这个对象没有 replace 方法，先 toString 一下就可以了
    const newHtml = htmlSrc.toString().replace(regStyle, `<link rel="stylesheet" href="./index.css">`).replace(regScript, `<script src="./index.js"></script>`)
    resetWriteFile('/newFile/index.html', newHtml, 'html')
}

// 写入内容到指定文件中
function resetWriteFile(filePath, content, type) {
    fs.writeFile(path.join(__dirname, filePath), content,  (err) =>{
        if(err) {
            console.log(`${type}写入内容失败`, err.message)
        } else {
            console.log(`${type}写入内容成功`)
        }
        
    })
}

3. 实现后展示

newFile 中的 css 代码如下：

newFile 中的 js 代码如下：

newFile 中的 html 代码如下：