JavaScript kodining transformatsiyasi: Babel plaginini yaratish bo'yicha qo'llanma

JavaScript tili doimiy ravishda rivojlanib boradi. Yangi xususiyatlar taklif qilinadi, standartlashtiriladi va oxir-oqibat brauzerlar va Node.js'da joriy qilinadi. Biroq, bu xususiyatlarni eski muhitlarda qo'llab-quvvatlash yoki maxsus kod o'zgartirishlarini qo'llash JavaScript kodini boshqara oladigan vositalarni talab qiladi. Aynan shu yerda Babel o'zini ko'rsatadi va o'zingizning Babel plaginlaringizni yozishni bilish cheksiz imkoniyatlar dunyosini ochadi.

Babel nima?

Babel — bu JavaScript kompilyatori bo'lib, dasturchilarga bugungi kunda yangi avlod JavaScript sintaksisi va xususiyatlaridan foydalanish imkonini beradi. U zamonaviy JavaScript kodini eski brauzerlar va muhitlarda ishlay oladigan orqaga mos keluvchi versiyaga aylantiradi. Aslida, Babel JavaScript kodini Abstrakt Sintaksis Daraxtiga (AST) ajratadi, sozlangan transformatsiyalarga asoslanib ASTni o'zgartiradi va keyin o'zgartirilgan JavaScript kodini yaratadi.

Nima uchun Babel plaginlarini yozish kerak?

Babel oldindan belgilangan transformatsiyalar to'plami bilan ta'minlangan bo'lsa-da, maxsus transformatsiyalar zarur bo'lgan holatlar mavjud. O'zingizning Babel plaginingizni yozishni xohlashingizning bir necha sabablari:

• Maxsus sintaksis: Loyihangiz yoki sohangizga xos bo'lgan maxsus sintaksis kengaytmalarini qo'llab-quvvatlashni joriy qiling.
• Kodni optimallashtirish: Babelning o'rnatilgan imkoniyatlaridan tashqarida kod optimallashtirishlarini avtomatlashtiring.
• Linting va kod uslubini ta'minlash: Maxsus kod uslubi qoidalarini majburiy qiling yoki kompilyatsiya jarayonida yuzaga kelishi mumkin bo'lgan muammolarni aniqlang.
• Xalqarolashtirish (i18n) va Mahalliylashtirish (l10n): Kodingizdan tarjima qilinadigan satrlarni ajratib olish jarayonini avtomatlashtiring. Masalan, foydalanuvchiga ko'rinadigan matnni foydalanuvchi lokaliga qarab tarjimalarni qidirish uchun ishlatiladigan kalitlarga avtomatik ravishda almashtiradigan plagin yaratishingiz mumkin.
• Freyvorkka xos transformatsiyalar: React, Vue.js yoki Angular kabi ma'lum bir freyvorkka moslashtirilgan transformatsiyalarni qo'llang.
• Xavfsizlik: Maxsus xavfsizlik tekshiruvlari yoki obfuskatsiya usullarini joriy qiling.
• Kod yaratish: Muayyan naqshlar yoki konfiguratsiyalarga asoslanib kod yarating.

Abstrakt Sintaksis Daraxtini (AST) tushunish

AST — bu sizning JavaScript kodingiz strukturasining daraxtsimon tasviridir. Daraxtdagi har bir tugun o'zgaruvchini e'lon qilish, funksiyani chaqirish yoki ifoda kabi koddagi konstruksiyani ifodalaydi. ASTni tushunish Babel plaginlarini yozish uchun juda muhim, chunki siz kod o'zgartirishlarini amalga oshirish uchun ushbu daraxt bo'ylab harakatlanasiz va uni o'zgartirasiz.

AST Explorer kabi vositalar ma'lum bir kod qismining ASTsini vizualizatsiya qilish uchun bebaho hisoblanadi. Siz AST Explorer-dan turli kod o'zgartirishlari bilan tajriba o'tkazish va ularning ASTga qanday ta'sir qilishini ko'rish uchun foydalanishingiz mumkin.

Quyida JavaScript kodi AST sifatida qanday ifodalanishiga oid oddiy misol keltirilgan:

JavaScript kodi:

            const x = 1 + 2;
            

              
                Copy
              
            
          

