javascript - 如何在电子上渲染 pugjs？

Question

我正在尝试在 electron 上使用 pug。

我有一个问题，我的第二个 .pug 文件没有正确呈现，它只输出哈巴狗代码本身。

首先，我有这个由 main.js 加载的主 pug 文件

doctype
html(lang='en')
  head
    meta(charset='utf-8')
    title HIMS
  body
    div(id="app")
    script.
      require('./index.js')

然后 index.js 将调用 login.js

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

var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('href', path.join(__dirname, 'style.css'));
document.head.appendChild(link);

const login = path.join(__dirname, 'login.pug');
fs.readFile(login, 'utf8', function (err, data) {
    if (err) {
        return console.log(err);
    }
    document.getElementById('app')
        .innerHTML = data;
});

但是 .innerHTML 只会输出哈巴狗代码本身。

请帮助我如何修复。 我将不胜感激任何建议或提示，谢谢。

Answer 1

Pug 是一种可以用来更有效地编写 HTML 的语言。然而，它不受任何浏览器的支持——包括 Electron 使用的 Chromium—— native ，因此您要么必须使用 pug package 将其转换为 HTML。在运行时或将您的 .pug 文件编译为 .html 文件(使用任务运行器插件，如 gulp-pug for Gulp)，然后加载生成的 .html 代码中的文件。

应用于代码的最快解决方案是像这样使用 pug.render:

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

var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('href', path.join(__dirname, 'style.css'));
document.head.appendChild(link);

const login = path.join(__dirname, 'login.pug');
fs.readFile(login, 'utf8', function (err, data) {
    if (err) {
        return console.log(err);
    }
    const htmlData = pug.render(data)
    document.getElementById('app')
        .innerHTML = htmlData;
});