Загрузка статического проекта без веб-пакета или CDN - PullRequest
Новая
       49

Загрузка статического проекта без веб-пакета или CDN

3 голосов
/ 16 марта 2019

Я бы хотел статически обслуживать проект, который использует веб-компоненты (используя 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.

Спасибо.

Ответы [ 3 ]

3 голосов
/ 17 марта 2019

Возможно, вы можете использовать что-то подобное в вашем app.js 

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

И это в вашем HTML-коде 

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

Это сработало для меня. Если вы не хотите использовать unpkg, вы можете скачать его и обслуживать локально.

1 голос
/ 16 марта 2019

У нас есть сервер, который делает именно это, и только это: https://open -wc.org / развивающихся / owc-dev-server.html

Это простой сервер, который делаетминимальный объем требуемой работы и специально предназначен для работы с собственным загрузчиком модулей es, доступным во всех основных браузерах.

В будущем это больше не потребуется, если импортировать карты стандартизированы.

0 голосов
/ 12 апреля 2019

Позвольте мне взорвать ваш разум.Трудно найти, коллега действительно нашел это.

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

...