Soddalashtirilgan AST ko'rinishi:

            {
  "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
              
            
          

Ko'rib turganingizdek, AST kodni uning tarkibiy qismlariga ajratadi, bu esa uni tahlil qilish va o'zgartirishni osonlashtiradi.

Babel plaginini yaratish muhitini sozlash

Plaginingizni yozishni boshlashdan oldin, siz rivojlanish muhitingizni sozlashingiz kerak. Quyida asosiy sozlash keltirilgan:

1. Node.js va npm (yoki yarn): Node.js va npm (yoki yarn) o'rnatilganligiga ishonch hosil qiling.
2. Loyiha katalogini yaratish: Plaginingiz uchun yangi katalog yarating.
3. npm-ni ishga tushirish: Loyiha katalogingizda npm init -y buyrug'ini ishga tushirib, package.json faylini yarating.
4. Bog'liqliklarni o'rnatish: Kerakli Babel bog'liqliklarini o'rnating:

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

   • @babel/core: Asosiy Babel kutubxonasi.
   • @babel/types: AST tugunlarini yaratish va tekshirish uchun yordamchi kutubxona.
   • @babel/template: Shablon satrlaridan AST tugunlarini yaratish uchun yordamchi kutubxona.

Babel plaginining anatomiyasi

Babel plaginining mohiyati — bu visitor xususiyatiga ega ob'ektni qaytaradigan JavaScript funksiyasidir. visitor xususiyati — bu Babel AST bo'ylab harakatlanayotganda ma'lum AST tugun turlariga duch kelganda bajariladigan funksiyalarni belgilaydigan ob'ekt.

Quyida Babel plaginining asosiy tuzilmasi keltirilgan:

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

  return {
    name: "my-custom-plugin",
    visitor: {
      Identifier(path) {
        // Identifier tugunlarini o'zgartirish uchun kod
      }
    }
  };
};
            

              
                Copy
              
            
          

Asosiy tarkibiy qismlarni ko'rib chiqamiz:

• module.exports: Plagin modul sifatida eksport qilinadi, bu Babelga uni yuklash imkonini beradi.
• babel: Babelning API'sini o'z ichiga olgan ob'ekt, jumladan types (t taxallusi bilan) ob'ekti, bu AST tugunlarini yaratish va tekshirish uchun yordamchi dasturlarni taqdim etadi.
• name: Plaginingizni aniqlaydigan satr. Qat'iy talab qilinmasa ham, tavsiflovchi nom qo'shish yaxshi amaliyotdir.
• visitor: AST tugun turlarini AST bo'ylab harakatlanish paytida ushbu tugun turlariga duch kelganda bajariladigan funksiyalarga bog'laydigan ob'ekt.
• Identifier(path): ASTdagi har bir Identifier tuguni uchun chaqiriladigan tashrifchi (visitor) funksiyasi. path ob'ekti tugunga va uning ASTdagi atrofdagi kontekstiga kirish imkonini beradi.

path ob'ekti bilan ishlash

path ob'ekti ASTni boshqarishning kalitidir. U AST tugunlariga kirish, ularni o'zgartirish va almashtirish usullarini taqdim etadi. Quyida eng ko'p ishlatiladigan path usullaridan ba'zilari keltirilgan:

• path.node: AST tugunining o'zi.
• path.parent: Joriy tugunning ota tuguni.
• path.parentPath: Ota tugun uchun path ob'ekti.
• path.scope: Joriy tugun uchun scope ob'ekti. Bu o'zgaruvchi havolalarini hal qilish uchun foydalidir.
• path.replaceWith(newNode): Joriy tugunni yangi tugun bilan almashtiradi.
• path.replaceWithMultiple(newNodes): Joriy tugunni bir nechta yangi tugunlar bilan almashtiradi.
• path.insertBefore(newNode): Joriy tugundan oldin yangi tugun qo'shadi.
• path.insertAfter(newNode): Joriy tugundan keyin yangi tugun qo'shadi.
• path.remove(): Joriy tugunni olib tashlaydi.
• path.skip(): Joriy tugunning bola tugunlarini aylanib o'tishni o'tkazib yuboradi.
• path.traverse(visitor): Joriy tugunning bola tugunlarini yangi tashrifchi yordamida aylanib o'tadi.
• path.findParent(callback): Berilgan qayta chaqiruv funksiyasini qanoatlantiradigan birinchi ota tugunni topadi.

@babel/types yordamida AST tugunlarini yaratish va tekshirish

@babel/types kutubxonasi AST tugunlarini yaratish va tekshirish uchun bir qator funksiyalarni taqdim etadi. Bu funksiyalar ASTni tur xavfsizligi bilan boshqarish uchun juda muhimdir.

Quyida @babel/types dan foydalanishga oid ba'zi misollar keltirilgan:

            const { types: t } = babel;

// Identifier tugunini yaratish
const identifier = t.identifier("myVariable");

// NumericLiteral tugunini yaratish
const numericLiteral = t.numericLiteral(42);

// BinaryExpression tugunini yaratish
const binaryExpression = t.binaryExpression("+", t.identifier("x"), t.numericLiteral(1));

