Nis.06

Hızlandırılmış EcmaScript 6+ Dersleri – 13: Babel


Makale serimiz boyunca işlemiş olduğumuz EcmaScript 6 kodlarımızı tarayıcılarımızda (en azından benim tarayıcımda) sorunsuzca kullandık. Ancak bölüm başında da belirttiğim gibi bazı kullanıcılar hala eski sürüm tarayıcılar kullanıyor olabilir ve bu da EcmaScript 6 standartlarının desteklenememesine sebep olabilir. İşimizi garantiye almak adına Babel isimli bir JavaScript derleyicisidir. ES2015+ üzeri kod standartlarını eski JavaScript motorlar ı tarafından çalıştırılmasını sağlar.

Projelerimizde en üst seviyede babel.js’i eklersek, diğer script dosyalarındaki kodlar eski sürüme istemci tarafında dönüştürülmüş olacaktır.

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel" src="index.js"></script>
</head>
<body>
</body>
</html>

Yukarıda, harici link olarak babel.min.js’i ekledik. Eklenecek olan diğer script dosyalarının da type’ını text/babel olarak belirttik.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel" src="index.js"></script>
</head>
<body>
</body>
</html>

index.js

const selamla = () => "Merhaba Dünya";
document.write( selamla() );

JavaScript dosyamız oldukça basit. Arrow fonksiyonu kullanarak (ES6’ya ait bir özellik) bir mesajı sayfamız üzerinde document.write ile yazdırdık.

Bu örneği doğrudan tarayıcıda çalıştırırsanız hata verecektir.

babel.min.js:1 You are using the in-browser Babel transformer. Be sure to precompile your scripts for production – https://babeljs.io/docs/setup/
(anonymous) @ babel.min.js:1
Vn @ babel.min.js:1
index.html:1 Access to XMLHttpRequest at ‘file:///C:/Users/UGUR/Desktop/ES6/Class/babel/index.js’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Lokalde direkt olarak çalıştırıldığında babel.js yüklenemez, çalıştırılamaz. Bu nedenle Apache üzerinden sanki web sitesi yayındaymış gibi yayınlayacağım (Detayları ileriki bölümlerde PHP’yi işlerken göreceksiniz).

Babel işini yaptında, web sayfamızın kodlarına baktığımızda değişmiş olduğunu göreceğiz. Çünkü babel gerekli çevirileri yapıp tarayıcının anlayacağı en ilkel hale getirmiştir.

<html>
  <head>
 </head>
  <body>Merhaba Dünya</body>
</html>

EcmaScript 6 makale serimiz sona erdi. Diğer konulara bakmak için aşağıdaki listeye bakabilirsiniz.


Web Tasarımı ve Web Programlama 2020

Yorum bırak

Yorum