e
sv

TypeScript ile web paketini kullanma

avatar

Yazılım Method

  • e 0

    Mutlu

  • e 0

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

Birçok modern projede kullanılan webpack, uygulama kaynaklarını herhangi bir cihazda daha verimli ve etkili bir şekilde çalışacak şekilde optimize eden harika bir araçtır. web paketi, modüllerin tek bir dosyada derlenmesine ve paketlenmesine yardımcı olarak HTTP isteklerini azaltır ve sonuç olarak uygulama performansını artırır.

Web paketi ile TypeScript kodu, tarayıcı dostu bir JavaScript dosyasına derlenir. Web paketi yükleyicileri ile SASS ve LESS dosyalarını tek bir CSS paket dosyasına da dönüştürebilirsiniz.

Bu makalede, TypeScript'i JavaScript'e derlemek için web paketinin nasıl kullanılacağını, kaynak kodunu tek bir JavaScript dosyasında birleştirmeyi ve hata ayıklama için bir kaynak haritası kullanmayı öğreneceğiz. Web paketi eklentilerinin nasıl kullanılacağını da keşfedeceğiz.

Bu eğiticiyi takip etmek için aşağıdakilere ihtiyacınız olacak:

  • npm
  • Node.js: Node.js zaten kuruluysa, ≥v8.x olduğundan emin olun.
  • Seçtiğiniz herhangi bir kod editörü; Visual Studio Code kullanacağım
  • Temel TypeScript bilgisi

Başlayalım!

İçindekiler

web paketi yükleyicileri

Varsayılan olarak, web paketi yalnızca JavaScript dosyalarını anlar ve içe aktarılan her dosyayı bir modül olarak ele alır. web paketi JavaScript olmayan dosyaları derleyemez veya paketleyemez, bu nedenle bir yükleyici kullanır.

Yükleyiciler, web paketine statik varlıkların nasıl derleneceğini ve paketleneceğini söyler. TypeScript modüllerini JavaScript'te derlemek, uygulama stillerini işlemek ve hatta kodunuzu ESLint ile hizalamak için kullanılırlar.

Birkaç web paketi yükleyicisi , ts-loader, css-loader, style-loader ve daha fazlasını içerir; Onları bu eğitimde daha sonra tartışacağız.

Web paketini ve TypeScript'i ayarlama

Projemizi kurarak başlayalım. Öncelikle bilgisayarınızda TypeScript kurulu olmalıdır. TypeScript'i global olarak yüklemek için aşağıdaki komutu kullanın:

 npm kurulum -g daktilo metni

TypeScript'i global olarak yüklemek, her yeni projeye başladığınızda TypeScript'i yükleme gereksinimini ortadan kaldırır.

Ardından, projemizde bağımlılıklar olarak webpack ve ts-loader paketlerini kuracağız:

 npm başlangıç -y
npm kurulum -D web paketi web paketi-cli ts-loader

web paketi yapılandırması

Varsayılan olarak, web paketinin bir yapılandırma dosyasına ihtiyacı yoktur. Projeniz için giriş noktasının src / index.js olduğunu varsayacak ve üretim sırasında dist / main.js küçültülmüş ve optimize edilmiş sonucu verecektir .

Eklentileri veya yükleyicileri kullanmak istiyorsanız, web paketinin projenizle nasıl çalışacağını, hangi dosyaların derleneceğini ve çıktı paketi dosyasının nerede olacağını belirtmenize izin veren web paketi yapılandırma dosyasını kullanmanız gerekir.

Webpack konfigürasyon dosyasını projemize ekleyelim. Proje kök klasöründen aşağıdaki konfigürasyonlara sahip bir webpack.config.js dosyası oluşturun:

 const yol = gerektirir('yol');

modül.exports = {
  giriş: './src/index.ts',
  modül: {
    tüzük: [
      {
        test: /.ts?$/,
        kullanım: 'ts-loader',
        hariç tut: /node_modules/,
      },
    ],
  },
  çözmek: {
    uzantılar: ['.tsx', '.ts', '.js'],
  },
  çıktı: {
    dosya adı: 'bundle.js',
    yol: path.resolve(__dirname, 'dist'),
  },
  devSunucu: {
    statik: path.join(__dirname, "dist"),
    sıkıştır: doğru,
    bağlantı noktası: 4000,
  },
};

