【记录】将文件夹下js文件导入html

使用 cheerio 读取和修改 HTML 内容

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

// 读取 HTML 文件
fs.readFile('example.html', 'utf8', (err, data) => {
    if (err) {
        console.error(err);
        return;
    }

    // 使用 cheerio 解析 HTML
    const $ = cheerio.load(data);

    // 示例：修改标题
    $('title').text('新的标题');

    // 示例：添加一个新的 div 元素
    $('body').append('<div id="new-div">这是一个新的 div 元素</div>');

    // 获取修改后的 HTML
    const modifiedHtml = $.html();

    // 将修改后的 HTML 写入文件
    fs.writeFile('modified_example.html', modifiedHtml, 'utf8', (err) => {
        if (err) {
            console.error(err);
            return;
        }
        console.log('文件已成功修改并保存为 modified_example.html');
    });
});

同时，fs.readdir 方法读取指定目录的内容，回调函数中 files 是一个包含目录中所有文件名的数组。

fs.readdir(directoryPath, (err, files) => {
    if (err) {
        return console.log('无法读取目录：' + err);
    }

    // 打印所有文件名
    files.forEach(file => {
        console.log(file);
    });
});

值得注意的是fs.readdir 是一个异步操作，这意味着在文件读取完成之前，代码会继续执行。 所以要做到将文件夹下的文件依次通过script导入，需要使用异步函数和Promise。

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

// 读取 HTML 文件
fs.readFile('example.html', 'utf8', (err, data) => {
    if (err) {
        console.error('无法读取 HTML 文件');
        return;
    }

    // 使用 cheerio 解析 HTML
    const $ = cheerio.load(data);

    // 定义 dist 目录路径
    const distPath = path.join(__dirname, 'dist');

    // 使用 Promise 处理异步操作
    const readDistFiles = new Promise((resolve, reject) => {
        fs.readdir(distPath, (err, files) => {
            if (err) {
                return reject('无法读取 dist 目录');
            }

            let scriptStr = '';
            files.forEach(file => {
                if (file.slice(-3) === '.js') {
                    scriptStr += `<script src="../dist/${file}"></script>\n`;
                }
            });

            resolve(scriptStr);
        });
    });

    // 处理读取的文件
    readDistFiles.then(scriptStr => {
        $('body').append(scriptStr);

        // 获取修改后的 HTML
        const modifiedHtml = $.html();

        // 将修改后的 HTML 写入文件
        fs.writeFile('modified_example.html', modifiedHtml, 'utf8', err => {
            if (err) {
                console.error('无法写入修改后的 HTML 文件');
                return;
            }
            console.log('文件已成功修改并保存为 modified_example.html');
        });
    }).catch(error => {
        console.error(error);
    });
});