Kontrolü Koruyun: Web Paketi ve Tepki Kılavuzu, Pt. 2

Bu React-Webpack öğreticisinin ilk bölümünde, yükleyicilerin nasıl yapılandırılacağını ve optimizasyonun nasıl gerçekleştirileceğini tartıştık. Şimdi, belirli React/Webpack yapılandırma kullanım durumları ile ilgili daha gelişmiş tekniklere gireceğiz.

TypeScript ve Webpack ile React: Babel'e girin

React projenizde TypeScript'i kullanmanın birkaç yolu vardır. ts-loader iyi bir seçenek olsa da, @babel/preset-typescript kullanarak TypeScript'in nasıl aktarılacağına odaklanmak istiyorum çünkü birçok kitaplık derleme zamanı optimizasyonu gerçekleştirmek için Babel eklentileri yayınlıyor. TypeScript dosyalarını işlemeye ek olarak, styled-components veya react-intl gibi çeşitli kitaplıklar tarafından sağlanan Babel eklentilerini kullanmamıza izin verecek.

Yapmamız gereken ilk şey TypeScript ve Babel bağımlılıklarını kurmak:

 npm install -D typescript @babel/preset-typescript @types/react @types/react-dom

Daha sonra tsc komut satırı programını kullanarak bir TypeScript yapılandırma dosyası oluşturacağız:

 ./node_modules/.bin/tsc -init --lib dom --jsx react --isolatedModules

Yukarıdaki komut, bir tarayıcı ortamı için kod yazmaya uygun bir tsconfig.json oluşturacaktır. --isolatedModules seçeneği, yazdığınız kodun @babel/plugin-transform-typescript ile uyumlu olmasını sağlayan bazı kısıtlamalar uygular. Babel'in dönüştüremeyeceği bir şekilde kod yazarken IDE'nizin sizi uyarması için bu seçeneğin olması yararlıdır.

