JavaScripti koodi transformatsioon: Babeli pistikprogrammi arendusjuhend

JavaScript kui keel areneb pidevalt. Uusi funktsioone pakutakse välja, standardiseeritakse ja lõpuks rakendatakse brauserites ja Node.js-is. Kuid nende funktsioonide toetamine vanemates keskkondades või kohandatud koodi transformatsioonide rakendamine nõuab tööriistu, mis suudavad JavaScripti koodi manipuleerida. Siin Babel särab ja teadmine, kuidas kirjutada oma Babeli pistikprogramme, avab maailma võimalusi.

Mis on Babel?

Babel on JavaScripti kompilaator, mis võimaldab arendajatel kasutada järgmise põlvkonna JavaScripti süntaksit ja funktsioone juba täna. See transformeerib kaasaegse JavaScripti koodi tagasiühilduvaks versiooniks, mis töötab vanemates brauserites ja keskkondades. Põhimõtteliselt parserdab Babel JavaScripti koodi abstraktseks süntaksipuuks (AST), manipuleerib AST-d vastavalt konfigureeritud transformatsioonidele ja genereerib seejärel transformeeritud JavaScripti koodi.

Miks kirjutada Babeli pistikprogramme?

Kuigi Babeliga on kaasas hulk eelmääratletud transformatsioone, on stsenaariume, kus on vaja kohandatud transformatsioone. Siin on mõned põhjused, miks võiksite kirjutada oma Babeli pistikprogrammi:

• Kohandatud süntaks: rakendage oma projektile või domeenile spetsiifiliste kohandatud süntaksi laienduste tuge.
• Koodi optimeerimine: automatiseerige koodi optimeerimisi, mis ületavad Babeli sisseehitatud võimalusi.
• Lintimine ja koodistiili jõustamine: jõustage spetsiifilisi koodistiili reegleid või tuvastage potentsiaalseid probleeme kompileerimisprotsessi käigus.
• Rahvusvahelistamine (i18n) ja lokaliseerimine (l10n): automatiseerige tõlgitavate stringide väljavõtmise protsessi oma koodibaasist. Näiteks võiksite luua pistikprogrammi, mis asendab automaatselt kasutajale suunatud teksti võtmetega, mida kasutatakse tõlgete otsimiseks vastavalt kasutaja lokaadile.
• Raamistikuspetsiifilised transformatsioonid: rakendage transformatsioone, mis on kohandatud konkreetsele raamistikule, nagu React, Vue.js või Angular.
• Turvalisus: rakendage kohandatud turvakontrolle või hägustamistehnikaid.
• Koodi genereerimine: genereerige koodi vastavalt konkreetsetele mustritele või konfiguratsioonidele.

Abstraktse süntaksipuu (AST) mõistmine

AST on teie JavaScripti koodi struktuuri puulaadne esitus. Iga sõlm puus esindab koodi konstruktsiooni, nagu muutuja deklaratsioon, funktsioonikutse või avaldis. AST-i mõistmine on Babeli pistikprogrammide kirjutamiseks ülioluline, kuna te liigute läbi selle puu ja manipuleerite sellega koodi transformatsioonide tegemiseks.

Tööriistad nagu AST Explorer on hindamatud antud koodilõigu AST-i visualiseerimiseks. Saate kasutada AST Explorerit, et katsetada erinevate koodi transformatsioonidega ja näha, kuidas need AST-d mõjutavad.

Siin on lihtne näide selle kohta, kuidas JavaScripti koodi esitatakse AST-na:

JavaScripti kood:

            const x = 1 + 2;
            

              
                Copy
              
            
          

Lihtsustatud AST esitus:

            {
  "type": "VariableDeclaration",
  "declarations": [
    {
      "type": "VariableDeclarator",
      "id": {
        "type": "Identifier",
        "name": "x"
      },
      "init": {
        "type": "BinaryExpression",
        "operator": "+",
        "left": {
          "type": "NumericLiteral",
          "value": 1
        },
        "right": {
          "type": "NumericLiteral",
          "value": 2
        }
      }
    }
  ],
  "kind": "const"
}
            

              
                Copy
              
            
          

Nagu näete, jagab AST koodi selle koostisosadeks, muutes selle analüüsimise ja manipuleerimise lihtsamaks.

Babeli pistikprogrammi arenduskeskkonna seadistamine

Enne pistikprogrammi kirjutamise alustamist peate seadistama oma arenduskeskkonna. Siin on põhiline seadistus:

