Transplipation des modules ES6 à AMD & CommonJS en utilisant Babel & Gulp

Points de base

• ECMAScript 6 (ES6) a apporté de nombreuses améliorations à JavaScript pour mieux adapter son échelle d'utilisation actuelle, y compris la possibilité de charger différentes parties de l'application sous forme de modules. Cependant, tous les navigateurs n'ont pas implémenté toutes les fonctionnalités ES6, et c'est là que des traducteurs comme Babel et Traceur entrent en jeu.
• Babel et Gulp peuvent être utilisés pour traduire les modules ES6 en CommonJS ou AMD, ce qui leur permet de lire par les navigateurs d'aujourd'hui. Ce processus consiste à utiliser la tâche Gulp de Babel pour convertir les modules en l'un des systèmes de modules existants, puis à emballer l'application en un seul fichier pour le navigateur à utiliser.
• CommonJS est un système de module synchrone utilisé par Node.js, qui charge les modules à l'aide de la fonction requise et les exporte à l'aide de la propriété d'exportation de l'objet module. La conversion d'un module ES6 en CommonJS implique l'utilisation d'une combinaison de babel, de navigation et de gorgée.
• Le système de définition du module asynchrone (AMD) permet de charger plusieurs modules dépendants en parallèle. Pour convertir le module ES6 en AMD, nous utilisons Babel, Requirejs et Gulp. Vous pouvez ensuite référencer directement le script final sur la page index.html et le voir dans le navigateur.

ECMAScript 6 (AKA ECMAScript 2015 ou ES6), la spécification de la prochaine version de JavaScript a été approuvée et les fournisseurs de navigateur travaillent à l'implémenter. Contrairement aux versions précédentes d'Ecmascript, ES6 a fait un énorme changement dans la langue, ce qui lui permet de bien s'adapter à l'échelle d'utilisation d'aujourd'hui. SitePoint a plusieurs articles couvrant ces fonctionnalités.

Bien que le navigateur n'ait pas encore mis en œuvre toutes les fonctionnalités, nous pouvons toujours profiter de ES6 pendant le développement et convertir l'application en une version que le navigateur peut comprendre avant de la livrer. Babel et Traceur sont deux des principaux traducteurs utilisés à cet effet. TypeSet de type JavaScript de Microsoft peut également être utilisé comme traducteur ES6.

Dans un article précédent, j'ai expliqué comment utiliser ES6 pour écrire des applications angulaires 1.x. Dans ce post, j'ai utilisé le traducteur instantané de Traceur pour exécuter l'application. Bien que cela fonctionne, il est préférable de traduire à l'avance et de réduire la quantité de travail qui doit être effectuée dans le navigateur. Dans cet article, nous verrons comment traduire le même exemple d'application à ES5 et convertir le module en CommonJS ou AMD, en utilisant Babel pour lui permettre de fonctionner sur les navigateurs d'aujourd'hui. Bien que les exemples soient basés sur Angular, les techniques de traduction peuvent être utilisées pour tout code ES6 valide.

Comme toujours, vous pouvez trouver le code d'accompagnement de cet article dans notre référentiel GitHub.

L'importance des modules

Dans n'importe quelle langue utilisée pour écrire de grandes applications, une fonctionnalité clé est la possibilité de charger différentes parties d'une application sous forme de modules. Les modules aident non seulement à rendre le code plus concis, mais jouent également un rôle dans la réduction de l'utilisation de la portée globale. Le contenu du module n'est fourni à aucun autre module à moins qu'il ne soit explicitement chargé.

L'importance des modules ne se limite pas aux applications. Même les grandes bibliothèques JavaScript peuvent utiliser des systèmes de modules pour exporter leurs objets en tant que modules, et les applications utilisant ces bibliothèques peuvent importer ces modules au besoin. Angular 2 et Aurelia ont commencé à utiliser cette fonctionnalité.

Si vous voulez un aperçu rapide de l'utilisation de modules dans ES6, lisez: Comprendre les modules ES6

à propos de l'exemple d'application

Le thème de notre exemple d'application est la bibliothèque virtuelle. Il contient les pages suivantes:

