web-dev-qa-db-fra.com

import ne fonctionne pas dans Chrome

Je crée une application d'une seule page en JavaScript Vanilla. Je souhaite organiser mon code dans différents fichiers pour le rendre modulaire, ce qui signifie que je devrais pouvoir accéder aux fonctions définies dans un fichier dans un autre fichier. J'utilise ES6 native importexport pour cela:

fichier-1.js:

export function func1() {}
export function func2() {}

fichier-2.js:

import { func1, func2 } from './file-1';

index.html:

<script src="file-1.js"></script>

Lorsque je lance index.html dans Chrome (version 65), le message d'erreur suivant s'affiche: Uncaught SyntaxError: Unexpected token {.

Quel est le problème dans mon code? Chrome 65 prend entièrement en charge le système de module ES6.

javascriptgoogle-chromeecmascript-6
6
maverick

Voici un exemple de travail

file1.mjs

function log1() {
  console.log('log1');
}
function log2() {
  console.log('log2');
}
export { log1, log2 };

file2.mjs vous devez explicitement écrire l'extension .mjs

import { log1, log2 } from './file1.mjs';

log1();
log2();

index.html Avis d'attribut type = "module"

<body>
    <script type="module" src="file2.mjs"></script>
</body>

Ensuite, vous avez besoin d’un serveur statique pour vous débarrasser du bloc CORS.

$ yarn global add serve
$ serve ./

Enfin, allez à http://localhost:5000 et cela fonctionnera

Mise à jour: Il est recommandé d'utiliser l'extension de fichier .mjs pour les modules au lieu de .js

12
Vu Huu Cuong

Chrome (v70) présente certains problèmes lors de l'utilisation de la syntaxe import sur les fichiers locaux servis à l'aide du protocole file. C’est probablement le blocage CORS qui peut survenir en utilisant le protocole file selon certains articles. Mais Chrome ne montre pas non plus l’avertissement CORS dans la console - ce qui est étrange. Par conséquent, une sorte de serveur HTTP est nécessaire pour que les fichiers soient servis via le protocole HTTP (comme Vu l'a montré dans sa réponse). Firefox v63 (probablement> v60) ne présente pas ces problèmes et vous pouvez composer html avec des modules js à l'aide du protocole file:// sans serveur spécial.

Veillez également à:

  • utilisez les extensions de type de fichier lors de l'importation (import { func1, func2 } from './file-B.js';).

  • utilisez type="module" dans l'élément HTML script (<script type="module" src="file-A.js"></script>)

0
croraf