Ardından, yeni bir ön ayar babel.config.js güncelleyeceğiz:

 @@ -6,7 +6,8 @@ module.exports = { modules: false } ], - "@babel/preset-react" + "@babel/preset-react", + "@babel/preset-typescript" ], plugins: [ "@babel/plugin-transform-runtime",

Ve webpack.config.js içindeki .ts dosya uzantısını etkinleştirin:

 @@ -11,7 +11,7 @@ module.exports = function(_env, argv) { return { devtool: isDevelopment && "cheap-module-source-map", - entry: "./src/index.js", + entry: "./src/index.tsx", output: { path: path.resolve(__dirname, "dist"), filename: "assets/js/[name].[contenthash:8].js", @@ -20,7 +20,7 @@ module.exports = function(_env, argv) { module: { rules: [ { - test: /\.jsx?$/, + test: /\.(js|jsx|ts|tsx)$/, exclude: /node_modules/, use: { loader: "babel-loader", @@ -61,6 +61,9 @@ module.exports = function(_env, argv) { } ] }, + resolve: { + extensions: [".js", ".jsx", ".ts", ".tsx"] + }, plugins: [ isProduction && new MiniCssExtractPlugin({

Yukarıdaki yapılandırma, kodumuzu aktarabilmek için yeterlidir, ancak aslında onu doğrulamaz. fork-ts-checker-webpack-plugin kullanarak ayrı, paralel bir işlemde tip denetimi yapmamız gerekecek.

İlk önce, onu yüklememiz gerekiyor:

 npm install -D fork-ts-checker-webpack-plugin

Ardından, webpack.config.js içindeki plugins bölümüne ekleyeceğiz:

 @@ -4,6 +4,7 @@ const HtmlWebpackPlugin = require("html-webpack-plugin"); const webpack = require("webpack"); const TerserWebpackPlugin = require("terser-webpack-plugin"); const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin"); +const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin"); module.exports = function(_env, argv) { const isProduction = argv.mode === "production"; @@ -78,6 +79,9 @@ module.exports = function(_env, argv) { "process.env.NODE_ENV": JSON.stringify( isProduction ? "production" : "development" ) + }), + new ForkTsCheckerWebpackPlugin({ + async: false }) ].filter(Boolean), optimization: {

async: false öğesinin belirtilmesi, Webpack'in geçersiz kod yaymasını engeller ve bir geliştirme sunucusu çalıştırılırken bir bindirmede derleme hatalarını gösterir.

Not: İlgi çekmeye başlayan Babel makroları da ilginizi çekebilir.

Web Paketi ile Geliştirilmiş CSS

Önceki makalede, css-loader kullanarak temel stil oluşturmayı ele aldık. Bu yapılandırmayı iyileştirebileceğimiz birkaç yol var.

Önerilen yapılandırma, CSS Modülleri, Sass ve PostCSS teknolojilerinden yararlanacaktır. Birbirlerini bazı yönlerden tamamlamalarına rağmen, hepsini aynı anda kullanmanıza gerek yoktur. Nihai kurulum, yukarıdaki eklentilerin tümünü etkinleştirecek ve "buna ihtiyacınız olmayacağından" eminseniz, bir şeyi dışarıda bırakmayı size bırakacağız.

CSS Modülleri

CSS Modülleri, her CSS sınıfı için rastgele, benzersiz bir ad oluşturarak CSS dosyalarındaki genel kapsam belirleme sorununu ele alır. Bir CSS Modülü tüketen bir JavaScript dosyasının bakış açısından, orijinal sınıf adı ile rastgele olan arasındaki ilişki, yükleyici tarafından dışa aktarılan bir nesne ile temsil edilir. Bir CSS dosyasında belirtilen sınıfları, kazayla çarpışmayı neredeyse imkansız hale getirecek şekilde bulmanızı ve kullanmanızı sağlar.

CSS Modülleri desteği, css-loader zaten dahil edilmiştir. Şimdi, CSS Modüllerinin ne zaman kullanımda olduğunu açıkça belirtmek için yeni bir kural eklememiz gerekecek:

 @@ -33,11 +33,25 @@ module.exports = function(_env, argv) { }, { test: /\.css$/, use: [ isProduction ? MiniCssExtractPlugin.loader : "style-loader", "css-loader" ] }, + { + test: /\.module.css$/, + use: [ + isProduction ? MiniCssExtractPlugin.loader : "style-loader", + { + loader: "css-loader", + options: { + modules: true + } + } + ] + }, { test: /\.(png|jpg|gif)$/i, use: {

Bununla, .module.css ile biten herhangi bir dosya, CSS Modülleri etkinleştirilmiş olarak işlenecektir.

PostCSS

PostCSS, CSS sözdizimini genişletmek, optimizasyon gerçekleştirmek veya eski tarayıcılar için yedekler sağlamak için kullanabileceğiniz devasa bir eklenti kitaplığına sahip genişletilebilir bir CSS işleme çerçevesidir.

İlk olarak, gerekli bağımlılıkları kuracağız:

 npm install -D postcss-loader postcss-import postcss-preset-env

Ve CSS yapılandırmamızı güncelleyin:

 @@ -47,9 +47,11 @@ module.exports = function(_env, argv) { { loader: "css-loader", options: { - modules: true + modules: true, + importLoaders: 1 } - } + }, + "postcss-loader" ] }, {

Aşağıdaki eklentileri kullanarak PostCSS'yi yapılandıracağız:

• postcss-import : PostCSS'nin @import ifadelerini işlemesini sağlar
• postcss-preset-env : Çoğu tarayıcıda modern CSS özelliklerini desteklemek için çoklu dolgular uygular

postcss.config.js adlı bir dosya oluşturun ve onu aşağıdakilerle doldurun:

 module.exports = { plugins: { "postcss-import": {}, "postcss-preset-env": {} } };

Yararlı bulabileceğiniz diğer uzantılar için PostCSS eklenti dizinine göz atabilir ve bunları yapılandırmanıza ekleyebilirsiniz.

Sass/SCSS

Sass, bir başka popüler CSS işleme çerçevesidir. PostCSS'den farklı olarak Sass, "piller dahil" olarak gelir. Sass, kullanıma hazır, iç içe kurallar, karışımlar ve geriye dönük uyumluluk için yeniden yazma kuralları için destek sunar. PostCSS standart CSS sözdizimini korumayı amaçlarken, Sass sözdizimi CSS spesifikasyonundan farklı olabilir. Buna rağmen, Sass o kadar yaygın bir çözüm ki, CSS'yi yazmak için kullanmak sadece daha kolay bir seçenek olabilir - ancak gereksinimlerinize bağlı bir seçenek.

İlk olarak, gerekli bağımlılıkları kuracağız:

 npm install -D sass-loader node-sass resolve-url-loader

Ardından, Web paketi yapılandırmamıza yeni bir yükleyici ekleyin:

 @@ -38,6 +38,25 @@ module.exports = function(_env, argv) { "css-loader" ] }, + { + test: /\.s[ac]ss$/, + use: [ + isProduction ? MiniCssExtractPlugin.loader : "style-loader", + { + loader: "css-loader", + options: { + importLoaders: 2 + } + }, + "resolve-url-loader", + { + loader: "sass-loader", + options: { + sourceMap: true + } + } + ] + }, { test: /\.(png|jpg|gif)$/i, use: {

Yukarıdaki snippet'le ilgili birkaç sorunu önceden ele aldık:

1. Göreli içe @import ed Sass dosyalarından çalışmasını sağlamak için sass-loader resolve-url-loader loader'ı tanıttık.

2. css-loader loader'ın @import -ed dosyalarını takip eden yükleyicileri kullanarak işlemesi için importLoaders seçeneğini belirledik.

Yukarıdaki yapılandırma ile, daha önce tanımladığımız PostCSS ve CSS Modüllerine ek olarak Sass/SCSS kullanarak stillerimizi yazmaya başlayabiliriz. Bu seçeneklerin tümü aynı anda etkinleştirilebilse de, hepsini aynı proje içinde kullanmak zorunda değilsiniz, böylece gereksinimlerinize en uygun aracı seçebilirsiniz.

Web Çalışanları

Web çalışanları , modern web'in güçlü bir konseptidir. Pahalı hesaplamaları ana iş parçacığından uzaklaştırmanıza olanak tanır. Web çalışanları tedbirli bir şekilde kullanılmalı ve bir olay döngüsü içinde akıllı zamanlama ile başka türlü optimize edilemeyecek şeyler için ayrılmalıdır. Web çalışanlarını kullanmak, uzun, eşzamanlı işlemleri optimize etmek için iyi bir adaydır.

Web paketi, çalışan dosyalarını çıktı dizininde bir araya getiren ve tüketici dosyasına bir işçi sınıfı sağlayan işçi worker-loader ile web çalışanlarının kullanımını kolaylaştırır.

İlk önce, worker-loader kurmamız gerekiyor:

 npm install -D worker-loader

Ardından yapılandırma dosyamıza ekleyin:

 @@ -31,6 +31,10 @@ module.exports = function(_env, argv) { } } }, + { + test: /\.worker\.js$/, + loader: "worker-loader" + }, { test: /\.css$/, use: [

Şimdi, web çalışanlarını kullanmaya başlamak için tek yapmanız gereken, sıradan Worker API'sini uygulayan, .worker.js ile biten bir dosyadan içe aktarılan bir sınıfı başlatmaktır.

Servis Çalışanları

Servis çalışanları, kullanıcı deneyiminde gelişmiş optimizasyon teknikleri ve iyileştirmeler sağlar. Bir kullanıcı ağ bağlantısını kaybettiğinde uygulamanızın çevrimdışı çalışmasına izin verirler. Ayrıca, bir güncellemeyi gönderdikten sonra bile uygulamanızın anında yüklenmesine izin verirler.

Webpack, workbox-webpack-plugin modülünü kullanarak hizmet çalışanlarını uygulamanız için yapılandırmayı kolaylaştırır. İlk önce, onu yüklememiz gerekiyor:

 npm install -D workbox-webpack-plugin

Ardından, eklentiyi Web paketi yapılandırmamızın plugins bölümüne ekleyeceğiz:

 @@ -4,6 +4,7 @@ const HtmlWebpackPlugin = require("html-webpack-plugin"); const webpack = require("webpack"); const TerserWebpackPlugin = require("terser-webpack-plugin"); const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin"); +const WorkboxPlugin = require("workbox-webpack-plugin"); module.exports = function(_env, argv) { const isProduction = argv.mode === "production"; @@ -75,6 +76,11 @@ module.exports = function(_env, argv) { "process.env.NODE_ENV": JSON.stringify( isProduction ? "production" : "development" ) + }), + new WorkboxPlugin.GenerateSW({ + swDest: "service-worker.js", + clientsClaim: true, + skipWaiting: true }) ].filter(Boolean), optimization: {

Yukarıdaki yapılandırma aşağıdaki seçenekleri kullanır:

• swDest , oluşturulan çalışan dosyası için çıktı dosya adını belirtir.
• clientsClaim , hizmet çalışanına kayıttan hemen sonra sayfanın kontrolünü ele geçirmesini ve sonraki sayfanın yeniden yüklenmesini beklemek yerine önbelleğe alınmış kaynakları sunmaya başlamasını söyler.
• skipWaiting , tüm etkin örneklerin yok edilmesini beklemek yerine, hizmet çalışanına yönelik güncellemelerin hemen yürürlüğe girmesini sağlar.

Son iki seçeneğin varsayılan olmamasının iyi bir nedeni var. Aynı anda etkinleştirildiğinde, zamana duyarlı durumlarda aksaklıkların meydana gelme potansiyeli vardır, bu nedenle bu seçenekleri yapılandırmanızda etkinleştirip etkinleştirmeme konusunda bilinçli bir karar vermek size kalmıştır.

Son olarak, bir kullanıcı uygulamamızı açtığında servis çalışanını kaydetmemiz gerekiyor:

 @@ -2,3 +2,9 @@ import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render(<h3>React App</h3>, document.getElementById("root")); + +if ("serviceWorker" in navigator) { + window.addEventListener("load", () => { + navigator.serviceWorker.register("/service-worker.js"); + }); +}

Servis çalışanları, uygulamamıza çevrimdışı yetenekler eklemekten çok daha fazlasını yapabilir. Servis çalışanı davranışı üzerinde daha fazla kontrole ihtiyacınız varsa, bunun yerine InjectManifest eklentisini kullanabilirsiniz. Kendi hizmet çalışanı dosyanızı yazarak, API istekleri için önbelleğe almayı etkinleştirebilir ve anında iletme bildirimleri gibi hizmet çalışanları tarafından etkinleştirilen diğer özellikleri kullanabilirsiniz. Workbox'ın yetenekleri hakkında daha fazla bilgiyi resmi belgelerinin Gelişmiş Tarifler bölümünde bulabilirsiniz.

Gelişmiş React Web Paketi Yapılandırması: Projenize Avantaj Sağlayın

Webpack eğitim serimizin bu ikinci bölümü, Webpack konfigürasyonunuzu en genel React kullanım durumlarının ötesine taşımak için gerekli bilgilerle sizi donatmış olmalıdır. Umarım bu bilgiyi faydalı bulmuşsunuzdur ve projenize özel hedeflere ulaşmak için kişiselleştirilmiş konfigürasyonunuzu güvenle genişletebilirsiniz.

Her zaman olduğu gibi, tam yapılandırma dosyalarını GitHub'da bulabilir ve hedeflerinize uygun daha fazla tarif bulmak için Web paketi belgelerine ve eklentileri bölümüne başvurabilirsiniz. Okuduğunuz için teşekkürler!