Web paketi yapılandırma seçeneklerinden bazılarını gözden geçirelim. Birincisi, entry seçeneği, web paketinin bir bağımlılık grafiği oluşturmaya başladığı uygulama için başlangıç noktasıdır. webpack, giriş dosyasına göre diğer modüllere geçecektir.

output seçeneği, web paketine paket dosyalarının nereye kaydedileceğini söyler ve paket dosyasını adlandırmanıza olanak tanır. Son olarak, module seçeneği, web paketine, yükleyicileri kullanarak belirli kurallara sahip modüllerin nasıl işleneceğini söyler.

TypeScript yapılandırması

TypeScript yapılandırma dosyası, TypeScript'in JavaScript'e nasıl derleneceğini kontrol eder ve TypeScript'i aktarmak için gereken çeşitli derleyici seçeneklerini belirtir.

Proje kök klasöründen tsconfig.json dosyasını oluşturun ve aşağıdaki konfigürasyonları ekleyin:

 {
    "compilerOptions": {
        "noImplicitAny": doğru,
        "hedef": "ES5",
        "modül": "ES2015"
    }
}

target seçenek, TypeScript'i aktarmak istediğiniz JavaScript sürümüdür, module ise kullanılan import ifadesinin biçimidir. Web paketi tüm modül sistemlerini idare edeceğinden, modülü CommonJS, ES6 veya UMD olarak ayarlayabilirsiniz.

Paket yapılandırması

Şimdi webpack.config.js dosyasını bizim için çalıştıracak bir webpack betiği eklememiz gerekiyor.

Web paketi komut dosyasını eklemek için package.json dosyasını açın ve komut dosyası seçeneğine aşağıdaki komut dosyalarını ekleyin:

 "start": "webpack-dev-server --mode geliştirme",
"build": "web paketi --mode üretimi"

package.json dosyası şimdi aşağıdaki yapılandırma ayarlarını içerecektir:

 {
  "name": "web paketi kurulumu",
  "sürüm": "1.0.0",
  "tanım": "",
  "main": "dist/main.js",
  "bağımlılıklar": {},
  "devBağımlılıkları": {
    "ts yükleyici": "^8.0.3",
    "typescript": "^4.0.2",
    "web paketi": "^4.44.1",
    "webpack-cli": "^3.3.12"
  },
  "Kodlar": {
    "develop": "webpack-dev-server --mode geliştirme", 
    "build": "web paketi – modu üretimi"
  }
}

Geliştirme komut dosyasını çalıştırmak, uygulamayı develop modunda başlatır:

 npm geliştirmek 

build komut dosyasını çalıştırmak, uygulamayı üretim modunda çalıştıracaktır:

 npm çalıştırma derlemesi 

Şimdi iki sayı çıkaracak basit bir TypeScript programı oluşturalım. src klasörünün içinde bir index.ts dosyası oluşturun ve aşağıdaki TypeScript kodunu ekleyin:

 "./app" dosyasından { çıkarma } içe aktar;

işlev başlat() {
    const form = document.querySelector("form");
    form?.addEventListener("gönder", sendHandler);
  }

  function sendHandler(e: Event) {
    e.preventDefault();
    const num1 = document.querySelector("input[name='firstnumber']") HTMLInputElement olarak;
    const num2 = document.querySelector("input[name='secondnumber']") HTMLInputElement olarak;
    const sonuç = çıkarma(Sayı(sayı1.değer), Sayı(sayı2.değer));
    const sonuçElement = document.querySelector("p");
    if (resultElement) {
      sonuçElement.textContent = sonuç.toString();
    }
  }

  içinde();

Ardından, başka bir app.ts dosyası oluşturun ve aşağıdaki kodu ekleyin:

 dışa aktarma işlevi çıkarma(a: sayı, b: sayı): sayı {
  a - b döndür;
}

Devam edin ve aşağıdaki kodu kullanarak uygulamayı üretim modunda çalıştırın:

 npm çalıştırma derlemesi 

Derleme komutunu çalıştırdıktan sonra, web paketi iki TypeScript dosyasını JavaScript koduna aktaracak ve dist klasörü içinde bir bundle.js dosyası oluşturacaktır.

HtmlWebpackPlugin ile HTML sayfaları oluşturma

HtmlWebpackPlugin , web paketinin oluşturulan paket dosyalarını sunacak standart bir HTML sayfası oluşturmasına izin verir.

