Как обслуживать приложение веб-компонентов с сервером express - PullRequest
Новая
       9

Как обслуживать приложение веб-компонентов с сервером express

0 голосов
/ 05 мая 2020

У меня есть проект, в котором я пытаюсь обслуживать приложение на основе веб-компонентов. Структура папок проекта следующая:

| - index. html
| - my-component-one. js
| - mock-server. js
| - package. json

Когда я запускаю проект с

node ./mock-server.js

и откройте эту страницу в браузере http://127.0.0.1:8092/, он просто не может найти зависимость освещенного элемента внутри node_modules.

enter image description here

Если Я запускаю curl http://127.0.0.1:8092/node_modules/lit-element/ и получаю такой ответ:

enter image description here

Хотя я добавляю папку node_modules как папку stati c в express (server.use(express.static('node_modules'))), он не может получить доступ к файлам в node_modules.

Я поместил коды ниже.

Можете ли вы понять проблему здесь?

Заранее спасибо. Best,

index. html

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Web Component Test</title>
  <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
</head>
<body>
  <h1>Component Trial</h1>
  <my-component-one></my-component-one>
  <script type="module" src="my-component-one.js"></script>
</body>
</html>

my-component-one. js

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

class MyComponentOne extends LitElement {

  render() {
    return html`
      <p>My Component One</p>
   `;
  }

}

customElements.define('my-component-one', MyComponentOne);

mock-server. js

const express = require('express');
const port = 8092;

const server = express();

server.listen(port);

server.use(express.static('node_modules'));

упаковка. json

{
  "name": "web-componnet-test",
  "scripts": {
    "start": "node ./mock-server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "lit-element": "^2.2.1"
  },
  "devDependencies": {
    "@webcomponents/webcomponentsjs": "^2.4.2"
  }
}

Ответы [ 3 ]

0 голосов
/ 05 мая 2020

Ну, я переключился на es-dev-сервер веб-компонентов https://github.com/open-wc/open-wc/tree/master/packages/es-dev-server, и теперь он работает как шарм.

Я нашел этот пакет в репозитории примеров освещенного элемента начальный проект: https://github.com/PolymerLabs/lit-element-starter-js

По-видимому, браузеру не удается привязать node_modules, и этот сервер исправляет это.

FYI.

0 голосов
/ 09 мая 2020

Для по некоторым причинам (например, его зависимость от lit- html) вы не можете импортировать lit-element непосредственно из каталога node_modules. Вам нужно будет связать его (с Rollup, Webpack ...) ?

Если вы не хотите использовать упаковщик, вы можете вместо этого импортировать lit-element и все его зависимости через CDN: 

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

Обратите внимание, что тестирование с curl не сработало по другой причине. Вы не должны использовать "node_modules" в пути и добавлять имя файла Javascript. Это должно сработать (но не решить проблему зависимости). 

curl http://127.0.0.1:8092/lit-element/lit-element.js
0 голосов
/ 05 мая 2020

Поместите вышеупомянутый вызов listen так: 


server.use(express.static(path.join(__dirname, 'node_modules')));

server.listen(port);

Кроме того, не рекомендуется менять что-то внутри node_modules - эта папка обычно зарезервирована только для внешних зависимостей.

...