Cipta Bahasa Anda Sendiri: Bina Transpiler JavaScript dari Scratch

Mari kita terokai dunia pembinaan pengkompil yang menarik dalam JavaScript dengan membina transpiler bahasa tersuai. Perjalanan ini akan membawa kita melalui konsep teras dan pelaksanaan praktikal, memberikan kita alat untuk mencipta bahasa pengaturcaraan kita sendiri.

Pertama, kita perlu memahami apa itu transpiler. Ia adalah sejenis pengkompil yang menterjemahkan kod sumber daripada satu bahasa pengaturcaraan ke bahasa lain. Dalam kes kami, kami akan menterjemahkan bahasa tersuai kami ke dalam JavaScript.

Proses membina transpiler melibatkan beberapa langkah utama: analisis leksikal, penghuraian dan penjanaan kod. Mari kita mulakan dengan analisis leksikal.

Analisis leksikal, atau tokenisasi, ialah proses memecahkan kod sumber input kepada satu siri token. Setiap token mewakili unit yang bermakna dalam bahasa kita, seperti kata kunci, pengecam atau pengendali. Berikut ialah pelaksanaan lexer yang mudah:

function lexer(input) {
  const tokens = [];
  let current = 0;

  while (current < input.length) {
    let char = input[current];

    if (char === '(') {
      tokens.push({ type: 'paren', value: '(' });
      current++;
      continue;
    }

    if (char === ')') {
      tokens.push({ type: 'paren', value: ')' });
      current++;
      continue;
    }

    if (/\s/.test(char)) {
      current++;
      continue;
    }

    if (/[0-9]/.test(char)) {
      let value = '';
      while (/[0-9]/.test(char)) {
        value += char;
        char = input[++current];
      }
      tokens.push({ type: 'number', value });
      continue;
    }

    if (/[a-z]/i.test(char)) {
      let value = '';
      while (/[a-z]/i.test(char)) {
        value += char;
        char = input[++current];
      }
      tokens.push({ type: 'name', value });
      continue;
    }

    throw new TypeError('Unknown character: ' + char);
  }

  return tokens;
}

Lexer ini mengenali tanda kurungan, nombor dan nama (pengecam). Ia merupakan pelaksanaan asas, tetapi ia memberi kita titik permulaan yang baik.

Seterusnya, kita beralih ke penghuraian. Penghurai mengambil aliran token yang dihasilkan oleh lexer dan membina Pokok Sintaks Abstrak (AST). AST mewakili struktur program kami dengan cara yang mudah digunakan oleh pengkompil. Berikut ialah penghurai mudah:

function parser(tokens) {
  let current = 0;

  function walk() {
    let token = tokens[current];

    if (token.type === 'number') {
      current++;
      return {
        type: 'NumberLiteral',
        value: token.value,
      };
    }

    if (token.type === 'paren' && token.value === '(') {
      token = tokens[++current];

      let node = {
        type: 'CallExpression',
        name: token.value,
        params: [],
      };

      token = tokens[++current];

      while (
        (token.type !== 'paren') ||
        (token.type === 'paren' && token.value !== ')')
      ) {
        node.params.push(walk());
        token = tokens[current];
      }

      current++;

      return node;
    }

    throw new TypeError(token.type);
  }

  let ast = {
    type: 'Program',
    body: [],
  };

  while (current < tokens.length) {
    ast.body.push(walk());
  }

  return ast;
}

Penghurai ini mencipta AST untuk bahasa mudah dengan panggilan fungsi dan literal nombor. Ia adalah asas yang baik yang boleh kita bina untuk bahasa yang lebih kompleks.

Dengan AST kami di tangan, kami boleh beralih kepada penjanaan kod. Di sinilah kami menterjemahkan AST kami ke dalam kod JavaScript yang sah. Berikut ialah penjana kod asas:

function codeGenerator(node) {
  switch (node.type) {
    case 'Program':
      return node.body.map(codeGenerator).join('\n');

    case 'ExpressionStatement':
      return codeGenerator(node.expression) + ';';

    case 'CallExpression':
      return (
        codeGenerator(node.callee) +
        '(' +
        node.arguments.map(codeGenerator).join(', ') +
        ')'
      );

    case 'Identifier':
      return node.name;

    case 'NumberLiteral':
      return node.value;

    case 'StringLiteral':
      return '"' + node.value + '"';

    default:
      throw new TypeError(node.type);
  }
}

Penjana kod ini mengambil AST kami dan menghasilkan kod JavaScript. Ia adalah versi ringkas, tetapi ia menunjukkan prinsip asas.

Sekarang kami mempunyai komponen teras ini, kami boleh mula memikirkan tentang ciri yang lebih maju. Semakan jenis, sebagai contoh, adalah penting untuk banyak bahasa pengaturcaraan. Kami boleh melaksanakan penyemak jenis asas dengan melintasi AST kami dan mengesahkan bahawa operasi dilakukan pada jenis yang serasi.