// Tugunning Identifier ekanligini tekshirish
if (t.isIdentifier(identifier)) {
  console.log("Tugun Identifier");
}

            

              
                Copy
              
            
          

@babel/types turli xil AST tugun turlarini yaratish va tekshirish uchun keng ko'lamli funksiyalarni taqdim etadi. To'liq ro'yxat uchun Babel Types hujjatlariga murojaat qiling.

@babel/template yordamida shablon satrlaridan AST tugunlarini yaratish

@babel/template kutubxonasi shablon satrlaridan AST tugunlarini yaratishga imkon beradi, bu esa murakkab AST tuzilmalarini yaratishni osonlashtiradi. Bu, ayniqsa, bir nechta AST tugunlarini o'z ichiga olgan kod qismlarini yaratish kerak bo'lganda foydalidir.

Quyida @babel/template dan foydalanishga oid misol keltirilgan:

            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 endi var myModule = require("my-module"); uchun ASTni o'z ichiga oladi.

            

              
                Copy
              
            
          

template funksiyasi shablon satrini tahlil qiladi va o'rinbosarlarni taqdim etilgan qiymatlar bilan almashtirish orqali AST tugunlarini yaratish uchun ishlatilishi mumkin bo'lgan funksiyani qaytaradi.

Misol plagin: Identifikatorlarni almashtirish

Keling, x identifikatorining barcha namunalarini y identifikatori bilan almashtiradigan oddiy Babel plaginini yaratamiz.

            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
              
            
          

Ushbu plagin ASTdagi barcha Identifier tugunlarini aylanib chiqadi. Agar identifikatorning name xususiyati x bo'lsa, uni y bilan almashtiradi.

Misol plagin: Console Log bayonotini qo'shish

Quyida har bir funksiya tanasining boshiga console.log bayonotini qo'shadigan murakkabroq misol keltirilgan.

            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
              
            
          

Ushbu plagin FunctionDeclaration tugunlariga tashrif buyuradi. Har bir funksiya uchun u funksiya nomini log qiladigan console.log bayonotini yaratadi. Keyin u bu bayonotni path.get("body").unshiftContainer("body", consoleLogStatement) yordamida funksiya tanasining boshiga qo'shadi.

Babel plaginingizni sinovdan o'tkazish

Babel plaginingizni kutilganidek ishlashini va kutilmagan xatti-harakatlarni keltirib chiqarmasligini ta'minlash uchun uni sinchkovlik bilan sinovdan o'tkazish juda muhimdir. Plaginingizni qanday sinovdan o'tkazishingiz mumkin:

1. Sinov faylini yaratish: Plaginingiz yordamida o'zgartirmoqchi bo'lgan kod bilan JavaScript faylini yarating.
2. @babel/cli ni o'rnatish: Babel buyruq qatori interfeysini o'rnating:

               npm install @babel/cli
               
   
                 
                   Copy
                 
               
             

3. Babelni sozlash: Loyiha katalogingizda Babelni plaginingizdan foydalanishga sozlash uchun .babelrc yoki babel.config.js faylini yarating.

   .babelrc misoli:

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

4. Babelni ishga tushirish: Sinov faylingizni o'zgartirish uchun buyruq qatoridan Babelni ishga tushiring:

               npx babel test.js -o output.js
               
   
                 
                   Copy
                 
               
             

5. Natijani tekshirish: Kod to'g'ri o'zgartirilganligiga ishonch hosil qilish uchun output.js faylini tekshiring.

Yanada kengroq sinov uchun, siz Jest yoki Mocha kabi sinov freymvorklaridan babel-jest yoki @babel/register kabi Babel integratsiya kutubxonalari bilan birga foydalanishingiz mumkin.

Babel plaginingizni nashr etish

Agar siz Babel plaginingizni dunyo bilan baham ko'rmoqchi bo'lsangiz, uni npm-ga nashr etishingiz mumkin. Buni qanday qilish kerak:

1. npm akkauntini yaratish: Agar hali yo'q bo'lsa, npm-da akkaunt yarating.
2. package.json ni yangilash: package.json faylingizni paket nomi, versiyasi, tavsifi va kalit so'zlar kabi zarur ma'lumotlar bilan yangilang.
3. npm-ga kirish: Terminalingizda npm login buyrug'ini ishga tushiring va npm hisob ma'lumotlaringizni kiriting.
4. Plaginingizni nashr etish: Plaginingizni npm-ga nashr etish uchun loyiha katalogingizda npm publish buyrug'ini ishga tushiring.

