背景
很多时候，我们希望直接通过执行命令的方式代替纯手工的重复性工作，比如通过执行 node 命令，往现有的文件中插入内容，提高效率。
例子
🍄 举个例子，我想在 index.html 中引入一个 webcomponent 组件。那么就可以通过 nodejs 实现向 index.html 头部或尾部插入相关资源和标签。
- 通过
fs.readFileSync读取文件内容； - 使用
split方法按回车、换行符把文件内容分割为数组； - 使用数组的
splice方法进行增删改查； - 使用
join方法，按当前操作系统的行尾标记(EOL) 将数组转为字符串； - 使用
fs.writeFileSync写入修改后的内容。
以上方法适用于任意文件类型。
演示
① 新建一个 inject.js 文件，内容如下：
// 在index.html中插入icas组件相关文件
const injectToHtml = () => {
const fs = require("fs");
const { EOL } = require("os");
const html = "./public/index.html";
const source = fs.readFileSync(html, "utf8");
if (source.indexOf("web-icas") > -1) return; // 若已注入则跳过
const data = source.split(/\r?\n/gm);
// head末尾插入资源
data.splice(
data.findIndex((c) => c.trim() === "</head>"),
null,
` <link rel="stylesheet" href="./icas/web-icas.css" />
<script src="https://unpkg.com/vue"></script>
<script src="./icas/web-icas.min.js" async></script>`
);
// body末尾插入组件
data.splice(
data.findIndex((c) => c.trim() === "</body>"),
null,
` <web-icas page-show="login"></web-icas>`
);
fs.writeFileSync(html, data.join(EOL));
};
injectToHtml();
② 直接在命令行执行 node inject.js 即可插入内容。
<!-- 插入前 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app"></div>
</body>
</html>
<!-- 插入后 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./icas/web-icas.css" />
<script src="https://unpkg.com/vue"></script>
<script src="./icas/web-icas.min.js" async></script>
</head>
<body>
<div id="app"></div>
<web-icas page-show="login"></web-icas>
</body>
</html>
评论区