Copyright HébergementWebs.com - License GPL

BabelJS - Babel CLI

Tutoriel babeljs   2021-01-04 11:05:05

BabelJS est livré avec une interface de ligne de commande intégrée dans laquelle le code JavaScript peut être facilement compilé dans le ECMA respectif en utilisant des commandes faciles à utiliser. Nous discuterons de l"utilisation de ces commandes dans ce chapitre. Premièrement, nous installerons babel-cli pour notre projet. Nous utiliserons babeljs pour compiler le code. Créez un dossier pour que votre projet puisse jouer avec babel-cli. commande npm init Affichage Package.json créé pour le projet ci-dessus - Lançons les commandes pour installer babel-cli. Package pour babel 6 npm install --save-dev babel-cli Package pour babel 7 npm install --save-dev @ babel / cli Affichage Nous avons installé babel-cli et voici le package mis à jour.json - En plus de cela, nous devons installer babel-preset et babel-core. Voyons maintenant la commande pour l"installation. Paquets pour babel 6 npm install --save-dev babel-preset-env npm install --save-dev babel-core Paquets pour babel 7 npm install --save-dev @ babel / core npm install --save -dev @ babel / preset-env Voici le package.json mis à jour pour les commandes ci-dessus - Puisque nous devons compiler en code JavaScript que nous allons écrire pour avoir une compatibilité descendante, nous le compilerons dans ECMA Script 5. Pour cela, nous devons demander à babel de rechercher le préréglage, c"est-à-dire es version dans laquelle la compilation sera effectuée. Nous devons créer un fichier .p> dans le dossier racine de notre projet créé comme indiqué ci-dessous. Il contient un objet json avec les détails des préréglages suivants - { "presets ": [ "env "]} Pour babel 7, le .babelrc est le suivant - { "presets ": [ "@ babel / env "]} Nous avons installé babel local dans le projet. Afin d"utiliser babel dans notre projet, nous devons spécifier la même chose dans package.json comme suit - Compiler les fichiers JS Nous sommes maintenant prêts à compiler nos fichiers JavaScript. Créez un dossier srcdansvotreprojet;danscedossier,créezunfichierappelémain.jsetécrivezuncodejavaes6commeindiquéci-dessous-commande npx babel src/main.jsSortie Dans le cas ci-dessus, le code de main.js est affiché dans le terminal en version es5. La fonction de flèche de es6 est convertie en es5 comme indiqué ci-dessus. Au lieu d"afficher le code compilé dans le terminal, nous le stockerons dans un fichier différent comme indiqué ci-dessous. Nous avons créé un dossier dans notre projet appelé dans lequel, nous voulons que les fichiers compilés soient stockés. Voici la commande qui compilera et stockera la sortie où nous le voulons. commande npx babel src/main.js--out-fileout/main_out.jsSortie L"option de la commande --out-file nous aide à stocker la sortie à l"emplacement de fichier de notre choix. Dans le cas où nous voulons que le fichier soit mis à jour chaque fois que nous apportons des modifications au fichier principal, ajoutez l"option --watch ou -w à la commande comme indiqué ci-dessous. commande npx babel src/main.js--watch--out-fileout/main_out.jsSortie Vous pouvez apporter la modification au fichier principal; cette modification se reflétera dans le fichier compilé. Dans le cas ci-dessus, nous avons changé le message du journal et le --watch L"option vérifie tout changement et les mêmes changements sont ajoutés dans le fichier compilé. Fichier compilé Dans nos sections précédentes, nous avons appris à compiler des fichiers individuels. Maintenant, nous allons compiler un répertoire et stocker les fichiers compilés dans un autre répertoire. Dans le dossier src,nousallonscréerunautrefichierjsappelémain1.js.Àl"heureactuelle,ledossiersrccontient2fichiersjavamain.jsetmain1.js.Voicilecodedanslesfichiers-main.js var arrowfunction = () => {console.log ( "Ajout de modifications au message du journal "); } main1.js var handler = () => {console.log ( "Ajout d"un autre fichier"); } La commande suivante compilera le code du dossier srcetlestockeradansledossierout/.Nousavonssupprimétouslesfichiersdudossierout/etl"avonslaissévide.Nousallonsexécuterlacommandeetvérifierlasortiedansledossierout/.commande npx babel src--out-diroutNousavons2fichiersdansledossierout-main.jsetmain1.jsmain.js "use strict var arrowfunction = function arrowfunction () {console.log ( "Ajout de modifications au message du journal "); }; main1.js "use strict var handler = function handler () {console.log ( "Ajout d"un fichier supplémentaire "); }; Ensuite, nous exécuterons la commande donnée ci-dessous pour compiler les deux fichiers en un seul fichier en utilisant babeljs. commande npx babel src--out-fileout/all.jsSortie "use strict var arrowfunction = function arrowfunction () {console.log ( "Ajout de modifications au message du journal "); }; "utiliser strict var handler = function handler () {console.log ( "Ajout d"un fichier supplémentaire "); }; Si nous voulons ignorer certains fichiers de la compilation, nous pouvons utiliser l"option --ignore comme indiqué ci-dessous. commande npx babel src--out-fichierout/all.js--ignoresrc/main1.jsOutputall.js "use strict var arrowfunction = function arrowfunction () {console.log ( "Ajout de modifications au message du journal "); }; Nous pouvons utiliser les options de plugins à utiliser lors de la compilation de fichiers. Pour utiliser les plugins, nous devons l"installer comme indiqué ci-dessous. commande npm install --save-dev babel-plugin-transform -exponentiation-operator expo.js let sqr = 9 ** 2; console.log (sqr); commande npx babel expo.js --out-file expo_compiled.js --plugins = babel-plugin-transform-exponentiation-operator Sortie "use strict var sqr = Math.pow (9, 2); console.log (sqr); Nous pouvons également utiliser des préréglages dans la commande comme indiqué ci-dessous. commande npx babel src/main.js--out-filemain_es5.js--presets=es2015Pourtesterlecasci-dessus,nousavonssupprimél"optiondepréréglagesde.babelrc.main.js var arrowfunction = () => {console.log ( "Ajout de modifications au message du journal "); } main_es5.js "use strict var arrowfunction = function arrowfunction () {console.log ( "Ajout de modifications au message du journal "); }; Nous pouvons également ignorer .babelrc depuis la ligne de commande comme suit - npx babel --no-babelrc src/main.js--out-filemain_es5.js--presets=es2015Pourtesterlecasci-dessus,nousavonsrajoutédespréréglagesà.babelrcetlemêmeseraignoréàcausede--no-babelrcquenousavonsajoutédanslecommander.Lesdétailsdufichiermain_es5.jssontlessuivants-main_es5.js "use strict var arrowfunction = function arrowfunction () {console.log ( "Ajout de modifications au message du journal "); };