2

尝试使用lit-html. 当我尝试添加示例组件时，我遇到了错误。

使用electron: ^5.0.6

尝试导入模块my-element.js（大部分代码是示例代码，我只是想让它工作）

<head>
    <!-- Polyfills only needed for Firefox and Edge. -->
    <script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
</head>
<body>
<!-- Works only on browsers that support Javascript modules like
     Chrome, Safari, Firefox 60, Edge 17 -->
<script type="module" src="my-element.js"></script>

该模块my-element.js包含以下内容：

import {LitElement, html, css} from 'lit-html';

class MyElement extends LitElement {

  static get properties() {
    return {
      mood: {type: String}
    }
  }

  static get styles() {
    return css`.mood { color: green; }`;
  }

  render() {
    return html`Web Components are <span class="mood">${this.mood}</span>!`;
  }
}

customElements.define('my-element', MyElement);

页面加载时出现错误

Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

我尝试了不同的导入方式，lit-html但没有解决错误。

前任。import {LitElement, html, css} from '../../node_modules/lit-html/lit-html';

前任。import {LitElement, html, css} from '../../node_modules/lit-html/lit-html.js';

4

2 回答 2

7

电子和 ES 模块

最新版本的 Electron 支持开箱即用的 ES 模块，因此我们本能地认为这可以正常工作：

<script type="module" src="my-element.js"></script>

问题是：如果您从本地文件系统加载主 HTML 文件，则所有其他资源也通过file://协议请求；然而，出于安全原因，HTML 规范禁止使用此类协议加载 ES 模块（更多信息在这里）。

解决方案

提供源文件

使用静态文件服务器并从文件系统加载index.html而http://localhost:<server_port>不是文件系统（即es-dev-server与 LitElement 一起工作）。

使用模块捆绑器

例如 Rollup 或 Webpack，因此您只需将 bundle 加载为普通脚本即可。通过这种方式，您可以利用 tree shaking 来删除未使用的代码以及其他编译/捆绑优势。

使用 TypeScript/Babel

两者都可以将 es 模块语句转换为 commonjs ( require)。

使用commonjs

Electron 的 Node 集成允许您使用require()CJS 模块。

注册自定义协议

见这里。

关于捆绑器的说明

使用捆绑器可能看起来不方便，因为它将负载集中在单个 js 文件上；然而，在源文件几乎总是在本地包中的 Electron 环境中——因此网络延迟不是问题——它甚至可能导致性能提高。此外，Rollup 和 Webpack 都支持代码拆分和动态导入，因此您仍然可以完美地遵循App Shell 模型等优化模式。

于 2019-08-17T13:35:22.700 回答
0

您必须先导出要导入的内容，然后才能进行操作。它也应该在 Firefox 上正常工作。

于 2021-10-16T20:34:46.663 回答