如何在 Electron 中正确加载 lit-html 模块

How do I properly load the lit-html module in Electron

我正在尝试使用 lit-html 来节省一些时间，但我无法正确设置所有内容。

电子 4.1.1

节点 11.15

截至发帖前 5 分钟，我已经 运行 npm install 和 electron-rebuild，没有成功。

我像使用任何其他 NPM 包一样使用 require()

var render = require('lit-html').render
var html = require('lit-html').html
console.log(require("lit-html"))

不幸的是，我遇到了这个错误 参考上面三行代码。

我没有发现我的代码有任何问题。

我已经尝试通过 NPM 重新安装 lit-html 但无济于事。我真的很想使用这个库，但首先我必须克服这个障碍。老实说，我不知道这个错误是否可以重现，但我似乎无能为力。问题似乎出在节点和处理导入的方式上。

我是不是漏掉了什么？这是一个普遍的问题吗？如果是这样，我该如何解决？

您需要转译 lit-html 才能 require 它

我测试了 require('lit-html')，但遇到了这个错误：

/home/chbphone55/Workspace/test/node_modules/lit-html/lit-html.js:31
import { defaultTemplateProcessor } from './lib/default-template-processor.js';

它清楚地指出错误来自 lit-html/lit-html.js:31，其中该行使用 ES 模块 import 语法。

您可以使用 Babel 等工具或类似工具对其进行转译。但是，您可能想尝试使用 ES 模块语法，这样您就可以导入 lit-html 而无需转译它。

示例：

<!-- HTML File -->
<script type="module" src="index.js"></script>

// index.js
import { html } from 'lit-html';

如果不能使用怎么办type="module"

如果无法使用上面的type="module"方法，也可以使用the ESM package.

ESM is a brilliantly simple, babel-less, bundle-less ECMAScript module loader.

这里有一些如何使用它的例子：

  1. 使用节点要求标志 (-r) 在其他所有内容之前加载 esm
node -r esm index.js
  1. 正在主文件中加载 esm，然后加载其余代码。
// Set options as a parameter, environment variable, or rc file.
require = require('esm')(module/*, options*/)
module.exports = require('./main.js')