Pourquoi convertir es6 en es5

Raison : Pour la compatibilité du navigateur et pour exécuter l'application en douceur dans l'environnement node.js. En tant que nouvelle spécification pour JS, ES6 ajoute de nombreuses nouvelles syntaxes et API, mais les navigateurs modernes ne prennent pas en charge les nouvelles fonctionnalités d'ES6, il est donc nécessaire de convertir le code ES6 en code ES5 ; configurer l'outil Babel dans le projet C'est tout.

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

Pourquoi convertir es6 en es5 ?

La réponse simple est : pour la compatibilité du navigateur et pour exécuter l'application en douceur dans l'environnement node.js.

ES6, en tant que nouvelle spécification de JS, ajoute de nombreuses nouvelles syntaxes et API, mais tous les navigateurs du marché ne sont pas compatibles, il est donc nécessaire de convertir le code de syntaxe ES6 en code ES5.

Les navigateurs modernes ne prennent pas en charge les nouvelles fonctionnalités d'ES6, donc si vous souhaitez utiliser les nouvelles fonctionnalités d'ES6 directement dans le navigateur, vous devez utiliser d'autres outils.

Dans l'environnement node.js, la prise en charge d'ES6 par node a été critiquée. Après la version 13, le mode module a été introduit (ajouter une phrase dans package.json : « type » : « module »), mais certaines bibliothèques conservent la syntaxe ES6. n’est pas pris en charge. Par conséquent, si votre programme node.js ne reconnaît pas la syntaxe ES6, veuillez utiliser Babel pour la transcoder, ce qui peut résoudre le problème.

Comment convertir es6 en es5 ?

Utilisez Babel pour convertir es6 en es5.

Ci-dessous, nous décrivons le processus d'utilisation de Babel sur la ligne de commande afin que vous puissiez comprendre l'ensemble du processus de traduction.

1. Installez l'outil de ligne de commande de Babel dans le projet

npm install -D babel-cli

2. Préparez le code ES6

Habituellement, nous mettons le code source dans le répertoire src. Si vous n'avez pas de code ES6 prêt à l'emploi. mettez-le dans src Créez-en un dans le répertoire :

// src/example.js
class Hello {
  static world() {
    console.log('Hello, World!');
  }
}
Hello.world();

3. Configurez Babel

Babel transpile le code via des plug-ins et des préréglages (afin qu'il puisse traduire non seulement ES6). Afin de traduire ES6 en ES5, il suffit de configurer la valeur par défaut de l'environnement. Installez ce plug-in :

npm install -D babel-preset-env

Nous avons également besoin d'un fichier de configuration dans le répertoire racine du projet : .babelrc avec le contenu suivant :

// .babelrc
{
  "presets": ["env"]
}

4. Créez la commande npm

Cette étape n'est pas nécessaire, car elle a été configurée auparavant, vous pouvez directement exécuter la commande :

babel src -d build

Cela traduira le code Javascript dans le répertoire src en ES5 et le stockera dans le répertoire de construction Down.

Conventionnellement, nous mettons les commandes porte-à-porte dans la commande npm. Dans le package.json du projet, saisissez le contenu suivant :

"scripts": {
  "build": "babel src -d build",
},

De cette façon, vous pouvez utiliser la commande suivante pour traduire le code ES6 :

npm run build

[Recommandations associées : tutoriel vidéo javascript, front-end web]

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!