Projenizde temel çizgiyi kullanma

1. Giriş

Baseline, hangi web özelliklerinin birlikte çalışabilir olduğu ve bugün güvenle kullanılabileceği konusunda daha net mesajlar veren bir girişimdir. Baseline araçlarındaki gelişmeler sayesinde artık Baseline'ı projelerinizde doğrudan Browserslist sorgusu olarak kullanabilirsiniz. Böylece araç zinciriniz, kodun çıkışını seçtiğiniz Baseline hedefine göre değiştirebilir.

Bu codelab'de, örnek bir projede Baseline'ı nasıl kullanacağınızı ve belirli bir Baseline hedefi seçmek için nasıl yapılandıracağınızı öğreneceksiniz. Ayrıca, seçtiğiniz referans değer hedefine bağlı olarak proje araç zincirinin çıktısının nasıl değiştiğini de gözlemleyebilirsiniz.

2. Demoyu yerel makinenizde ayarlama

Not: Demo, yaygın ve popüler bir paketleyici olan webpack kullanılarak oluşturulmuş temel bir React uygulamasından oluşur. Ancak, kullandığınız paketleyici genellikle projenizde Baseline'ı nasıl kullanacağınızın odak noktası değildir. Browserslist yapılandırması arayan herhangi bir araç zinciri, bu codelab'de özetlenen genel yaklaşımı kullanabilir.

Öncelikle tercih ettiğiniz terminal uygulamasına gidin, demo deposunu klonlayın ve ardından proje dizinine girin:

git clone [e-mail]:GoogleChromeLabs/baseline-demos.git
cd baseline-demos/tooling/webpack

Bu noktada, demoya Baseline entegre edilmiş olacaktır ancak sizi sıfırdan başlatacak bir commit'e göz atmak isteyebilirsiniz:

git checkout d3793f25

Klonlanan depo sayesinde artık demoyu başlatabilirsiniz. Bu proje, Node sürüm oluşturmayı yönetmek için nvm kullanır. Node'un makul derecede yeni bir sürümü genel olarak yüklüyse bu adımı tamamlamanız muhtemelen gerekmez. Ancak nvm kullanıyorsanız aşağıdaki komutları çalıştırın:

nvm install
nvm use

Buradan projenin paketlerini yükleyin:

npm install

Not: Sonraki adımda uygulama yerel makinenizde çalıştırılır. Ancak demoyu görmek istiyorsanız bu adım tamamen isteğe bağlıdır. Demonun kendisi, Baseline'ın entegrasyon sürecinden daha önemli değildir.

Demoyu görmek istiyorsanız aşağıdaki komutu çalıştırın:

npm start

Ardından http://localhost:8080 adresine gidin. Demonun kendisi, sayfanın üst kısmındaki bir form alanı kullanılarak filtrelenebilen bir kart listesidir. Uygulamanın kendisinde, temel eşiğe ulaşmış özelliklerin bir karışımı kullanılıyor.

Demoyu tamamladığınızda terminalinize gidin ve demoyu istediğiniz zaman durdurmak için Ctrl+C tuşlarına basın.

3. Temel planı projeye entegre etme

Bu demoda başlangıçta bir Browserslist yapılandırması belirtilmiyor. Browserslist, araç zincirlerine hangi minimum tarayıcı sürümlerinin desteklenmesi gerektiğini söyleyen kompakt bir sorgulama söz dizimidir. Örneğin, last 3 years sorgusunu kullanmak geniş bir hedef aralığı belirtir. Bu demoda, araç zincirinizde kullanabileceğiniz Baseline hedefleriyle uyumlu bir Browserslist sorgusu belirleyeceğiz. Temel hedef aşağıdakilerden biri olabilir:

• Yeni tarayıcılar yayınlandıkça zaman içinde güncellenen değişken hedefler:
  • Temel Yeni Kullanıma Sunulanlar: Şu andan 30 ay öncesine kadar herhangi bir zamanda temel tarayıcı grubunda uygulanan birlikte çalışabilir özellikler.
  • Baseline Widely available: 30 ay veya daha uzun süre önce temel tarayıcı grubunda uygulanmış, birlikte çalışabilir özellikler içerir.
