Comment résoudre le problème d'erreur d'importation ES6

Solutions aux erreurs d'importation es6 : 1. Utilisez bebal pour convertir es6 en es5 ; 2. Effectuez le package via webpack, fusionnez toutes les dépendances en un seul fichier, puis utilisez babel pour convertir.

L'environnement d'exploitation de cet article : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

Comment résoudre le problème d'erreur d'importation es6 ?

La plupart des navigateurs ne prennent plus en charge ES6, donc lorsque vous utilisez es6, vous devez utiliser bebal pour convertir es6 en es5,

Répertoire du projet :

• demo1 : single Conversion des fichiers js

test1.js sous le fichier src

const aa="this is test1";
console.log("this is from test1",aa);\

Introduire le fichier bebal dans le répertoire racine du projet

.babel

Contenu :

{
　　presets:["es2015"]
}

Installer babel-cli

cnpm i babel-cli -g

Parce tu dois convertir es6 vers es5 Vous devez donc également installer babel-preset-es2015

cnpm i babel-preset-es2015 --save-dev

Convertir test1.js

babel src --out-dir dist

(convertir le fichier js du répertoire src en es5 et le mettre dans le fichier dist)

La page présente test1.js sous dist et l'opération ne signalera pas d'erreur

• demo2 : Importez plusieurs projets de fichiers et convertissez

fichier src :

test2.js

const bb="this is bb";
export {bb}

test3.js

import {bb} from 'test2.js'
console.log(bb);

Convert je src --out-dir dist

La page présente test2.js test3.js sous le fichier dist

rapport d'erreur

Puisque nous utilisons node pour compiler ES6 en es5, le module node est basé sur les spécifications de CommonJS, les navigateurs et les nœuds actuels ne prennent pas en charge la plupart des ES6

Solution

Vous pouvez le packager via Webpack, fusionner toutes les dépendances en un seul fichier, utiliser Babel pour le convertir, puis l'introduire dans le fichier HTML

Recommandé apprentissage : " Tutoriel de base Javascript》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!