Bölüm 2: Parsel ile Modül Paketleme

Faydalı Alternatif Metin Yazma

Parsel için bir “sıfır yapılandırma” alternatifi olduğunu iddia ediyor Web paketi, popüler bir Javascript modülü paketleyici. Modül paketleyici, ayrı, yeniden kullanılabilir JS dosyalarını (veya modüllerini) alır ve bunları tarayıcıya sunulmak üzere tek bir dosyada “paketler” ve aynı zamanda çıktıyı küçültür. Bu, tarayıcının bir grup dosyayı tek tek yüklemesi gerekmediğinden, web sitesi performansını iyileştirebilir. Bu kendi içinde çok faydalıdır, ancak Parsel ayrıca bizim için kutunun dışında aşağıdakiler de dahil olmak üzere diğer görevleri de üstlenir:

  • Yerel bir sunucu çalıştırma
  • HTML, CSS ve varlıkları oluşturma ve küçültme
  • Javascript’i Aktarma
  • Canlı yeniden yükleme
  • Kod bölme

Parsel’i kullanarak, daha önce yaptığımız her şeyi yapabiliriz. önceki eğitim (ve çok daha fazlası!), daha az komut dosyası yazarken.

Parsel projesi oluşturma

Bir önceki makaledekine benzer yeni bir proje yapısı oluşturalım:

my-awesome-project
  src
    icons
    images
    js
    scss
    index.html
  node_modules
  package.json

(Bu sefer herhangi bir HTML dosyasını dosyaya ekliyorum. kaynak dizin, çünkü projeyi oluşturduğumuzda onlar da derlenecekler.)

Parcel’i bir bağımlılık olarak kurarak başlayacağız ve ayrıca yükleyeceğiz düğüm-sass biz hazırken (aynı anda yüklemek için birden fazla paket listelenebilir):

npm install parcel-bundler node-sass --save-dev

(Yeni bir proje oluşturuyorsanız, çalıştırmayı unutmayın npm init ilk.)

Stil sayfamızın dosya yolunu değiştirmemiz gerekecek. index.html. Parsel’e yalnızca kaynak dosyamızın göreli yolunu söylememiz gerekiyor, çünkü üretimde kullanım için gerçek yol, derleme zamanında Parsel tarafından oluşturulacaktır.

<link rel="stylesheet" href="./scss/styles.scss" />

Parsel, projemizi çalıştırmak ve inşa etmek için ihtiyacımız olan tüm komutlarla birlikte gelir. Basitçe koşmak parcel artı bizim yolumuz index.html projeyi çalıştırmak ve değişiklikleri izlemek için dosya yeterlidir:

parcel src/index.html

Ayrıca (isteğe bağlı olarak) Parcel’e hangi bağlantı noktasının kullanılacağını söyleyebilir ve web sitemizi her başlattığımızda yeni bir tarayıcı sekmesinde açmasını isteyebiliriz. Aşağıdaki komut, 3000 numaralı bağlantı noktasını kullanmasını ve --open bayrak yeni bir sekmede açılacaktır:

parcel src/index.html -p 3000 --open

Bu, projeyi her çalıştırmak istediğimizde yazmak için çok fazla, bu yüzden bunun için bir NPM betiği yazmayı seviyorum:

"scripts": {
"start": "parcel src/index.html -p 3000 --open",
}

Şimdi sadece yazmamız gerekiyor npm start.

Parselin komutlarından ikincisi, üretim için web sitesini oluşturur:

parcel build src/index.html

Yine, bu komutu yürütmek için de bir komut dosyası yazabiliriz:

"scripts": {
"start": "parcel src/index.html -p 3000 --open",
"build": "parcel build src/index.html"
}

parsel build komut, tüm varlıkları bir uzak klasör, ancak her çalıştırıldığında klasörü temizlemez, böylece yinelenen dosyalar elde edebilirsiniz. Bir üretim derlemesini çalıştırmadan önce bir temizleme komutu çalıştırmayı seviyorum, böylece yerleşik dosyaların yalnızca yerleşik olduğundan emin olabiliriz. uzak dizin projemiz için gerekli olanlardır.

"scripts": {
"start": "parcel src/index.html -p 3000 --open",
"clean": "rm -rf dist/*",
"build:parcel": "parcel build src/index.html",
"build": "npm run clean && npm run build:parcel",
}

