ECMAScript modülleri (ESM) yeni tarayıcılar için

ESM dağıtımı, ES6 tarafından tanıtılan ECMAScript modüllerini destekleyen en son tarayıcıları hedef alır.

bilgi

Modern web tarayıcıları, ECMAScript modüllerini yerel olarak içe aktarır ve bu, webpack ve diğer alternatif paketleyicilerle de uyumlu çalışır.

Node.js versiyonu ile karşılaştırıldığında, bu dağıtım Node.js ortamı dışında çalışabilmesi için polifillerle birlikte paketlenmiştir. İki gösterim mevcuttur:

• Modül desteği olan web tarayıcılarını hedefleyen Express ile bir Vanilla Javascript uygulaması.
• webpack ile paketlenmiş bir web uygulaması.

---

Kullanım

Dosyalar packages/{package}/dist/esm klasörleri içerisinde yer almaktadır. Projenize içe aktarabilir veya NPM kullanarak paketi indirebilir ve bunlara referans verebilirsiniz:

csv paketini kullanıyorsanız:

• csv

Bireysel paketleri kullanıyorsanız:

• csv-generate
• csv-parse
• csv-stringify
• stream-transform

Not: Modüllerinizi yönetmek ve yüklemek için NPM'i kullanırken, örneğin webpack içinde, şu şekilde kullanmalısınız:

import * as csv from 'csv-parse/browser/esm/index.js';
// Veya
import * as csv from 'csv-parse/browser/esm/sync.js';

---

Entegrasyon

ESM kodu, module türüne sahip bir script etiketiyle içe aktarılır:

<script type="module">
// Modüllerinizi içe aktarın ve kodunuzu ekleyin
</script>

csv paketini kullanırken, aşağıdaki içe aktarma yönergelerini kullanın:

// Akış ve geri çağırma API'leri için
import {generate, parse, transform, stringify} from '/your/path/lib/csv/index.js';
// Veya senkron API için
import {generate, parse, transform, stringify} from '/your/path/lib/csv/sync.js';

Bireysel paketleri kullanırken:

// Akış ve geri çağırma API'leri için
import {generate} from '/your/path/lib/generate/index.js';
import {parse} from '/your/path/lib/parse/index.js';
import {transform} from '/your/path/lib/transform/index.js';
import {stringify} from '/your/path/lib/stringify/index.js';
// Veya senkron API için
import {generate} from '/your/path/lib/generate/sync.js';
import {parse} from '/your/path/lib/parse/sync.js';
import {transform} from '/your/path/lib/transform/sync.js';
import {stringify} from '/your/path/lib/stringify/sync.js';

---

Vanilla JavaScript

Çalışan bir demo, demo/browser dizininde mevcuttur.

• ./esm/csv.html
• ./esm/csv_sync.html

Express ile, dosyaları şu şekilde yayınlayın:

const app = express();
app.use('/lib/csv/',
  express.static(`node_modules/csv/dist/esm/`));
app.listen(3000);

HTML kodu şu şekilde görünür:

<script type="module">
  import {transform} from '/lib/csv/index.js';
  transform(input, handler, options, (err, data) => {
    console.info(data);
  });
</script>

Eğer senkron API'yi kullanmak istiyorsanız, şunu kullanın:

<script type="module">
  import {transform} from '/lib/csv/sync.js';
  const data = transform(input, handler, options);
</script>

---

Webpack modül paketleyici

Bu dağıtım, webpack sürüm 5 ile uyumludur. Node.js polifilleri ile birlikte gelir. Proje deposunda çalışan bir demo paylaşılmıştır.

Modülünüzde, uygun csv modülünü içe aktarın:

import * as csv from 'csv-parse/browser/esm/index.js';
// Veya
import * as csv from 'csv-parse/browser/esm/sync.js';

İlgili webpack konfigürasyonu şu şekilde görünür:

embed:demo/webpack/webpack.config.js{snippet: "csv"}