4

我想静态地服务一个项目，它使用 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);

最后，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>
  <script src="app.js" type="module"></script>
</head>
<body>
  <x-foo></x-foo>
</body>
</html>

我使用静态 http 服务器来提供服务，当然，这不起作用。浏览器引发错误：Error resolving module specifier: lit-element.

因此，我们尝试将import指令更改为：

import { LitElement, html } from './node_modules/lit-element/lit-element.js';

然后浏览器失败：Error resolving module specifier: lit-html在lit-element.ts:14:29

我尝试使用经过以下修改的systemjs版本3.0.1index.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>

和一个systemjs.map.json文件：

{
  "imports": {
    "app": "./app.js",
    "lit-element": "./node_modules/lit-element/lit-element.js",
    "lit-html": "./node_modules/lit-html/lit-html.js"
  }
}

当加载这个（再次通过静态网络服务器）时，我们进入 Firefox：

import declarations may only appear at top level of a module在app.js:1.

在 Chrome 中： Uncaught SyntaxError: Unexpected token {在app.js:1

在 Safari 中： Unexpected token '{'. import call expects exactly one argument.在app.js:1

所有这些都表明它systemjs没有被app.js视为一个模块。

无论如何，我们可以实现对具有依赖关系树的模块的静态加载node_modules吗？

我已将代码版本推systemjs送到https://github.com/dazraf/lit-test。

谢谢。

4

3 回答 3

5

你也许可以在你的 app.js 中使用这样的东西

import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element/lit-element.js?module';

这在你的 HTML 代码中

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

它对我有用。如果您不想使用 unpkg，您可以下载它并在本地提供。

于 2019-03-16T21:59:53.713 回答
1

我们有一个服务器可以做到这一点，而且只有这个：https ://open-wc.org/developing/owc-dev-server.html

它是一个简单的服务器，只需完成最少的工作，并且专门设计用于与所有主要浏览器中可用的本机 es 模块加载器一起使用。

将来，当导入地图标准化时，这将不再需要。

于 2019-03-16T20:28:17.227 回答
1

请允许我打动你的头脑。好难找，居然是同事找到的。

https://codewithhugo.com/use-es-modules-in-node-without-babel/webpack-using-esm/

于 2019-04-12T20:35:33.800 回答