Komut dosyalarımızda birkaç küçük değişiklik yaptım:

  1. “Temiz” komut dosyası, içindeki her şeyi kaldırır. uzak dosya
  2. Önceki “build” komut dosyasını “build:parcel” olarak yeniden adlandırdım.
  3. Şimdi build komutu, “temiz” komut dosyasını ve ardından “build:parcel” komut dosyasını çalıştırır.

Şimdi devam et ve koş npm start. Parsel, sitenizi tarayıcıda şu adreste açmalıdır: https://localhost:3000 ve SCSS veya HTML’nizde herhangi bir değişiklik yaptığınızda sayfayı yeniden yükleyin. Browsersync’e ihtiyacımız yok ve herhangi bir ek komut dosyası yazmamız gerekmiyor.

Eklenti ekleme

Görüntüleri optimize etmek ve SVG hareketli grafikleri oluşturmak için (kendileri NPM paketleri olan) eklentiler ekleyebiliriz:

npm install parcel-plugin-imagemin parcel-plugin-svg-sprite

İçin parsel-eklenti-imagemin paketin yürürlüğe girmesi için bir yapılandırma dosyası eklememiz gerekiyor. adlı bir dosyaya aşağıdakini ekleyin imagemin.config.js proje kökünde:

module.exports = {
gifsicle: { optimizationLevel: 2, interlaced: false, colors: 10 },
jpegtran: { progressive: true, arithmetic: false },
pngquant: { quality: [0.25, 0.5] },
svgo: {
plugins: [{ removeViewBox: false }, { cleanupIDs: true }],
},
webp: { quality: 10 },
}

İstediğiniz seviye optimizasyonu için seçenekleri ayarlayabilirsiniz (eklentinin belgelerine bakın). parsel-eklenti-svg-sprite kutudan çıktığı gibi çalışmalı – projeyi çalıştırın ve bazı SVG simgeleri eklemeyi deneyin. kaynak/simgeler dizin. Daha sonra bunlardan herhangi birini HTML’nizde SVG ile kullanabilmelisiniz. <use> eleman:

<svg>
<use href="icons/my-icon.svg">
</svg>

aktarma

JS’mi ES2015 sözdizimini kullanarak yazmayı seviyorum. Babil, bir aktarıcı, modern Javascript’i eski tarayıcılar tarafından okunabilen bir sözdizimine dönüştürür – yani en son JS kodunu yazabilir ve her yerde çalışmasını sağlayabilirsiniz. Bu, bir proje başlatıcıya dahil etmek için oldukça faydalı bir şey.

Babel’in birçok farklı eklentisi ve yapılandırma seçeneği var ve bunlar arasında gezinmek biraz göz korkutucu gelebilir. Ama adında kullanışlı bir paket var. ön ayar ortamı ES2015’in tüm özelliklerini (ok fonksiyonlarını, yok etme, yayma operatörlerini düşünün) dönüştürmeyi önemseyen bu, bana çok yakışıyor, hadi onu yükleyelim.

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

Babel’i özel ihtiyaçlarınıza uyacak şekilde yapılandırmak istiyorsanız (örneğin React, Vue veya başka bir çerçeve kullanıyorsanız) başka eklentiler ekleyebilirsiniz.

Şimdi proje köküne bir yapılandırma dosyası eklememiz gerekiyor:

touch .babelrc

Varsayılan yapılandırma seçeneklerini kullanmaktan memnunsak, yapılandırma dosyamıza fazla bir şey eklememize gerek yok. Aşağıdakiler yeterli olacaktır:

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

Babel belgelerinde şu konularda daha fazla bilgi var: yapılandırma seçenekleri ihtiyacın olursa.

Parsel, Babel’i bizim için otomatik olarak çalıştırır, bu yüzden onu kurduktan ve yapılandırma dosyamızı oluşturduğumuzda, gitmeye hazırız – her çalıştırdığımızda kodumuz aktarılacaktır npm run build.

Örnek

ben yarattım başlangıç ​​deposu Bu makaledekiyle aynı işlemi kullanarak – klonlamaktan veya çatallamaktan çekinmeyin ve projeleriniz için kullanın.

geliyor

Şimdiye kadar bu seride, NPM betiklerini kullanarak çok basit bir proje için nasıl bir başlatıcı oluşturulacağını gördük ve daha karmaşık görevleri minimal konfigürasyonla ele almak için Parsel’in nasıl kullanılacağını öğrendik. Üçüncü makalede, yazma stilleriyle hızlı bir şekilde çalışmaya başlamamıza yardımcı olacak basit bir Sass mimarisi ekleyeceğiz.

Bu serideki diğer makalelere bakın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.