1. Node.js ja npm (või yarn): veenduge, et teil on installitud Node.js ja npm (või yarn).
2. Looge projekti kataloog: looge oma pistikprogrammi jaoks uus kataloog.
3. Initsialiseerige npm: käivitage oma projekti kataloogis npm init -y, et luua fail package.json.
4. Installige sõltuvused: installige vajalikud Babeli sõltuvused:

               npm install @babel/core @babel/types @babel/template
               
   
                 
                   Copy
                 
               
             

   • @babel/core: Babeli põhiteek.
   • @babel/types: utiliiditeek AST sõlmede loomiseks ja kontrollimiseks.
   • @babel/template: utiliiditeek AST sõlmede genereerimiseks mallstringidest.

Babeli pistikprogrammi anatoomia

Babeli pistikprogramm on sisuliselt JavaScripti funktsioon, mis tagastab objekti, millel on atribuut visitor. Atribuut visitor on objekt, mis määratleb funktsioonid, mida käivitatakse, kui Babel kohtub AST läbimise ajal konkreetsete AST sõlmetüüpidega.

Siin on Babeli pistikprogrammi põhiline struktuur:

            module.exports = function(babel) {
  const { types: t } = babel;

  return {
    name: "my-custom-plugin",
    visitor: {
      Identifier(path) {
        // Kood Identifier sõlmede transformeerimiseks
      }
    }
  };
};
            

              
                Copy
              
            
          

Jaotame peamised komponendid:

• module.exports: pistikprogramm eksporditakse moodulina, mis võimaldab Babelil seda laadida.
• babel: objekt, mis sisaldab Babeli API-d, sealhulgas objekti types (aliasega t), mis pakub utiliite AST sõlmede loomiseks ja kontrollimiseks.
• name: string, mis tuvastab teie pistikprogrammi. Kuigi see pole rangelt vajalik, on hea tava lisada kirjeldav nimi.
• visitor: objekt, mis kaardistab AST sõlmetüübid funktsioonidele, mida käivitatakse, kui neid sõlmetüüpe AST läbimise ajal kohatakse.
• Identifier(path): külastusfunktsioon, mida kutsutakse iga AST-i sõlme Identifier jaoks. Objekt path pakub juurdepääsu sõlmele ja selle ümbritsevale kontekstile AST-s.

Objektiga path töötamine

Objekt path on AST-i manipuleerimise võti. See pakub meetodeid AST sõlmedele juurdepääsuks, nende muutmiseks ja asendamiseks. Siin on mõned kõige sagedamini kasutatavad path meetodid:

• path.node: AST sõlm ise.
• path.parent: praeguse sõlme vanemsõlm.
• path.parentPath: vanemsõlme objekt path.
• path.scope: praeguse sõlme skoobi objekt. See on kasulik muutuja viidete lahendamiseks.
• path.replaceWith(newNode): asendab praeguse sõlme uue sõlmega.
• path.replaceWithMultiple(newNodes): asendab praeguse sõlme mitme uue sõlmega.
• path.insertBefore(newNode): sisestab uue sõlme enne praegust sõlme.
• path.insertAfter(newNode): sisestab uue sõlme pärast praegust sõlme.
• path.remove(): eemaldab praeguse sõlme.
• path.skip(): jätab praeguse sõlme laste läbimise vahele.
• path.traverse(visitor): läbib praeguse sõlme lapsi uue külastaja abil.
• path.findParent(callback): leiab esimese vanemsõlme, mis vastab antud tagasihelistamisfunktsioonile.

AST sõlmede loomine ja kontrollimine abil @babel/types

Teek @babel/types pakub funktsioonide komplekti AST sõlmede loomiseks ja kontrollimiseks. Need funktsioonid on hädavajalikud AST-i manipuleerimiseks tüübikindlal viisil.

Siin on mõned näited @babel/types kasutamisest:

            const { types: t } = babel;

// Loo Identifier sõlm
const identifier = t.identifier("myVariable");

// Loo NumericLiteral sõlm
const numericLiteral = t.numericLiteral(42);

// Loo BinaryExpression sõlm
const binaryExpression = t.binaryExpression("+", t.identifier("x"), t.numericLiteral(1));

// Kontrolli, kas sõlm on Identifier
if (t.isIdentifier(identifier)) {
  console.log("Sõlm on Identifier");
}

            

              
                Copy
              
            
          

@babel/types pakub laia valikut funktsioone erinevat tüüpi AST sõlmede loomiseks ja kontrollimiseks. Täieliku loendi leiate Babel Types dokumentatsioonist.

AST sõlmede genereerimine mallstringidest abil @babel/template