Pengoptimuman ialah satu lagi aspek penting dalam reka bentuk pengkompil. Kami boleh melaksanakan pengoptimuman mudah seperti lipatan berterusan (menilai ungkapan malar pada masa penyusunan) atau penghapusan kod mati (mengalih keluar kod yang tidak mempunyai kesan pada output program).

Pengendalian ralat adalah penting untuk mencipta bahasa yang mesra pengguna. Kami harus memberikan mesej ralat yang jelas dan berguna apabila pengkompil menghadapi masalah. Ini mungkin melibatkan pengesanan nombor baris dan lajur semasa lexing dan parsing, dan memasukkan maklumat ini dalam mesej ralat kami.

Mari kita lihat bagaimana kita boleh melaksanakan struktur kawalan tersuai yang mudah. Katakan kami mahu menambah pernyataan 'ulang' pada bahasa kami yang mengulangi blok kod beberapa kali tertentu:

function lexer(input) {
  const tokens = [];
  let current = 0;

  while (current < input.length) {
    let char = input[current];

    if (char === '(') {
      tokens.push({ type: 'paren', value: '(' });
      current++;
      continue;
    }

    if (char === ')') {
      tokens.push({ type: 'paren', value: ')' });
      current++;
      continue;
    }

    if (/\s/.test(char)) {
      current++;
      continue;
    }

    if (/[0-9]/.test(char)) {
      let value = '';
      while (/[0-9]/.test(char)) {
        value += char;
        char = input[++current];
      }
      tokens.push({ type: 'number', value });
      continue;
    }

    if (/[a-z]/i.test(char)) {
      let value = '';
      while (/[a-z]/i.test(char)) {
        value += char;
        char = input[++current];
      }
      tokens.push({ type: 'name', value });
      continue;
    }

    throw new TypeError('Unknown character: ' + char);
  }

  return tokens;
}

Ini menunjukkan cara kami boleh melanjutkan bahasa kami dengan binaan tersuai yang diterjemahkan ke dalam JavaScript standard.

Pemetaan sumber merupakan satu lagi pertimbangan penting. Ia membolehkan kami memetakan JavaScript yang dijana kembali kepada kod sumber asal kami, yang penting untuk penyahpepijatan. Kami boleh melaksanakan ini dengan menjejaki kedudukan sumber asal semasa kami menjana kod, dan mengeluarkan peta sumber bersama JavaScript kami yang dijana.

Menyepadukan transpiler kami ke dalam proses binaan boleh meningkatkan pengalaman pembangun. Kami boleh mencipta pemalam untuk alat binaan popular seperti Webpack atau Rollup, membenarkan pembangun menggunakan bahasa kami dengan lancar dalam projek mereka.

Semasa kami mengembangkan bahasa kami, kami berkemungkinan ingin menambahkan lebih banyak ciri lanjutan. Kami mungkin melaksanakan sistem modul, menambah sokongan untuk pengaturcaraan berorientasikan objek atau mencipta pustaka standard fungsi terbina dalam.

Sepanjang proses ini, adalah penting untuk mengingati prestasi. Prestasi pengkompil boleh memberi kesan yang besar terhadap produktiviti pembangun, terutamanya untuk projek besar. Kita harus memprofilkan pengkompil kita dan mengoptimumkan bahagian yang paling memakan masa.

Membina transpiler ialah proses yang kompleks tetapi bermanfaat. Ia memberi kami pemahaman yang mendalam tentang cara bahasa pengaturcaraan berfungsi di bawah hud, dan membolehkan kami membentuk cara kami menyatakan idea dalam kod. Sama ada kami mencipta bahasa khusus domain untuk domain masalah tertentu atau bereksperimen dengan ciri bahasa baharu, kemahiran yang kami pelajari di sini membuka dunia yang penuh kemungkinan.

Ingat, cara terbaik untuk belajar ialah dengan melakukan. Mulakan secara kecil-kecilan, mungkin dengan bahasa kalkulator yang mudah, dan tambahkan lebih banyak ciri secara beransur-ansur apabila anda menjadi lebih selesa dengan konsep tersebut. Jangan takut untuk mencuba dan membuat kesilapan – begitulah cara kami belajar dan berkembang sebagai pembangun.

Kesimpulannya, pembinaan pengkompil dalam JavaScript ialah alat berkuasa yang membolehkan kami mencipta bahasa tersuai yang disesuaikan dengan keperluan kami. Dengan memahami prinsip analisis leksikal, penghuraian dan penjanaan kod, kami boleh membina transpiler yang membuka cara baharu untuk berfikir dan menyelesaikan masalah dalam kod. Jadi teruskan dan buat – satu-satunya had ialah imaginasi anda!

---

Ciptaan Kami

Pastikan anda melihat ciptaan kami:

Pusat Pelabur | Hidup Pintar | Epos & Gema | Misteri Membingungkan | Hindutva | Pembangunan Elit | Sekolah JS

---

Kami berada di Medium

Tech Koala Insights | Dunia Epok & Gema | Medium Pusat Pelabur | Medium Misteri Membingungkan | Sains & Zaman Sederhana | Hindutva Moden

Atas ialah kandungan terperinci Cipta Bahasa Anda Sendiri: Bina Transpiler JavaScript dari Scratch. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!