Nodejs Babel Kurulumu

Babel, es6 kodlama formatını tarayıcılarda kullanabilmemizi sağlar

İçerikler

Gerekli paketlerin kurulumu
Babel Yapılandırması
- Babel Derleyici Yapılandırmasını Oluşturma
- Babel Derleme Araçlarını Yapılandırma
Package.json Yapılandırma
- Packege.json Oluşturma
- Package.json Scriptlerini Oluşturma
  - Build Script Yapısı
Programı Derleme İşlemi
Yazar

Gerekli paketlerin kurulumu

Global olarak babel consol komutlarını ve işleyicisini ekler.

npm install -g babel-cli
npm install babel-register babel-preset-env --save-dev

babel-cli Konsoldan "babel" ile başlayan komutlara izin verir
- Global olarak kurulması gerekmekte
babel-register NPM üzerinden require ile babel modüllerine erişimi sağlar
babel-preset-env ES5'i derlemek için kullanılır

Babel Yapılandırması

Bu adım ve sonrasındaki işlemler projenin (index.js) dizininde yapılmalıdır

Babel Derleyici Yapılandırmasını Oluşturma

Babelrc dosyası belli ayarlarla oluşturma

@echo {"presets":[["env",{"targets":{"edge":"17","firefox":"60","chrome":"67","safari":"11.1","node":"current"}}]]} > .babelrc

targets isteğe bağlıdır. Hedeflenen tarayıcıları gösterir.

Babel Derleme Araçlarını Yapılandırma

Tools dizini oluşturup, içindeki dosyaya derleme parametrelerini yazıyoruz.

mkdir tools & @echo require("babel-register") > tools/dev && @echo require("./../index.js") >> tools/dev

Not: Bu kısımdaki "tools/dev" ile diğer adımdaki işlemler yapılmaktadır.

Package.json Yapılandırma

Packege.json Oluşturma

npm init

Bu işlem oluşturulması istenen dizinde yapılmalıdır.

Package.json Scriptlerini Oluşturma

package.json dosyası içerisindeki script kısmında alttakiler eklenir.

"scripts": {
    "test": "node test",
    "start": "node dist/index.js",
    "dev": "node tools/dev",
    "build": "mkdir dist & babel *.js lib/*.js -s -d dist & xcopy public dist\\public /s /i /e /y",
    "build:db": "mkdir dist & babel *.js lib/*.js -s -d dist & xcopy public dist\\public /s /i /e /y & xcopy database dist\\database /s /i /e /y",
    "build:start": "npm run build & npm run start",
    "clean": "xcopy dist\\database database /s /i /e /y & rd /s /q dist",
    "clean:all": "rd /s /q dist",
    "rebuild": "npm run clean & npm run build",
    "rebuild:db": "npm run clean & npm run build:db"
}

Build Script Yapısı

mkdir dist Dist adlı klasör oluşturulur
babel [her bir js dosyasının yolu] -s -d dist Javasciprt dosyaları es5 tipinde düzenlenip dist içine atılır
xcopy [klasör] dist\\[klasör] /s /i /e /y Dinamik veri tutan klasörler varsa dist içine kopyalanır

Programı Derleme İşlemi

Package.json dosyasındaki scriptleri çalıştırma

npm run-script [script]

[script] scripts içindeki isimler; start, dev, build

Yazar

Yunus Emre

yedehrab / Node.js-Babel-Setup