Comment configurer rapidement votre environnement ES6

Comme vous le savez peut-être, les navigateurs commencent à rattraper ES6. Cependant, tout ne fonctionne pas aussi bien que prévu, et cela peut être un problème long et fastidieux à résoudre. Si quelque chose ne va pas, essayer d'identifier si le problème réside dans le code ou dans le navigateur n'est pas un processus facile.

Mais ne vous inquiétez pas, je vais vous montrer comment installer et écrire rapidement du code ES6 et, surtout, le rendre compatible avec tous les navigateurs prenant en charge ES5.

ES5 à ES6

Afin d'écrire du code ES6, nous devons installer quelque chose qui peut le compiler vers ES5. Nous utiliserons, Rollup. Il compile de petits morceaux de code en quelque chose de plus grand et plus complexe, comme une bibliothèque ou une application. Cela vous permet d'utiliser la POO (programmation orientée objet) qui donne à votre code un aspect plus propre, structuré et modulaire, ainsi que d'autres fonctionnalités utiles. Pour clarifier, JS est orienté objet, mais n'est pas un langage orienté objet basé sur des classes comme Java, C ++, C #, etc., jusqu'à la sortie d'ES6.

Sinon, le plus proche de la POO en ce qui concerne l' inclusion de classes avec ES5 est d'utiliser IIFE (Immediately Invoked Function Expression) ou d'installer des bibliothèques externes. Mais pourquoi compter sur des ressources externes alors que vous avez un langage de base qui prend en charge le paradigme OOP? La plupart des langages de programmation les plus utilisés le prennent déjà en charge (comme C ++, Java, C # et PHP).

Pourquoi ES6?

Personnellement, je l'utilise car cela me permet d'organiser mon code dans des fichiers séparés, ce qui facilite la mise à l'échelle et la maintenance du code.

Par exemple, dans mon HTML, j'en ai un scriptqui se charge main.js, et à l'intérieur main.js, je charge plusieurs JSfichiers en utilisant des instructions importet export. Au lieu d'avoir plusieurs scripts dans mon fichier HTML, je n'en ai besoin que d'un (moins de code).

Conditions préalables

  • Linux ou macOS (basé sur Debian)
  • NPM (gestionnaire de packages) installé
  • Connaissances de base en CLI

Première étape: installer le rollup

Pour l'utiliser, Rollupnous devons l'installer globalement. N'oubliez pas d'utiliser sudo. Cela vous permet d'accéder aux Rollupcommandes dans n'importe quel projet avec lequel vous travaillez.

Deuxième étape: structure des fichiers

Une fois que vous avez installé Rollupglobalement, l'étape suivante consiste à configurer la structure de dossiers et à créer deux dossiers srcet à l' destintérieur de votre projet. De plus, créez index.html.

  • src → Fichiers ES6 (où vous allez écrire le code)
  • dest → Génère un ES5 (versions compilées de ES6)

Gardez à l'esprit que le bundle.jsfichier est généré automatiquement lorsque la Rollupcommande est exécutée. Nous en reparlerons plus tard.

Troisième étape: créer un fichier de configuration

Créez un nouveau fichier et nommez-le rollup.config.js. Ajoutez ensuite ce code:

Assurez-vous que le chemin d'accès inputet de la outputsource correspond à la structure de vos dossiers et que ce fichier est placé dans le dossier principal.

Étape 4: charger le fichier de script en HTML

Nous sommes presque prêts, mais nous devons d'abord créer un lien vers le bon fichier source dans notre modèle HTML. Cela chargera le fichier ES5 qui est compilé à partir d'ES6.

Étape 5: configuration des fichiers JS

Afin de vérifier que la Rollupcommande fonctionne, nous devons configurer une structure OOP simple. Nous allons créer une car.jsclasse, et default exportelle le fera main.js.

Gardez à l'esprit que ce fichier exporte une nouvelle instance de la car.jsclasse, ce qui permet d'accéder directement aux méthodes plutôt que d'écrire const car = new Car()dans la main.jsclasse.

Puisque je suis un ingénieur logiciel paresseux, gérer quelques caractères supplémentaires de code prend du temps :)

Ensuite, importez la car.jsclasse main.jsdans afin d'accéder aux méthodes type().

Étape 6: Compilez ES6 vers ES5

Pour exécuter le fichier de configuration que nous avons créé, exécutez cette commande $ rollup -cou $ rollup --config- les deux sont identiques.

Après avoir exécuté l'une des commandes, ouvrez index.htmlvia un navigateur, puis ouvrez inspect ( ctrl + shift + I) sur le navigateur et accédez à console. Si vous voyez le texte "Tesla Model S", cela signifie que tout a fonctionné avec succès.

Gardez à l'esprit que chaque fois que vous apportez des modifications aux fichiers ES6, vous devez les mettre à jour en exécutant la commande.

Optionnel

Puisque vous avez installé Rollupglobalement, vous pouvez compiler ES6 sans avoir besoin d'avoir le fichier rollup.config.js. Il fait exactement la même chose:

$ rollup src/main.js — o dest/bundle.js — f iife

Personnellement, je recommanderais de courir $ rollup -ccomme indiqué à l'étape six car il y a moins de code requis. N'oubliez pas que vous devez avoir le fichier rollup.config.js inclus lors de l'exécution de cette commande.

Si vous avez trouvé cette configuration de l'approche d'installation courte pour ES6 utile, veuillez commenter et applaudir. C'est un bon karma.