Javascript 加载不带Web包或CDN的静态项目_Javascript_Html_Systemjs_Es6 Modules_Lit Element

Javascript 加载不带Web包或CDN的静态项目

javascript html

Javascript 加载不带Web包或CDN的静态项目,javascript,html,systemjs,es6-modules,lit-element,Javascript,Html,Systemjs,Es6 Modules,Lit Element,我想静态地服务于一个项目，它使用webcomponents（使用lit html），没有任何打包工具，如webpack等示例项目由以下结构组成： index.html app.js package.json package.json： { "name": "lit", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { }, "keywords": [], "autho

我想静态地服务于一个项目，它使用webcomponents（使用lit html），没有任何打包工具，如webpack等

示例项目由以下结构组成：

index.html
app.js
package.json

package.json

：

{
  "name": "lit",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@webcomponents/webcomponentsjs": "^2.2.7",
    "lit-element": "^2.0.1"
  }
}

app.js

：

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

class FooElement extends LitElement {
  render() {
    return html`<div>hello world!</div>`;
  }
}
window.customElements.define('x-foo', FooElement);

我使用静态http服务器提供服务，当然，这不起作用。浏览器引发错误：

错误解析模块说明符：lit元素

因此，我们尝试将

import

指令更改为：

从'/node_modules/lit element/lit element.js'导入{LitElement，html}
然后，浏览器在lit元素中失败：错误解析模块说明符：lit html
。ts:14:29

我已经尝试使用systemjs
version3.0.1
和以下修改的index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
</head>
<body>
  <script type="systemjs-importmap" src="systemjs.map.json"></script>
  <script src="./node_modules/systemjs/dist/system.min.js"></script>
  <script>
    System.import('app');
  </script>
  <x-foo></x-foo>
</body>
</html>

当加载此文件时（再次通过静态Web服务器），我们将进入Firefox：
导入声明只能出现在模块的顶层的app.js:1

镀铬：
Uncaught SyntaxError:意外标记{
atapp.js:1

在狩猎中：
意外标记“{”。导入调用只需要一个参数。
atapp.js:1

所有这些都表明systemjs
并没有将app.js
视为一个模块
我们是否可以实现在节点\u模块
中具有依赖关系树的模块的静态加载
我已经用systemjs
将代码版本推送到了
谢谢。
我们有一台服务器，它只执行以下操作：
它是一个简单的服务器，只需做最少的工作，专门设计用于与所有主要浏览器中可用的本机es模块加载器一起工作
在将来，当应用程序标准化时，这应该不再是必需的。
您也许可以在app.js中使用类似的东西
import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element/lit-element.js?module';

这在你的HTML代码中
<script type="module" src="./app.js">



它对我很有用。如果你不想使用unpkg，你可以下载它并在本地提供。
请允许我让你大吃一惊。很难找到，实际上是一位同事找到的
谢谢！我正试图避免使用服务器端的任何工具。有几个原因与最大限度地减少大型组织中的摩擦有关，以及使用基于JVM的高性能HTTP2服务器。我可以根据要求进行研究。同时，我跟进了您的建议重新导入映射！看起来很好；有一些警告。以下是一个名义上的实现：谢谢，这可能是最干净的方法！请尝试一下，然后在这里回复。lit-element有额外的导入功能，因此本地服务无法立即运行。您也必须下载依赖项并修改固定导入。是的，我发现相同的：-）很有趣。这表明当前的es6模块标准缺少一些东西…我有一个问题电子模块导入出现问题。这可能会有帮助。对不起，它没有爆炸
import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element/lit-element.js?module';

<script type="module" src="./app.js">