1. Accueil: affiche une liste de livres actifs qui peuvent être marqués comme étant lus ou déplacées vers les archives.
2. Ajouter la page du livre: ajouter de nouveaux livres à la bibliothèque en acceptant le titre du livre et le nom de l'auteur. Il ne permet pas de titres en double.
3. Page d'archive: Répertoriez tous les livres archivés.

L'application est construite en utilisant AngularJS 1.3 et ES6. Si vous regardez des fichiers dans le dossier de l'application, vous verrez les mots clés exporter et importer pour exporter des objets à partir du module actuel et importer des objets à partir d'autres modules. Maintenant, notre travail consiste à convertir ces modules en l'un des systèmes de modules existants en utilisant la tâche Gulp de Babel.

mais je n'utilise pas Angular. Je veux juste convertir le module ES6 en CommonJS / AMD

Ne vous inquiétez pas! Nous sommes prêts pour vous. Avec juste une petite quantité de peaufinage, la recette démontrée ci-dessous peut être utilisée sur n'importe quel projet impliquant un module ES6. Angular n'a pas d'importance ici.

Convertir en communjs

CommonJS est un système de modules défini par le groupe CommonJS. Il s'agit d'un système de module synchrone où le module est chargé à l'aide de la fonction Require et le module est exporté à l'aide de la propriété Exportations de l'objet module. Les objets du module doivent être disponibles dans tous les modules par défaut.

Node.js utilise ce système de module, de sorte qu'il définit nativement l'objet module et le fournit à votre application. Étant donné que le navigateur ne définit pas cet objet, nous devons utiliser un utilitaire appelé Browserify pour combler l'écart.

Nous devons également installer certains packages NPM avant de commencer. Cela nous permettra d'utiliser Babel et Browserify avec Gulp pour convertir nos modules ES6 en l'un des formats de module commun et former l'application en tant que fichier unique pour le navigateur.

• Gulp-Babel - Convertir le code ES6 en ES5
normal>
• Browserify - vous permet d'exiger ('modules') dans votre navigateur en regroupant toutes les dépendances
• Vinyl-Source-Stream - Gérez directement le module de navigation pour éviter le besoin de gulp-browserify wrapper
• Vinyl-Buffer - Convertir les flux en tampons (nécessaire pour Gulp-uglify qui ne prend pas en charge les flux)
• gulp-uglify - fichier compressé
• del - vous permet de supprimer les fichiers et les dossiers
• Gulp-Rename - un plugin qui vous permet de renommer les fichiers

Vous pouvez obtenir tout cela en tapant:

<code>npm install gulp-babel browserify gulp-browserify vinyl-source-stream vinyl-buffer gulp-uglify del gulp-rename --save-dev</code>

Commençons maintenant à utiliser ces packages dans notre gulpfile.js. Nous devons écrire une tâche pour obtenir tous les fichiers ES6 et les transmettre à Babel. Le système de module par défaut dans Babel est CommonJS, nous n'avons donc pas besoin d'envoyer des options à la fonction BABEL.

