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

Question

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

Electron 4.1.1

Node 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 但无济于事。我真的很想使用这个库，但首先我必须克服这个障碍。老实说，我不知道这个错误是否可以重现，但我似乎无能为力。问题似乎出在 Node 和处理导入的方式上。

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

Answer 1

在要求它之前，您需要先转换 lit-html

我测试了 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 Module 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. 使用 Node 要求标志 (-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')