Question

我想为一个静态项目服务，该项目使用web组件（使用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.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>

和一个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。

谢谢。

Answer 1

您也许可以在app.js中使用类似的内容

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

这在您的HTML代码中

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

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

Answer 2

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

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

将来，import maps标准化后，这将不再是必需的。

Answer 3

让我吹牛。很难找到，一个同事实际上找到了它。

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

加载没有Webpack或CDN的静态项目

3 个答案: