Les modules ES6 ?

**Beginner.** · 14/04/2018, 17h23

Salut,

J'ai voulu essayer les fameux modules ES6 (avec chrome 64) mais ce fut sans succès...

Pourtant j'ai cru comprendre que chrome gérait les modules ES depuis la version 61...

Mais après quelques tests je me demande s'il ne faut pas utiliser un serveur ? C'est-à-dire que cela ne fonctionne pas en local ?

Merci.

**Marco46** · 14/04/2018, 18h25

Comment as-tu réalisé l'import de ton source dans Chrome ?

As-tu bien utilisé le type module de cette manière <script type="module" src="module.js"></script> ?

**Beginner.** · 14/04/2018, 18h57

Oui j'ai essayé de reproduire le premier exemple du site : https://jakearchibald.com/2017/es-modules-in-browsers comme ceci :

Dans un fichier html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>ECMAScript modules in browsers</title>
    <link rel="stylesheet" href="./../../style.css">
    <script type="module" src="index.js"></script>
</head>
 
<body>
</body>
 
</html>

Le fichier index.js :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
import {addTextToBody} from './utils.js';
 
addTextToBody('Modules are pretty cool.');

Le fichier utils.js :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
export function addTextToBody(text) {
    const div = document.createElement('div');
    div.textContent = text;
    document.body.appendChild(div);
}

Et alors je lance chrome (en enlevant la sécurité) et il me dit ceci :

Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

index.js:1

J'ai vu en faisant une recherche que je n'étais pas le seul à avoir ce problème...

**Beginner.** · 14/04/2018, 19h16

Ah j'ai essayé avec l'IDE Cloud9 et ça marche !

Est-ce parce qu'il faut un serveur ?

**Marco46** · 14/04/2018, 19h18

Envoyé par Beginner.

Est-ce parce qu'il faut un serveur ?

Pour servir un site web c'est mieux !

**Marco46** · 14/04/2018, 19h17

J'ai utilisé ton code tel quel et ça marche très bien.

J'ai simplement ajouté http-server à un package.json :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
{
  "name": "ES6-browser",
  "scripts": {
    "start": "http-server -c-1"
  },
  "devDependencies": {
    "http-server": "^0.11.1"
  }
}

Mon chrome est en version 65.

Quel serveur web utilises-tu ?

Et alors je lance chrome (en enlevant la sécurité)

Quelle sécurité ? Pourquoi ?

**Beginner.** · 14/04/2018, 19h35

Ben justement au début je n'utilisais pas de serveur d'où ma question : "Mais après quelques tests je me demande si il ne faut pas utiliser un serveur ? C'est-à-dire que cela ne fonctionne pas en local ?"

Je croyais qu'on pouvait utiliser les modules ES en local (tous les fichiers dans un répertoire du disque dur) sans serveur comme les codes classiques quoi mais apparemment ce n'est pas possible, c'est ça ?

**Marco46** · 14/04/2018, 22h22

Envoyé par Beginner.

Je croyais qu'on pouvait utiliser les modules ES en local (tous les fichiers dans un répertoire du disque dur) sans serveur comme les codes classiques quoi mais apparemment ce n'est pas possible, c'est ça ?

Apparemment si j'en crois le message d'erreur ce n'est pas possible.

Pour le coup de la security tu as désactivé CORS c'est ça ? C'est mal.

En fait je ne comprends pas pourquoi tu t'acharnes avoir lancer une appli web sans serveur web pour la servir, ça n'a pas de sens.

**danielhagnoul** · 14/04/2018, 20h23

Exemple utilisant un module et des Class avec des propriétés "privées" (module) et protégées (get, set).

Nota bene pour les utilisateurs de Firefox

J'ai adopté les modules ES2015 partout, c'est tellement pratique, mais Firefox est en retard par rapport à Chrome et Edge, voir Can I use module : https://caniuse.com/#search=module.
La sortie de Firefox 60 (normal) est prévue pour le 2018-05-09 (https://wiki.mozilla.org/RapidRelease/Calendar)

**Beginner.** · 14/04/2018, 20h52

Merci.
C'est un exemple instructif.

Je vois que tu utilises deux class, c'est intéressant...

Tu utilises les WeakMap pour avoir des variables privées (kNom, kPrix) ?

Mais les autres (kNomType, kPrixType,...) sont aussi privées en quelque sorte puisqu'elles sont dans un module et tout ce qui n'est pas exporté n'est pas accessible depuis l'extérieur du module, non ?

---> Là ça marche car tes fichiers sont dans un serveur mais en local je suppose que cela ne fonctionnerait pas ?

PS : J'ai aussi regardé cet exemple : https://danielhagnoul.developpez.com/Site/QR20180329-1/

Les modules ES6 ?

JavaScript

Vue hybride

Discussions similaires

Partager

Partager