Paketin dosya adı değiştiğinde veya karma işlemi yapıldığında, HTMLWebpackPlugin , HTML sayfasındaki dosya adlarını günceller. İlk olarak, HtmlWebpackPlugin kurmak için aşağıdaki komutu çalıştırın:

 npm install --save-dev html-webpack-plugin

Ardından, HtmlWebpackPlugin web paketi yapılandırma eklentisi seçeneğine aşağıdaki gibi içe aktarmamız ve eklememiz gerekiyor:

 const HtmlWebpackPlugin = require("html-webpack-plugin");
const yol = gerektirir('yol');

modül.exports = {
  giriş: './src/index.ts',
  modül: {
    tüzük: [
      {
        test: /.ts?$/,
        kullanım: 'ts-loader',
        hariç tut: /node_modules/,
      }
    ],
  },
  çözmek: {
    uzantılar: ['.tsx', '.ts', '.js'],
  },
  çıktı: {
    dosya adı: 'bundle.js',
    yol: path.resolve(__dirname, 'dist'),
  },

  eklentiler: [
    yeni HtmlWebpackPlugin({
        başlık: 'projemiz', 
        şablon: 'src/custom.html' }) 
   ],

  devSunucu: {
    statik: path.join(__dirname, "dist"),
    sıkıştır: doğru,
    bağlantı noktası: 4000,
  },
};

Şablon, HTML sayfasına enjekte edilmek üzere HtmlWebpackPlugin tarafından oluşturulan özel bir HTML dosyasıdır. Özel HTML'yi oluşturmak için src klasörünün içinde bir custom.html dosyası oluşturun ve aşağıdaki HTML kodunu ekleyin:

 <!DOCTYPE html>
<html>
  <kafa>
    <meta karakter kümesi="utf-8" />
  </head>
  <body>
    <div class="cal">
      <merkez>
    <form><br>
      <p>Sonuç : <span id="display"></span></p>
      <input type="number" class="input" placeholder="İlk sayıyı girin" name="a" value="1" min="1" min="9" /><br>
      <input type="number" class="input" placeholder="İkinci sayıyı girin" name="b" value="1" min="1" min="9" /><br><br>
      <button type="submit" class="button">Çıkar</button>

    </form>
  </center>
  </div>
  </body>
</html>

Komut dosyasını veya bağlantı etiketlerini özel HTML'ye eklemeniz gerekmez; HtmlWebpackPlugin , paket dosyası URL'sini oluşturulan sayfaya bağlayarak bununla ilgilenecektir.

Uygulamayı üretim modunda çalıştırmak, dist klasörü içinde index.html HTML sayfasını oluşturur.

MiniCSSExtractPlugin ile CSS Paketleme

css-loader, web paketine CSS modülüyle nasıl çalışılacağını söyler. @import ve URL() 'yi import/require() olarak yorumlar ve çözer. css-loader, web paketinin tüm CSS dosyalarını derlemesini ve JavaScript formatına dönüştürmesini sağlar.

CSS dosyalarının stil yükleyici ile paketlenmesi, HTML sayfa stillerini Bundle.js tamamen yüklenene kadar yanıt vermemesine neden olur. Stil yükleyici, CSS'yi DOM'a enjekte eder, ancak stiller enjekte edilmeden önce paketlenmiş JavaScript dosyasının tamamen yüklenmesi gerekir. Bunu çözmek için MiniCssExtractPlugin kullanabiliriz.

MiniCssExtractPlugin , CSS dosyalarını ayıklar ve bunları tek bir bundle.css dosyasında toplar. Bu, CSS varlıklarınızın boyutunu küçültmek ve bunları yüklemek için gereksiz HTTP isteklerinden kaçınmak için kullanışlıdır.

Terminalde aşağıdaki komutları çalıştırarak css-loader ve MiniCssExtractPlugin kurulumunu yapabiliriz:

 npm kurulum css-loader --save-dev
npm kurulum css-minimizer-webpack-plugin --save-dev

Şimdi webpack.config.js dosyasına css-loader ve MiniCssExtractPlugin ekleyelim.

webpack.config.js dosyasının en üstünde, aşağıdaki kodu kullanarak MiniCssExtractPlugin modülünü içe aktarın:

 const MiniCssExtractPlugin = require("mini-css-extract-plugin");