<code>var babel = require('gulp-babel'),
    browserify = require('browserify'),
    source = require('vinyl-source-stream'),
    buffer = require('vinyl-buffer'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify'),
    del = require('del');

gulp.task('clean-temp', function(){
  return del(['dest']);
});

gulp.task('es6-commonjs',['clean-temp'], function(){
  return gulp.src(['app/*.js','app/**/*.js'])
    .pipe(babel())
    .pipe(gulp.dest('dest/temp'));
});
</code>

J'espère qu'il n'y a rien de trop déroutant ici. Nous déclarons une tâche appelée ES6-COMMONJS qui obtient n'importe quel fichier JavaScript dans le répertoire de l'APP et toutes les sous-répertoires. Il les transmet ensuite via Babel, qui à son tour convertit les fichiers individuels en modules ES5 et CommonJS et copie les fichiers convertis en dossier dest / temp. La tâche ES6-COMMONJS a une dépendance appelée Clean-Temple qui supprimera le répertoire Dest et tous les fichiers avant la tâche ES6-Commonjs.

Si vous souhaitez rendre le code plus clair et spécifier le système du module, vous pouvez modifier l'utilisation de Babel comme suit:

<code>.pipe(babel({
  modules:"common"
}))
</code>

Maintenant, nous pouvons créer un fichier de bundle unique à partir de ces fichiers uniques en appliquant la navigation et en compressant la sortie à l'aide du package UGLIFY. L'extrait de code suivant montre ceci:

<code>gulp.task('bundle-commonjs-clean', function(){
  return del(['es5/commonjs']);
});

gulp.task('commonjs-bundle',['bundle-commonjs-clean','es6-commonjs'], function(){
  return browserify(['dest/temp/bootstrap.js']).bundle()
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(uglify())
    .pipe(rename('app.js'))
    .pipe(gulp.dest("es5/commonjs"));
});
</code>

La tâche ci-dessus a deux dépendances: la première est la tâche Bundle-Commonjs-Clean, qui supprimera le répertoire ES5 / CommonJS; Une fois ces tâches exécutées, la tâche met le fichier combiné et compressé app.js dans le dossier ES5 / CommonJS. Ce fichier peut être référencé directement dans index.html et la page peut être affichée dans le navigateur.

Enfin, nous pouvons ajouter une tâche pour démarrer l'opération:

<code>gulp.task('commonjs', ['commonjs-bundle']);
</code>

Convertir en AMD

Le système de définition du module asynchrone (AMD), comme le nom l'indique, est un système de chargement de module asynchrone. Il permet de charger plusieurs modules dépendants en parallèle, et il n'attend pas qu'un module soit complètement chargé avant de tenter de charger d'autres modules.

require.js est une bibliothèque utilisée pour gérer AMD. Requirejs est disponible via Bower:

<code>bower install requirejs --save</code>

Nous avons également besoin du plugin Gulp de require.js pour regrouper l'application. Pour ce faire, installez le package NPM Gulp-Requirejs.

<code>npm install gulp-requirejs --save-dev</code>

Maintenant, nous devons écrire une tâche qui convertit le code ES6 en ES5 et AMD, puis le regroupe avec requirejs. Ces tâches sont très similaires à celles créées dans la section CommonJS.

<code>var requirejs = require('gulp-requirejs');

gulp.task('es6-amd',['clean-temp'], function(){
    return gulp.src(['app/*.js','app/**/*.js'])
    .pipe(babel({ modules:"amd" }))
    .pipe(gulp.dest('dest/temp'));
});

gulp.task('bundle-amd-clean', function(){
  return del(['es5/amd']);
});

gulp.task('amd-bundle',['bundle-amd-clean','es6-amd'], function(){
  return requirejs({
    name: 'bootstrap',
    baseUrl: 'dest/temp',
    out: 'app.js'
  })
  .pipe(uglify())
  .pipe(gulp.dest("es5/amd"));
});

gulp.task('amd', ['amd-bundle']);
</code>

Pour utiliser le script final sur la page index.html, nous devons ajouter une référence au requirejs, le script généré, puis charger le module bootstrap. Le fichier bootstrap.js à l'intérieur du dossier de l'application démarre l'application AngularJS, nous devons donc le charger pour démarrer l'application AngularJS.

<code> src="bower_components/requirejs/require.js" >>
 src="es5/amd/app.js">>
>
  (function(){
    require(['bootstrap']);
  }());
>
</code>

Conclusion

Les modules

sont une caractéristique qui manque depuis longtemps. Ils apparaîtront dans ES6, mais malheureusement, leur support actuel de navigateur natif est médiocre. Mais cela ne signifie pas que vous ne pouvez pas les utiliser aujourd'hui. Dans ce tutoriel, je montre comment convertir les modules ES6 en formats CommonJS et AMD qui peuvent fonctionner dans le navigateur à l'aide de Gulp, Babel et divers plugins.

Quant à ES6? Depuis sa sortie, ES6 a attiré beaucoup d'attention dans la communauté. Il a été utilisé par les plug-ins JavaScript, notamment Bootstrap, Aurelia, Angular 2 et de nombreuses autres bibliothèques ou frameworks JavaScript. TypeScript ajoute également la prise en charge de certaines fonctionnalités ES6, y compris les modules. L'apprentissage et l'utilisation de l'ES6 d'aujourd'hui réduiront les efforts requis pour convertir le code à l'avenir.

FAQ (FAQ) pour traduire les modules ES6 en AMD et CommonJS en utilisant Babel et Gulp

Quel est le but d'utiliser Babel et Gulp pour traduire les modules ES6 en AMD et CommonJS?

L'utilisation de Babel et Gulp pour traduire les modules ES6 en AMD et CommonJS est un processus qui permet aux développeurs d'écrire du code en utilisant la dernière version de JavaScript (ES6), puis de le convertir en une version que divers moteurs JavaScript peuvent comprendre. Ceci est particulièrement utile car tous les navigateurs ou environnements ne prennent pas en charge les dernières fonctionnalités ES6. En traduisant le code, les développeurs peuvent s'assurer que leurs applications fonctionnent en douceur sur différentes plates-formes.

Comment Babel aide-t-il à traduire les modules ES6?

Babel est un compilateur JavaScript qui est principalement utilisé pour convertir le code ECMAScript 2015 (ES6) en versions JavaScript en arrière compatibles qui peuvent être exécutées par des moteurs JavaScript plus anciens. Lors de la traduction des modules ES6, Babel fournit des plugins comme "Babel-Plugin-Transform-Modules-COMMONJS" qui convertissent la syntaxe du module ES6 en syntaxe CommonJS largement prise en charge.

Quel rôle joue Gulp dans le processus de traduction?

Gulp est un coureur de tâche qui peut être utilisé pour automatiser le processus de traduction. Il peut être configuré pour surveiller toutes les modifications dans un fichier ES6 et exécuter automatiquement le traducteur Babel dessus. Cela permet aux développeurs d'exécuter manuellement le traducteur chaque fois qu'ils modifient le code.

Puis-je traduire le module ES6 en AMD au lieu de CommonJS?

Oui, vous pouvez traduire les modules ES6 en définitions de modules asynchrones (AMD) au lieu de CommonJS. Babel fournit un plugin appelé "Babel-Plugin-Transform-Modules-AMD" à cette fin. AMD est particulièrement utile pour traiter un grand nombre de modules dans un environnement de navigateur Web.

Quelle est la différence entre AMD et CommonJS?

AMD et CommonJS sont les deux formats de modules. La principale différence entre eux est la façon dont ils gèrent les dépendances. AMD prend en charge le chargement asynchrone des dépendances, ce qui peut améliorer les performances dans les environnements de navigateur. CommonJS, en revanche, charge les dépendances de manière synchrone, ce qui est plus simple et fonctionne bien dans des environnements de serveur comme Node.js.

Comment spécifier la fonctionnalité ES6 à traduire?

babel Utilisez un fichier de configuration nommé .babelrc (ou babel.config.js), où vous pouvez spécifier la fonctionnalité ES6 à traduire. Vous pouvez répertorier les plugins ou les préréglages à utiliser dans ce fichier. Par exemple, pour traduire un module ES6, vous inclurez "Babel-Plugin-Transform-modules-COMMONJS" ou "Babel-Plugin-Transform-Modules-AMD" dans la configuration.

Quels sont les avantages de l'utilisation des modules ES6?

Les modules

ES6 apportent de nombreux avantages au développement JavaScript. Ils introduisent une syntaxe standard pour l'importation et l'exportation de fonctions, objets ou valeurs à partir de modules, ce qui peut rendre votre code plus organisé et gérable. Ils prennent également en charge l'analyse statique, qui améliore les performances et capture des erreurs au temps de compilation plutôt que d'exécution.

Comment déboguer le code traduit?

Le débogage du code traduit peut être difficile car le code exécuté est différent de celui que vous avez écrit. Cependant, Babel fournit une solution à ce problème grâce à la forme de cartographie source. Une carte source est un fichier qui mappe le code traduit au code source d'origine, vous permettant de déboguer le code tout comme il exécute le code ES6 d'origine.

Puis-je utiliser Babel et Gulp avec d'autres frameworks JavaScript?

Oui, Babel et Gulp ne sont pas liés à un cadre JavaScript spécifique. Ils peuvent être utilisés avec n'importe quel cadre compatible ES6, y compris React, Angular, Vue.js, etc.

Y a-t-il des alternatives à Babel et Gulp pour la traduction des modules ES6?

Oui, il existe plusieurs alternatives pour Babel et Gulp qui peuvent être utilisées pour traduire les modules ES6. Ceux-ci incluent TypeScript, Traceur et Rollup. Ces outils ont chacun leurs avantages et leurs inconvénients, donc le meilleur choix dépend de vos besoins et préférences spécifiques.

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!