Teek @babel/template võimaldab teil genereerida AST sõlmi mallstringidest, muutes keerukate AST struktuuride loomise lihtsamaks. See on eriti kasulik, kui peate genereerima koodilõike, mis hõlmavad mitut AST sõlme.

Siin on näide @babel/template kasutamisest:

            const { template } = babel;

const buildRequire = template(`
  var IMPORT_NAME = require(SOURCE);
`);

const requireStatement = buildRequire({
  IMPORT_NAME: t.identifier("myModule"),
  SOURCE: t.stringLiteral("my-module")
});

// requireStatement sisaldab nüüd AST-d: var myModule = require("my-module");

            

              
                Copy
              
            
          

Funktsioon template parserdab mallstringi ja tagastab funktsiooni, mida saab kasutada AST sõlmede genereerimiseks, asendades kohatäited pakutavate väärtustega.

Näidis pistikprogramm: Identifierite asendamine

Loome lihtsa Babeli pistikprogrammi, mis asendab kõik identifieri x esinemised identifieriga y.

            module.exports = function(babel) {
  const { types: t } = babel;

  return {
    name: "replace-identifier",
    visitor: {
      Identifier(path) {
        if (path.node.name === "x") {
          path.node.name = "y";
        }
      }
    }
  };
};
            

              
                Copy
              
            
          

See pistikprogramm itereerib läbi kõigi AST-i sõlmede Identifier. Kui identifieri atribuut name on x, asendab see selle väärtusega y.

Näidis pistikprogramm: Console Log avaldise lisamine

Siin on keerukam näide, mis lisab iga funktsiooni keha algusesse console.log avaldise.

            module.exports = function(babel) {
  const { types: t } = babel;

  return {
    name: "add-console-log",
    visitor: {
      FunctionDeclaration(path) {
        const functionName = path.node.id.name;
        const consoleLogStatement = t.expressionStatement(
          t.callExpression(
            t.memberExpression(
              t.identifier("console"),
              t.identifier("log")
            ),
            [t.stringLiteral(`Function ${functionName} called`)]
          )
        );

        path.get("body").unshiftContainer("body", consoleLogStatement);
      }
    }
  };
};
            

              
                Copy
              
            
          

See pistikprogramm külastab sõlme FunctionDeclaration. Iga funktsiooni jaoks loob see avaldise console.log, mis logib funktsiooni nime. Seejärel sisestab see selle avaldise funktsiooni keha algusesse, kasutades path.get("body").unshiftContainer("body", consoleLogStatement).

Babeli pistikprogrammi testimine

On ülioluline testida oma Babeli pistikprogrammi põhjalikult, et veenduda, et see töötab ootuspäraselt ja ei tekita ootamatut käitumist. Siin on, kuidas saate oma pistikprogrammi testida:

1. Looge testfail: looge JavaScripti fail koodiga, mida soovite oma pistikprogrammi abil transformeerida.
2. Installige @babel/cli: installige Babeli käsurea liides:

               npm install @babel/cli
               
   
                 
                   Copy
                 
               
             

3. Konfigureerige Babel: looge oma projekti kataloogis fail .babelrc või babel.config.js, et konfigureerida Babel oma pistikprogrammi kasutama.

   Näide .babelrc:

               {
     "plugins": ["./my-plugin.js"]
   }
               
   
                 
                   Copy
                 
               
             

4. Käivitage Babel: käivitage Babel käsurealt, et transformeerida oma testfail:

               npx babel test.js -o output.js
               
   
                 
                   Copy
                 
               
             

5. Kontrollige väljundit: kontrollige faili output.js, et veenduda, kas kood on õigesti transformeeritud.

Babeli pistikprogrammi avaldamine

Kui soovite oma Babeli pistikprogrammi maailmaga jagada, saate selle avaldada npm-is. Siin on, kuidas:

1. Looge npm konto: kui teil pole veel kontot, looge konto npm-is.
2. Värskendage package.json: värskendage oma faili package.json vajaliku teabega, nagu paketi nimi, versioon, kirjeldus ja märksõnad.
3. Logige sisse npm-i: käivitage oma terminalis npm login ja sisestage oma npm-i mandaadid.
4. Avalda oma pistikprogramm: käivitage oma projekti kataloogis npm publish, et avaldada oma pistikprogramm npm-is.

Enne avaldamist veenduge, et teie pistikprogramm on hästi dokumenteeritud ja sisaldab README faili selgete juhistega selle installimise ja kasutamise kohta.

Täiustatud pistikprogrammi arendustehnikad

Kui tunnete end Babeli pistikprogrammi arendusega mugavamalt, saate uurida täiustatumaid tehnikaid, näiteks:

• Pistikprogrammi valikud: lubage kasutajatel konfigureerida oma pistikprogrammi, kasutades Babeli konfiguratsioonis edastatud valikuid.
• Skoobi analüüs: analüüsige muutujate ulatust, et vältida soovimatuid kõrvaltoimeid.
• Koodi genereerimine: genereerige koodi dünaamiliselt, lähtudes sisendkoodist.
• Lähtekaardid: genereerige silumiskogemuse parandamiseks lähtekaarte.
• Jõudluse optimeerimine: optimeerige oma pistikprogrammi jõudluse tagamiseks, et minimeerida kompileerimisajale avalduvat mõju.

Globaalsed kaalutlused pistikprogrammi arendamisel

Babeli pistikprogrammide arendamisel ülemaailmsele publikule on oluline arvesse võtta järgmist:

• Rahvusvahelistamine (i18n): veenduge, et teie pistikprogramm toetab erinevaid keeli ja tähemärgistikke. See on eriti oluline pistikprogrammide puhul, mis manipuleerivad stringiliteraalide või kommentaaridega. Näiteks kui teie pistikprogramm tugineb regulaaravaldistele, veenduge, et need regulaaravaldised saaksid Unicode'i märke õigesti käsitleda.
• Lokaliseerimine (l10n): kohandage oma pistikprogramm erinevate piirkondlike seadete ja kultuurikonventsioonidega.
• Ajavööndid: olge kuupäeva ja kellaaja väärtustega tegelemisel teadlik ajavöönditest. JavaScripti sisseehitatud Date objektiga võib erinevates ajavööndites olla keeruline töötada, seega kaaluge usaldusväärsema ajavööndite käsitlemise jaoks teegi Moment.js või date-fns kasutamist.
• Valuutad: käsitlege erinevaid valuutasid ja numbrivorme asjakohaselt.
• Andmevormingud: olge teadlik erinevatest andmevormingutest, mida erinevates piirkondades kasutatakse. Näiteks kuupäevavormingud on kogu maailmas oluliselt erinevad.
• Juurdepääsetavus: veenduge, et teie pistikprogramm ei tekitaks juurdepääsetavuse probleeme.
• Litsentsimine: valige oma pistikprogrammi jaoks sobiv litsents, mis võimaldab teistel seda kasutada ja sellesse panustada. Populaarsed avatud lähtekoodiga litsentsid on MIT, Apache 2.0 ja GPL.

Näiteks, kui arendate pistikprogrammi kuupäevade vormindamiseks vastavalt lokaadile, peaksite kasutama JavaScripti Intl.DateTimeFormat API-t, mis on mõeldud just selleks otstarbeks. Kaaluge järgmist koodilõiku:

            const { types: t } = babel;

module.exports = function(babel) {
  return {
    name: "format-date",
    visitor: {
      CallExpression(path) {
        if (t.isIdentifier(path.node.callee, { name: 'formatDate' })) {
          // Eeldades, et kasutatakse formatDate(date, locale)
          const dateNode = path.node.arguments[0];
          const localeNode = path.node.arguments[1];

          // Genereeri AST:
          // new Intl.DateTimeFormat(locale).format(date)
          const newExpression = t.newExpression(
            t.memberExpression(
              t.identifier("Intl"),
              t.identifier("DateTimeFormat")
            ),
            [localeNode]
          );

          const formatCall = t.callExpression(
            t.memberExpression(
              newExpression,
              t.identifier("format")
            ),
            [dateNode]
          );

          path.replaceWith(formatCall);
        }
      }
    }
  };
};
            

              
                Copy
              
            
          

See pistikprogramm asendab väljakutsed hüpoteetilisele funktsioonile formatDate(date, locale) vastava Intl.DateTimeFormat API väljakutsega, tagades lokaadispetsiifilise kuupäeva vormindamise.

Järeldus

Babeli pistikprogrammide arendamine on võimas viis laiendada JavaScripti võimalusi ja automatiseerida koodi transformatsioone. Mõistes AST-d, Babeli pistikprogrammi arhitektuuri ja saadaolevaid API-sid, saate luua kohandatud pistikprogramme, et lahendada mitmesuguseid probleeme. Pidage meeles, et peate oma pistikprogramme põhjalikult testima ja võtma arvesse globaalseid kaalutlusi, kui arendate mitmekesisele publikule. Harjutamise ja katsetamisega saate saada vilunud Babeli pistikprogrammi arendajaks ja panustada JavaScripti ökosüsteemi arengusse.