Ardından, Rules özelliğine aşağıdaki gibi yeni bir rules ekleyeceğiz:

 …
{
        test: /.css$/,
        kullanın: [MiniCssExtractPlugin.loader, "css-loader"]
}
…

css-loader tüm CSS dosyalarını JavaScript'te derlediğinde, MiniCssExtractPlugin.loader CSS'yi CSS paket dosyasına yükler.

Ardından, eklenti seçeneğine MiniCssExtractPlugin aşağıdaki gibi ekleyeceğiz:

 eklentiler: [
    yeni HtmlWebpackPlugin({
        başlık: 'projemiz', // Özel bir şablon yükle (varsayılan olarak lodash)
        şablon: 'src/custom.html' }),
    yeni MiniCssExtractPlugin({
      dosya adı:"bundle.css"})
  ]

Artık css-loader ve MiniCssExtractPlugin yapılandırdığımıza göre, bir CSS dosyası oluşturalım ve onu index.ts içine aktaralım. src klasörünün içinde bir index.css dosyası oluşturun ve aşağıdaki CSS kodunu ekleyin:

 biçim {
    arka plan rengi:pembe;
    üst kenar boşluğu:100 piksel;
    sınır yarıçapı:40 piksel;
}
.cal{
    genişlik:550 piksel;
    yükseklik:300 piksel;
    sol kenar boşluğu:400 piksel;
}

.buton{
    sınır yarıçapı:10px;
    üst kenar boşluğu:20 piksel;
    kenar boşluğu-alt:20 piksel;
}
.giriş{
    sınır yarıçapı:10px;
    üst kenar boşluğu:40 piksel;
}

index.ts içinde, CSS stilini aşağıdaki gibi içe aktarın:

 içe aktarma stilleri "./index.css"

npm run build , CSS'yi paketler ve onu index.html dosyasına uygular. Tarayıcıya index.html yüklediğinizde, aşağıdaki resim gibi görünmelidir:

Dizin HTML Tarayıcısını Yükle

CSS'yi küçültme

Kullanılmayan CSS kurallarını kaldırarak ve yalnızca gerekli olanları koruyarak CSS dosyalarının boyutunu küçültmek için css-minimizer-webpack-plugin kullanabiliriz.

css-minimizer-webpack-plugin , derlenmiş CSS dosyasını analiz eder ve kullanılmayan stilleri bulur. Bu eklenti daha sonra bu kullanılmayan stilleri son CSS dosyanızdan kaldıracak ve böylece boyutunu küçültecektir.

css-minimizer-webpack-plugin kurmak için aşağıdaki kurulum komutunu çalıştırın:

 npm kurulum css-minimizer-webpack-plugin --save-dev

Web paketi yapılandırmasına css-minimizer-webpack-plugin ekleyelim. İlk olarak, eklentiyi aşağıdaki gibi içe aktarın:

 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

Ardından, web paketi yapılandırmasına aşağıdaki gibi yeni bir optimizasyon özelliği ekleyeceğiz:

 optimizasyon: {
    küçültücü: [
      yeni CssMinimizerPlugin()
    ],
  }

build komutunu çalıştırdığımızda, bundle.css küçültülecek ama bundle.js olmayacak. Varsayılan bundle.js küçültücü, ayarladığımız küçültücü seçeneğiyle geçersiz kılındı. Bunu çözmek için TerserWebpackPlugin kullanarak JavaScript'i küçültmemiz gerekiyor.

JavaScript'i küçültme

Web paketinin yazıldığı sırada geçerli olan v5.74.0 ve sonraki sürümlerinde, kutudan çıktığı için TerserWebpackPlugin yüklemeniz gerekmez. İlk önce TerserWebpackPlugin içe aktarmalıyız:

 const TerserPlugin = require("terser-webpack-plugin");

Ardından, simge durumuna küçültücü seçeneğine TerserPlugin aşağıdaki gibi ekleyin:

 optimizasyon: {
    küçültücü: [
      yeni CssMinimizerPlugin(),
     yeni TerserPlugin()
    ],
  }

build komut dosyasını çalıştırır ve dist klasöründeki paket dosyalarına bakarsanız, hem JavaScript'in hem de CSS'nin küçültülmüş olduğunu görürsünüz.

Copywebpackplugin kullanma

