如何在电子上渲染 pugjs？答案

【问题标题】：How to render pugjs on electron?如何在电子上渲染 pugjs？
【发布时间】：2017-09-04 01:00:41
【问题描述】：

我正在尝试在电子上使用哈巴狗。

我有一个问题，我的第二个 .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 只会输出哈巴狗代码本身。

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

【问题讨论】：

标签： javascript node.js pugjs

【解决方案1】：

Pug 是一种可用于更有效地编写 HTML 的语言。但是，任何浏览器（包括 Electron 使用的 Chromium）都不支持它，因此您必须在运行时使用 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;
});

【讨论】：