如何拼接代码？---模板引擎

前言

想要拼接代码，但是每次都写脚本感觉不够规范。
找了一阵子，rsbuild和Vite似乎都有类似的模板可以使用，但是比较麻烦，我靠着AI没搞出来。

EJS

ejs是一种模板引擎（对，就是类似于jsp那种）。

pnpm i -D ejs

下面是用于执行的js脚本。

html-build.js

import { readFileSync, writeFileSync } from 'fs';
import { join, dirname } from 'path';
import { fileURLToPath } from 'url';
import ejs from 'ejs';

const __dirname = dirname(fileURLToPath(import.meta.url));

// 1. 读取模板和片段
const template = readFileSync(join(__dirname, './template.ejs'), 'utf8');
const head = readFileSync(join(__dirname, './fragments/head.html'), 'utf8');
const script = readFileSync(join(__dirname, './fragments/script.js'), 'utf8');

// 2. 渲染模板
const html = ejs.render(template, { head, script });

// 3. 输出到构建目录
const outputPath = join(__dirname, './index.html');
writeFileSync(outputPath, html);
console.log('✅ 模板生成完成');

template.ejs文件

<!DOCTYPE html>
<html>
<head>
  <%= head %>
</head>
<body>
  <script>
    <%= script %>
  </script>
</body>
</html>

运行脚本，会生成模板文件。

node ./html-build.js

结论

本质上还是一段js脚本，ejs确实只起到了模板的作用，读取文件之类的都得是手写，如果加个文件不仅要改模板，还要改脚本，论简单程度，我认为还不如直接写个脚本。毕竟我们的需求也非常简单。

脚本1

<head>{{HEAD}}</head>
<body>
  <script>{{SCRIPT}}</script>
</body>

#!/bin/bash

# 读取片段内容
HEAD=$(<fragments/head.html)
SCRIPT=$(<fragments/script.js)

# 直接替换占位符
CONTENT=$(<template.html)
CONTENT=${CONTENT//'{{HEAD}}'/"$HEAD"}
CONTENT=${CONTENT//'{{SCRIPT}}'/"$SCRIPT"}

# 输出结果
echo "$CONTENT" > dist/index.html
echo "✅ 拼接完成"

这种拼接方式很高效，而且占位符也是自定义的，因此模板的格式可以自己定，比如使用html、js、java等等各种各样的格式。（易于修改）
可以使用注释等符号作为占位符，防止IDE报错。

脚本2

#!/bin/bash

# 预先读取内容到变量
head_content=$(<fragments/head.html)
script_content=$(<fragments/script.js)

# 使用Here Document
cat <<EOF > dist/index.html
<head>$head_content</head>
<body>
  <script>$script_content</script>
</body>
EOF

这种更简单直观一些，但是如果模板比较复杂，还是推荐前面那种方案。

posted @ 2025-06-26 00:56  魂祈梦  阅读(49)  评论(0)    收藏  举报