• Belirli bir zamandaki tarayıcı sürümlerini temsil eden sabit hedefler. Bunlar, 2016'dan geçerli yıla kadar olan yıllar olarak ifade edilir.

Not: "Temel tarayıcı grubu"; Chrome, Android'de Chrome, Firefox, Android'de Firefox, Edge, macOS'te Safari ve iOS'te Safari'yi ifade eder.

Başlamak için proje için yaygın olarak kullanılabilen hareketli temel hedefi seçeceğiz. Bunu yapmak için package.json uygulamasını açın ve şunları ekleyin:

"browserslist": "baseline widely available"

4. Farklı temel hedef seçeneklerini belirleyerek kod çıkışındaki değişiklikleri gözlemleyin.

Demo projesi için hedef olarak Baseline Widely available'ı seçtiniz. Ardından projeyi oluşturmanız gerekir:

npm run build

Projenin babel.config.js dosyasında @babel/preset-env için debug seçeneği true olarak belirtildiğinden çok fazla ek çıktı var. Öncelikle, paketleyici istatistiklerindeki CSS ve JavaScript boyutunu not edin:

assets by status 213 KiB [emitted]
  asset js/home.5f3c5480.js 208 KiB [emitted] [immutable] [minimized] (name: home) 2 related assets
  asset css/home.20db50ef.css 3.64 KiB [emitted] [immutable] (name: home) 1 related asset
  asset index.html 564 bytes [emitted]

Burada JavaScript paketinin 208 KiB, CSS'nin ise 3,64 KiB olduğunu unutmayın. Çünkü bu proje, JavaScript polyfill'leri için core-js, henüz tam olarak birlikte çalışabilir olmayan CSS özelliklerine tedarikçiye özel önekler uygulamak için ise autoprefixer kullanıyor. Hem core-js hem de autoprefixer, seçilen Baseline Browserslist sorgusundan etkilenir.

Çıktıda dikkat edilmesi gereken bir diğer nokta, Baseline Widely available için Browserslist sorgunuzun nasıl bir Browserslist sorgusuna dönüştürüldüğüdür. Projenizde bu, aşağıdakine benzer bir şekilde görünür:

Using targets: {
  "chrome": "108",
  "edge": "108",
  "firefox": "108",
  "ios": "16",
  "safari": "16"
}

Derleme çıktısında core-js tarafından yerleştirilen polyfill'leri not edin:

The corejs3 polyfill added the following polyfills:
  es.iterator.constructor { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }
  es.iterator.filter { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }
  es.iterator.map { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }

Temel hedefiniz değiştirilirse bu çıktı da değişebilir. Örneğin, daha katı bir hizmet düzeyi sözleşmesi nedeniyle uygulamanızın çok daha eski bir tarayıcı grubunu desteklemesi gerektiğini varsayalım. Bu durum sizin için geçerliyse daha muhafazakar bir hedef seçmeniz olasıdır. package.json dosyanızda, Browserslist yapılandırmasını aşağıdaki gibi olacak şekilde değiştirin:

"browserslist": "baseline 2016"

Bu, hedef olarak Baseline 2016'yı seçer ve bir Browserslist sorgusuna çevrilir. Derlemeyi yeniden çalıştırdıktan sonra araç zinciri çıkışındaki farklılıkları not edebilirsiniz:

npm run build

İlk olarak, paketleyici istatistiklerinde projenin JavaScript ve CSS'sinin dosya boyutundaki değişikliği not edin:

assets by status 237 KiB [emitted]
  asset js/home.b228612d.js 232 KiB [emitted] [immutable] [minimized] (name: home) 2 related assets
  asset css/home.0c3e4fd7.css 3.91 KiB [emitted] [immutable] (name: home) 1 related asset
  asset index.html 564 bytes [emitted]

JavaScript paketinin boyutunun yaklaşık 30 KiB arttığını göreceksiniz. Projenin CSS'si, autoprefixer'nın 2016 taban hedefi temelinde daha fazla satıcı öneki eklemesi nedeniyle yalnızca biraz daha büyük. Ayrıca, Browserslist sorgusundaki değişikliğe de dikkat edin:

Using targets: {
  "chrome": "53",
  "edge": "14",
  "firefox": "49",
  "ios": "10",
  "safari": "10"
}

Yaygın olarak kullanılabilen temel hedefle karşılaştırıldığında bu tarayıcı sürümleri çok daha eski. Hatta bu örnekte hedeflenen Edge sürümü, Chromium öncesi bir sürüm.

core-js tarafından yerleştirilen polyfill'ler de değişir. Bu, hedef olarak "Yaygın olarak kullanılabilen Baseline" seçildiğinde oluşan değişiklikten çok daha fazladır:

The corejs3 polyfill added the following polyfills:
  es.array.filter { "edge":"14" }
  es.iterator.constructor { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.iterator.filter { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.object.to-string { "edge":"14", "firefox":"49" }
  es.array.includes { "firefox":"49" }
  es.string.includes { "edge":"14" }
  es.array.map { "firefox":"49" }
  es.iterator.map { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.symbol { "edge":"14", "firefox":"49" }
  es.symbol.description { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.array.iterator { "chrome":"53", "edge":"14", "firefox":"49" }
  web.dom-collections.iterator { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.array.push { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.regexp.to-string { "edge":"14" }
  es.array.from { "edge":"14", "firefox":"49" }
  es.regexp.exec { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.regexp.test { "edge":"14" }
  es.error.cause { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }

Burada dikkat edilmesi gereken nokta, temel hedefinizin uygulamanızın projenizin araç zinciri tarafından nasıl dönüştürüleceği konusunda önemli bir etkiye sahip olabileceğidir. Bu örnekteki uygulama, React veya uygulamanın kendisinde çok fazla son teknoloji geliştirici deneyimi özelliği içermeyen çok basit bir uygulamadır. Çok daha karmaşık uygulamalarda ise çok farklı sonuçlar elde edebilirsiniz. Hatta seçtiğiniz Baseline hedefine uymak için ek polifiller, dönüşümler ve diğer ek kod kaynakları gerekebilir.

5. Aşağı akış tarayıcılarını hedefleme

Baseline'ın hedeflediği temel tarayıcı grubu aşağıdaki tarayıcılardan oluşur:

• Chrome
• Android cihazda Chrome
• Firefox
• Android'de Firefox
• Edge
• macOS'te Safari
• iOS'te Safari

Ancak "aşağı akış tarayıcıları" olarak bilinen tarayıcıları hedefleyebilirsiniz. Bu tarayıcıların motorları, temel tarayıcı grubundaki bir tarayıcıdan (çoğu zaman Chromium) türetilir. Opera ve Samsung Internet gibi tarayıcılar bu kapsamdadır. Geçerli bir Baseline Browserslist sorgusuna with downstream ekleyerek temel tarayıcı grubundakilere ek olarak bu tarayıcıları da hedefleyebilirsiniz:

"browserslist": "baseline widely available with downstream"

Bu, Baseline Widely available hedefi uyarınca aşağı akış tarayıcılarını hedefler. Bunun nasıl bir Browserslist sorgusuna dönüştüğünü görmek için projeyi yeniden oluşturun:

npm start

Ardından, Browserslist sorgusundaki değişikliği not edin:

Using targets: {
  "android": "108",
  "chrome": "108",
  "edge": "108",
  "firefox": "108",
  "ios": "16",
  "opera": "94",
  "opera_mobile": "80",
  "safari": "16",
  "samsung": "21"
}

Ayrıca, alt akış tarayıcılarını yıla göre de hedefleyebilirsiniz. Örneğin:

"browserslist": "baseline 2016 with downstream"

Bu yapılandırmayla birlikte, Browserslist sorgunuz buna göre değişir:

Using targets: {
  "android": "53",
  "chrome": "53",
  "edge": "14",
  "firefox": "49",
  "ios": "10",
  "opera": "40",
  "opera_mobile": "80",
  "safari": "10",
  "samsung": "6.2"
}

6. Linters ve diğer araçlar

Browserslist'e yerleştirilmiş Baseline sorguları, paketleyiciler ve araç zincirinizin diğer bölümleri gibi araçlar için uygundur. Ancak Baseline hedeflerini yapılandırmalarının bir parçası olarak benimsemiş olan linter'lar gibi diğer araçlar da değerlidir.

Baseline için linter desteğine iyi bir örnek olarak ESLint verilebilir. Bu linter, CSS linting'inin bir parçası olarak use-baseline kuralı sağlar. Bu kural, @eslint/css kullanarak Baseline Newly, Baseline Widely available veya Baseline years'ı hedeflemenize olanak tanır. Topluluk @html-eslint/eslint-plugin paketinde de benzer bir kural vardır. Bu kural, eslint.config.js dosyanızdaki HTML özellikleri için aynı işlemi yapmanıza olanak tanır:

export default [
  /* Omitted JS linting rules ... */
  // Lint CSS files for Baseline:
  {
    files: ["**/*.css"],
    plugins: {
      css
    },
    language: "css/css",
    rules: {
      "css/no-duplicate-imports": "error",
      // Lint CSS files to make sure they are using
      // only Baseline Widely available features:
      "css/use-baseline": ["warn", {
        available: "widely"
      }]
    },
  },
  // Lint HTML and JSX files for Baseline:
  {
    files: ["**/*.html"],
    ...html.configs["flat/recommended"],
    rules: {
      // Lint HTML files to make sure they are using
      // only Baseline Widely available features:
      "@html-eslint/use-baseline": ["warn", {
        available: "widely"
      }]
    }
  }
];

Bu yapılandırmada dikkat edilmesi gereken birkaç nokta vardır:

1. Hem HTML hem de CSS linting paketleri use-baseline kuralını kullanır ve available: "widely" yapılandırma seçeneği kullanılarak yaygın olarak kullanılabilir olarak ayarlanır.
2. Her iki linting paketi için de linter ihlallerinin günlük düzeyi "warn" olarak ayarlanır. Bu, derlemenin gerçekleşmesini önlemek için hata koduyla bırakmak üzere "error" olarak ayarlanabilir.

Daha önce npm run build komutunu çalıştırırken linter çıkışını görmüş olabilirsiniz. Ancak linter çıkışını tek başına görmek için aşağıdakileri çalıştırabilirsiniz:

npm run lint

Gördüğünüz çıkışta, projenin CSS'sindeki çeşitli uyarılar vurgulanır:

/var/www/baseline-demos/tooling/webpack-browserslist-config-baseline/src/css/normalize.css
  222:3  warning  Property 'outline' is not a widely available baseline feature  css/use-baseline

/var/www/baseline-demos/tooling/webpack-browserslist-config-baseline/src/css/styles.css
  62:3   warning  Property 'outline' is not a widely available baseline feature                                css/use-baseline
  81:23  warning  Value 'subgrid' of property 'grid-template-rows' is not a widely available baseline feature  css/use-baseline

Not: CSS linting için Stylelint'i kullanmayı tercih ederseniz stylelint-plugin-use-baseline paketi kullanılabilir.

7. Özet

Projenizde Browserslist tarafından sağlanan Baseline sorgularını kullanmak için temel derleme araçları ve Browserslist hakkında bilgi sahibi olmanız gerekir. Ancak bunları projeye yerleştirme işlemi kısa sürer. Bu özelliği kullanmanın temel avantajı, desteklediğiniz tarayıcıları artık sürüm numaraları açısından düşünmenize gerek kalmamasıdır. Bunun yerine, sizin için zorlu işleri yapan bir Baseline hedefi kullanabilirsiniz.

Ayrıca, bu demoyu Rollup'ta çalıştıran bir sürüm de vardır ve bu Codelab, büyük ölçüde bu demo kullanılarak da takip edilebilir.

Temel destek, diğer paketleme araçlarında da görünmeye başlıyor. Örneğin, arka planda Rollup'ı kullanan Vite, 7. sürümden itibaren varsayılan olarak Baseline Widely Available tarayıcılarını hedefliyor.

Nasıl yapacağınıza karar verirseniz verin, Browserslist'te bulunan Baseline sorgularını projenize dahil ederek ve size uygun bir Baseline hedefi seçerek tarayıcıları daha basit ve güvenilir bir şekilde hedefleyebilirsiniz.