Eski Tarayıcılarda ES6+

Mithril.js ES5'te yazılmıştır, ancak ES6 ve sonraki sürümleriyle de tamamen uyumludur. Tüm modern tarayıcılar, yerel modül sözdizimi de dahil olmak üzere bunu yerel olarak destekler. (Node'un sihirli modül çözümlemesini desteklemezler, bu nedenle import * as _ from "lodash-es" veya benzerini kullanamazsınız. Yalnızca göreli ve URL tabanlı yolları desteklerler.) Bu nedenle, kapanış bileşenleriniz için ok işlevlerini ve sınıf tabanlı bileşenleriniz için sınıfları kullanmaktan çekinmeyin.

Ancak, birçoğumuz gibi, hala Internet Explorer gibi eski tarayıcıları desteklemeniz gerekiyorsa, ES6+ kodunu ES5'e dönüştürmeniz gerekecektir. Bu sayfa, modern ES6+ kodunun eski tarayıcılarda çalışmasını sağlamak için Babel kullanımını ele almaktadır.

Kurulum

İlk olarak, henüz yapmadıysanız, Node'in kurulu olduğundan emin olun. Node, önceden paketlenmiş npm ile birlikte gelir ve bu da yakında ihtiyacımız olacak bir araçtır.

İndirdikten sonra, bir terminal açın ve aşağıdaki komutları çalıştırın:

# Bunu projenizin gerçek yoluyla değiştirin. Boşluk içeriyorsa tırnak içine alın,
# ve Linux/Mac'teyseniz ve herhangi bir yerinde `$$` içeriyorsa tek tırnak içine alın.
cd "/path/to/your/project"

# Zaten bir `package.json` dosyanız varsa, bu komutu atlayın.
npm init

Şimdi, birkaç farklı yoldan birini izleyebilirsiniz:

• Babel'i bağımsız olarak, herhangi bir paketleyici olmadan kullanın
• Babel'i Webpack ile birlikte kullanın ve paketleyin

Babel'i Bağımsız Olarak Kullanma

İlk olarak, ihtiyacımız olan bazı bağımlılıkları yüklememiz gerekiyor.

• @babel/cli, çekirdek Babel mantığını ve babel komutunu yükler.
• @babel/preset-env, Babel'in hangi dönüşümleri uygulayacağını belirlemesine yardımcı olur.

npm install @babel/cli @babel/preset-env --save-dev

Şimdi, bir .babelrc dosyası oluşturun ve @babel/preset-env ile yapılandırın.

{
  "presets": ["@babel/preset-env"],
  "sourceMaps": true
}

Son olarak, desteklemeniz gereken tarayıcılar konusunda çok özel gereksinimleriniz varsa, Babel'in (ve diğer kütüphanelerin) hangi özellikleri hedefleyeceğini bilmesi için Browserslist'i yapılandırabilirsiniz.

Varsayılan olarak, herhangi bir şey yapılandırmazsanız, Browserslist oldukça mantıklı bir sorgu kullanır: > 0.5%, last 2 versions, Firefox ESR, not dead. Çok fazla polyfill ile IE 8'i desteklemeniz gerekmesi gibi, bunu değiştirmenizi gerektiren çok özel durumlarınız olmadıkça, bu adımla uğraşmanıza gerek yoktur.

Projenizi derlemek istediğinizde, bu komutu çalıştırın ve her şey derlenecektir.

babel src --out-dir dist

Hatırlamak ve her seferinde yazmak zorunda kalmamak için bir npm komut dosyası kullanmak uygun olabilir. package.json dosyanızdaki "scripts" nesnesine bir "build" alanı ekleyin:

{
  "scripts": {
    "build": "babel src --out-dir dist"
  }
}

Ve şimdi, komutu yazmak ve hatırlamak biraz daha kolay.

npm run build

Babel'i Webpack ile Kullanma

Paketleme için Webpack'i kullanmak istiyorsanız, kurulum birkaç adım daha gerektirir. İlk olarak, hem Babel hem de Webpack için ihtiyacımız olan tüm bağımlılıkları yüklememiz gerekiyor.

• webpack çekirdek Webpack kodudur ve webpack-cli size webpack komutunu verir.
• @babel/core çekirdek Babel kodudur ve babel-loader için bir eş bağımlılığıdır.
• babel-loader, Webpack'in dosyalarınızı dönüştürmek için Babel'i kullanmasını sağlar.
• @babel/preset-env, Babel'in hangi dönüşümleri uygulayacağını belirlemesine yardımcı olur.

npm install webpack webpack-cli @babel/core babel-loader @babel/preset-env --save-dev

Şimdi, bir .babelrc dosyası oluşturun ve @babel/preset-env ile yapılandırın.

{
  "presets": ["@babel/preset-env"],
  "sourceMaps": true
}

Ardından, desteklemeniz gereken tarayıcılar konusunda çok özel gereksinimleriniz varsa, Babel'in (ve diğer kütüphanelerin) hangi özellikleri hedefleyeceğini bilmesi için Browserslist'i yapılandırabilirsiniz.

Varsayılan olarak, herhangi bir şey yapılandırmazsanız, Browserslist oldukça mantıklı bir sorgu kullanır: > 0.5%, last 2 versions, Firefox ESR, not dead. Çok fazla polyfill ile IE 8'i desteklemeniz gerekmesi gibi, bunu değiştirmenizi gerektiren çok özel durumlarınız olmadıkça, bu adımla uğraşmanıza gerek yoktur.

Son olarak, webpack.config.js adlı bir dosya oluşturarak Webpack'i yapılandırın.

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'src/index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /\/node_modules\//,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

Bu yapılandırma, uygulamanın giriş noktasının src/index.js dosyasında olduğunu ve çıktının dist/app.js dosyasına oluşturulacağını varsayar.

Şimdi, derleyiciyi çalıştırmak için şu komutu çalıştırmanız yeterlidir:

webpack -d --watch

Hatırlamak ve her seferinde yazmak zorunda kalmamak için bir npm komut dosyası kullanmak uygun olabilir. package.json dosyanızdaki "scripts" nesnesine bir "start" alanı ekleyin:

{
  "scripts": {
    "start": "webpack -d --watch"
  }
}

Ve şimdi, komutu çalıştırmak biraz daha kolaydır.

npm start

Üretim yapıları için, betiklerinizi küçültmek (minify) isteyeceksiniz. Neyse ki, bu da oldukça kolay: sadece Webpack'i farklı bir seçenekle çalıştırmak.

webpack -p

Bunu npm betiklerinize ekleyerek hızlı ve kolay bir şekilde oluşturabilirsiniz.

{
  "scripts": {
    "start": "webpack -d --watch",
    "build": "webpack -p"
  }
}

Ve sonra bunu çalıştırmak daha pratiktir.

npm run build

Ve elbette, bunu otomatik üretim oluşturma betiklerinde de yapabilirsiniz. Örneğin, Heroku kullanıyorsanız, şöyle görünebilir:

{
  "scripts": {
    "start": "webpack -d --watch",
    "build": "webpack -p",
    "heroku-postbuild": "webpack -p"
  }
}