import export Javascript

Sujet résolu

9 juillet 2018 à 16:27:40

Bonjour,

Je ne comprend pas du tout ça me rend fous.

J'ai deux fichier. Fichier main.js et fichier t.js

Mes fichiers :

main.js

import { printConsole } from 't';


document.addEventListener("DOMContentLoaded", function() {

	printConsole("ok")

t.js

export function printConsole (word) {
	console.log(word)
}

Ma console m'affiche

 Uncaught SyntaxError: Unexpected token {                   main.js:1

Si vous avez une explication je suis toute ouie.

Maestro31

9 juillet 2018 à 16:56:30

Salut,

Il est fort probable que tu n'utilises pas de transpiler comme Babel afin que le navigateur puisse comprendre la syntaxe javascript ES6, si c'est le cas je te conseille de te renseigner sur le sujet : https://babeljs.io/docs/en/index.html

Celousco

10 juillet 2018 à 11:07:29

Pas besoin d'utiliser de transpiler pour ça, l'ES6 date de 2015 et la majorité des navigateurs prennent en compte ses spécificités (et tant pis pour ceux qui restent sur IE11), surtout que le code provenant du transpiler serait plus lourd que le code original, alors que la solution suivante règle le problème plus vite et facilement.

Alors voici l'explication (après avoir testé moi aussi de faire fonctionner ton code) : Une balise script va par défaut interpréter ton code comme étant du Javascript (jusque là... ça va), le soucis c'est que lorsqu'on demande à importer ou exporter à la manière des spécificités ES6, il faut indiquer au navigateur qu'on va utiliser des modules, du coup il suffit d'écrire type="module" dans ta balise script pour que ce soit pris en compte, sans rien changer dans ton code.

Walter O'Brien

10 juillet 2018 à 11:45:08

Supprimé (la réponse à déjà été donné plus haut)

-
Edité par Walter O'Brien 10 juillet 2018 à 11:46:11

SpaceIn

10 juillet 2018 à 15:12:25

Si comme Celousco le suppose, tu utilises directement l'import ES6 du navigateur, en plus de ce qu'il a dit, lors de l'import de t.js dans main.js, il faut donner explicitement le chemin relatif de ton fichier t.js par rapport à main.js, extension comprise.

Si tous tes fichiers sont à plat, alors tu peux écrire ceci :

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <title>ES6 module</title>
  <script type="module" src="main.js"></script>
</head>
<body>
</body>
</html>

main.js

import { printConsole } from './t.js';

document.addEventListener('DOMContentLoaded', function() {
  printConsole('ok');
});

t.js

export function printConsole(word) {
  console.log(word)
}

Bon ensuite, encore maintenant il est préférable d'utiliser un module bundler pour générer un ou plusieurs fichiers minifiés (en ES5 ou ES6+), surtout si ton projet a des centaines de petits fichiers.

-
Edité par SpaceIn 10 juillet 2018 à 15:17:55

headstars

18 juillet 2018 à 9:34:31

Merci pour vos réponses.

J'ai essayé d'utiliser type="module" mais ça ne fonctionne pas.

L'erreur afficher est :

Access to Script at 'file:///C:/Users/f/Documents/Mes%20fichiers%20re%C3%A7us/movies_wcs/main.js' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.

Visiblement il est impossible d'utiliser des imports ou des exports sans serveur local (source). A moins de désactiver temporairement Same-origin policy dans google chrom (source).

-
Edité par headstars 18 juillet 2018 à 9:35:57

Celousco

18 juillet 2018 à 9:49:39

Oui Chrome est très à cheval sur la sécurité, y'a une extension chrome qui fait webserver pour avoir un serveur local : https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en

Pour le CQRS, voilà l'extension que j'utilise pour dire à Chrome de ne pas s'occuper des erreurs d'origine : https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en (Attention à le désactiver quand tu en as plus besoin, ça bloque certains sites comme Youtube)

-
Edité par Celousco 18 juillet 2018 à 9:49:50