Web paketini, dist kullanarak uygulama varlıklarını geliştirme klasöründen derleme klasörü CopyWebpackPlugin kopyalayacak şekilde yapılandırabiliriz. Bu eklenti, resimler, videolar ve diğer varlıklar gibi dosyaları dist klasörüne kopyalayabilir.

Aşağıdaki komutu kullanarak CopyWebpackPlugin kurun:

 npm kopyala-webpack-eklenti yükleyin --save-dev

Şimdi web paketi yapılandırmasına CopyWebpackPlugin ekleyelim. Eklentiyi aşağıdaki gibi içe aktarın:

 const CopyPlugin = require("copy-webpack-plugin");

Ardından, eklenti seçeneğine CopyWebpackPlugin ekleyeceğiz. from özelliği, kopyalayacağımız klasördür ve to özelliği, tüm dosyaların kopyalanacağı dist dizinindeki klasördür:

 ...
eklentiler: [
yeni HtmlWebpackPlugin({
        başlık: 'projemiz', // Özel bir şablon yükle (varsayılan olarak lodash)
        şablon: 'src/custom.html' }),
    yeni MiniCssExtractPlugin({
      dosya adı:"bundle.css"}),
    yeni CopyPlugin({
      desenler: [
        { from: "src/img", to: "img" }
      ]
    }),
  ]

...

Kaynak harita ile hata ayıklama

build dosyalarını JavaScript dosyalarına derleyerek paketi oluşturduğumuzda, paket dosyasında hata ayıklamamız ve tarayıcımızın DevTool'unu kullanarak test etmemiz gerekebilir.

Bir tarayıcının DevTool'unda kodunuzda hata ayıklarken, yalnızca paket dosyalarının göründüğünü fark edeceksiniz. TypeScript kodumuzda bir hata olduğunda, bu yalnızca paket dosyasında belirtilir, bu da düzeltme için hataların TypeScript'e kadar izlenmesini zorlaştırır. Ancak, bir kaynak haritayla, DevTool'umuzu kullanarak TypeScript hatalarını kolayca ayıklayabiliriz:

TypeScript Hata Ayıklama Geliştirme Aracı

Kaynak haritalar orijinal kaynak dosyayı göstererek TypeScript hatalarını ayıklamamızı ve paketleri ve küçültülmüş JavaScript kodunu düzeltmemizi kolaylaştırır.

Kaynak harita .map dosyaları, hem orijinal kaynak dosyaların hem de paket dosyalarının ayrıntılarını içerir. DevTools, orijinal kaynak dosyayı paket dosyasıyla eşlemek için bu dosyayı kullanır.

Paket dosyaları için .map dosyaları oluşturmak için hem web paketini hem de TypeScript'i yapılandırmamız gerekiyor. TypeScript yapılandırma dosyasında, derleyici seçeneğine sourceMap ekleyin ve değerini true olarak ayarlayın:

 {
    "compilerOptions": {
        "noImplicitAny": doğru,
        "hedef": "ES5",
        "modül": "ES2015",
        "sourceMap": doğru
    }
}

Ardından, devtool özelliğini web paketi yapılandırmasına ekleyeceğiz ve onu true olarak ayarlayacağız, web paketine her paket dosyası için uygun bir kaynak haritası oluşturmasını söyleyeceğiz:

 modül.exports = {
  devtool: 'kaynak haritası',
   ...
}

build komutunu çalıştırdığınızda, orijinal kaynak kodunda doğrudan hata ayıklayabilirsiniz:

Hata Ayıklama Kaynak Kodu Oluşturma Aracı

Çözüm

TypeScript'in popülaritesi artmaya devam ederken, web paketi projelerini optimize etmek isteyen geliştiriciler için önemli bir seçenek haline geldi. Web paketi eklentileri ile TypeScript uygulama kaynaklarını optimize edebiliriz.

Bu eğitimde, TypeScript ile web paketi kurma sürecini adım adım anlattık. Ayrıca, web paketi eklentilerini kullanarak TypeScript uygulamalarını nasıl optimize edeceğimizi öğrendik ve bir kaynak haritasıyla TypeScript kodumuzun hatalarını ayıklamayı keşfettik.

Web paketini TypeScript ile kullanma yazısı ilk olarak LogRocket Blog'da göründü.

etiketlerETİKETLER
Üzgünüm, bu içerik için hiç etiket bulunmuyor.

Sıradaki içerik:

TypeScript ile web paketini kullanma