Nashr qilishdan oldin, plaginingiz yaxshi hujjatlashtirilganligiga va uni qanday o'rnatish va ishlatish bo'yicha aniq ko'rsatmalarga ega README faylini o'z ichiga olganligiga ishonch hosil qiling.

Plagin yaratishning ilg'or usullari

Babel plaginlarini yaratishda tajribangiz oshgani sari, siz quyidagi kabi ilg'or usullarni o'rganishingiz mumkin:

• Plagin parametrlari: Foydalanuvchilarga Babel konfiguratsiyasida uzatilgan parametrlar yordamida plaginingizni sozlash imkonini bering.
• Scope tahlili: Kutilmagan nojo'ya ta'sirlarni oldini olish uchun o'zgaruvchilarning ko'rinish doirasini (scope) tahlil qiling.
• Kod yaratish: Kiruvchi kodga asoslanib dinamik ravishda kod yarating.
• Manba xaritalari (Source Maps): Tuzatish (debugging) tajribasini yaxshilash uchun manba xaritalarini yarating.
• Ishlash samaradorligini optimallashtirish: Kompilyatsiya vaqtiga ta'sirini kamaytirish uchun plaginingizni ishlash samaradorligi uchun optimallashtiring.

Plagin yaratishda global mulohazalar

Global auditoriya uchun Babel plaginlarini ishlab chiqishda quyidagilarni hisobga olish muhim:

• Xalqarolashtirish (i18n): Plaginingiz turli tillar va belgilar to'plamlarini qo'llab-quvvatlashiga ishonch hosil qiling. Bu, ayniqsa, satrli literallar yoki sharhlarni o'zgartiradigan plaginlar uchun dolzarbdir. Masalan, agar plaginingiz muntazam ifodalarga (regular expressions) tayanadigan bo'lsa, ushbu muntazam ifodalar Unicode belgilarini to'g'ri ishlata olishiga ishonch hosil qiling.
• Mahalliylashtirish (l10n): Plaginingizni turli mintaqaviy sozlamalar va madaniy an'analarga moslashtiring.
• Vaqt zonalari: Sana va vaqt qiymatlari bilan ishlashda vaqt zonalariga e'tibor bering. JavaScript-ning o'rnatilgan Date ob'ekti turli vaqt zonalari bo'ylab ishlash uchun murakkab bo'lishi mumkin, shuning uchun vaqt zonalarini yanada ishonchli boshqarish uchun Moment.js yoki date-fns kabi kutubxonalardan foydalanishni o'ylab ko'ring.
• Valyutalar: Turli valyutalar va raqam formatlarini to'g'ri ishlating.
• Ma'lumotlar formatlari: Turli mintaqalarda ishlatiladigan turli ma'lumotlar formatlaridan xabardor bo'ling. Masalan, sana formatlari dunyo bo'ylab sezilarli darajada farq qiladi.
• Foydalanish imkoniyati (Accessibility): Plaginingiz hech qanday foydalanish imkoniyati muammolarini keltirib chiqarmasligiga ishonch hosil qiling.
• Litsenziyalash: Plaginingiz uchun boshqalarga undan foydalanish va hissa qo'shish imkonini beradigan mos litsenziyani tanlang. Ommabop ochiq manbali litsenziyalarga MIT, Apache 2.0 va GPL kiradi.

Masalan, agar siz sanalarni lokalga muvofiq formatlash uchun plagin ishlab chiqayotgan bo'lsangiz, aynan shu maqsadda yaratilgan JavaScript-ning Intl.DateTimeFormat API'sidan foydalanishingiz kerak. Quyidagi kod qismini ko'rib chiqing:

            const { types: t } = babel;

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

          // Quyidagi uchun AST yaratish:
          // 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
              
            
          

Ushbu plagin taxminiy formatDate(date, locale) funksiyasiga qilingan chaqiruvlarni tegishli Intl.DateTimeFormat API chaqiruvi bilan almashtiradi va lokalga xos sana formatlashini ta'minlaydi.

Xulosa

Babel plaginlarini yaratish — bu JavaScript imkoniyatlarini kengaytirish va kod o'zgartirishlarini avtomatlashtirishning kuchli usulidir. AST, Babel plagin arxitekturasi va mavjud API'larni tushunib, siz keng ko'lamli muammolarni hal qilish uchun maxsus plaginlar yaratishingiz mumkin. Plaginlaringizni sinchkovlik bilan sinovdan o'tkazishni va turli auditoriyalar uchun ishlab chiqishda global mulohazalarni hisobga olishni unutmang. Amaliyot va tajriba bilan siz malakali Babel plagin ishlab chiqaruvchisiga aylanishingiz va JavaScript ekotizimining rivojlanishiga hissa qo'shishingiz mumkin.