3
votes

Chargement d'un projet statique sans webpack ou CDN

Je voudrais servir de manière statique un projet, qui utilise des composants web (en utilisant lit-html), sans aucun outil de packaging comme webpack etc .

L'exemple de projet est composé de cette structure:

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

package.json :

<!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>

app.js:

<!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>

et enfin, index.html:

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

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

Je sers ceci en utilisant un serveur http statique et, bien sûr, cela ne fonctionne pas. Le navigateur génère l'erreur: Erreur de résolution du spécificateur de module: lit-element .

Nous essayons donc de modifier la directive import en:

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

Le navigateur échoue alors avec: Erreur lors de la résolution spécificateur de module: lit-html dans lit-element.ts:14:29

J'ai essayé d'utiliser systemjs version 3.0.1 avec le index.html

{
  "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"
  }
}

modifié suivant et un code systemjs.map.json > fichier:

index.html
app.js
package.json

Lors du chargement de ceci (à nouveau via un serveur Web statique), nous obtenons dans Firefox:

les déclarations d'importation ne peuvent apparaître qu'à niveau supérieur d'un module à app.js:1.

Dans Chrome: Uncaught SyntaxError: jeton inattendu { à app.js:1

Dans Safari: Jeton inattendu '{'. l'appel d'importation attend exactement un argument. à app.js:1

Tout cela suggère que systemjs ne traite pas app.js en tant que module.

Y a-t-il de toute façon que nous pouvons réaliser le chargement statique de modules qui ont une arborescence de dépendances dans node_modules?

J'ai poussé la version du code avec systemjs à https://github.com/dazraf/lit-test a>.

Merci.

javascript html es6-modules systemjs lit-element

0 commentaires

3 Réponses :

1
votes

Nous avons un serveur qui fait exactement cela, et seulement ceci: https: //open-wc.org/developing/owc-dev-server.html

C'est un serveur simple qui fait le minimum de travail requis et est spécialement conçu pour fonctionner avec le chargeur de module es natif disponible dans tous les principaux navigateurs.

À l'avenir, cela ne devrait plus être nécessaire lorsque les cartes d'importation seront standardisées.

/ p>

1 commentaires

Merci! J'essaye d'éviter tout outil côté serveur. Quelques raisons, liées à la minimisation des frictions dans les grandes organisations, ainsi qu'à l'utilisation d'un serveur HTTP2 haute performance basé sur JVM. Je peux y entrer sur demande. En attendant, j'ai suivi votre suggestion concernant l'importation de cartes! Semble très bien; quelques mises en garde. Voici une implémentation nominale: github.com/dazraf/lit-test/tree / es-module-shims

4
votes

Vous pouvez peut-être utiliser quelque chose comme ceci dans votre app.js

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

Et ceci dans votre code HTML

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

Cela a fonctionné pour moi. Si vous ne souhaitez pas utiliser unpkg, vous pouvez le télécharger et le servir localement.

4 commentaires

Merci, c'est peut-être la façon la plus propre de faire cela! Je vais essayer et répondre ici.

lit-element a une importation supplémentaire, donc le service local ne fonctionnera pas immédiatement. Vous devez également télécharger la dépendance et modifier l'importation fixe.

Oui, j'ai trouvé la même chose :-) Intéressant. Suggère que la norme actuelle des modules es6 manque quelque chose ...

J'ai eu des problèmes avec les importations de modules avec Electron. Cela pourrait aider gist.github.com/smotaal/f1e6dbb5c0420bfd585874bdf11

0
votes

Permettez-moi de vous épater. Difficile à trouver, un collègue l'a trouvé.

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

1 commentaires

Désolé, ça n'a pas explosé