Question

尝试使用lit-html为我们的Electron屏幕创建一些可重复使用的组件。当我尝试添加示例组件时，我遇到了错误。

使用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';

Answer 1

电子和es模块

Electron的最新版本支持现成的es模块，因此我们本能地认为这可以正常工作：

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

事实是：在没有服务器的情况下，使用my-element.js协议向本地文件系统请求file://，但是出于安全原因，HTML规范禁止使用此协议加载模块（更多信息here）。

解决方案

提供源文件

使用静态文件服务器并从index.html加载http://localhost:<server_port>而不是文件系统（polymer serve应该没问题）。

使用模块捆绑器

例如Rollup或Webpack，因此您只需将分发包作为普通脚本加载即可。这样，您就可以利用摇树的优势来删除未使用的代码以及其他编译/捆绑的好处。

使用TypeScript / Babel

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

使用commonjs

import { LitElement } from 'lit-element';
=
const { LitElement } = require('lit-element');

注册自定义协议

请参见here。

关于捆扎机的说明

我个人更喜欢使用Rollup +一个（仅开发）服务器在监视模式下通过热重载，代码最小化和树状摇动来进行TS编译。
使用捆绑程序似乎很不方便，因为它会将负载集中在单个js文件上。但是，在电子环境中，源文件几乎总是位于本地程序包中-因此网络延迟不是问题-甚至可能导致性能提高。另外，汇总和Webpack都支持代码拆分和动态导入，因此您仍然可以完美地遵循优化模式，例如App Shell Model。

尝试导入项目时出现错误“根据HTML规范对模块脚本强制执行严格的MIME类型检查”

1 个答案: