javascript - Hvordan og når brukes esm5- og esm2015-katalogene i en "ng build"-generert lib-mappe?


I mappen generert av ng build simple-lib, ser jeg en mer kompleks struktur enn mine andre node-moduler. I stedet for en index.js som eksporterer og importerer andre medlemmer, ser jeg bundles, esm2015, esm5 og public_api.d.ts.

Jeg ser de kompilerte versjonene av simple-lib i både esm5- og esm2015-mappene. Jeg lurer på hvordan esm .js-filene brukes, og når esm2015 ville bli brukt i stedet for esm5. Så vidt jeg forstår, tillater esm2015 mindre pakker og tree-shaking, men jeg er ikke sikker på når valget om hvilket modul som skal brukes blir tatt. Jeg håper å generere et bibliotek som jeg kan bruke i et Node-prosjekt, og all hjelp til å forstå om og hvordan det vil være mulig vil bli satt pris på. Takk.

tree simple-lib/
simple-lib/
├── bundles
│   ├── simple-lib.umd.js
│   ├── simple-lib.umd.js.map
│   ├── simple-lib.umd.min.js
│   └── simple-lib.umd.min.js.map
├── esm2015
│   ├── lib
│   │   ├── simple-lib.component.js
│   │   ├── simple-lib.module.js
│   │   └── simple-lib.service.js
│   ├── public_api.js
│   └── simple-lib.js
├── esm5
│   ├── lib
│   │   ├── simple-lib.component.js
│   │   ├── simple-lib.module.js
│   │   └── simple-lib.service.js
│   ├── public_api.js
│   └── simple-lib.js
├── fesm2015
│   ├── simple-lib.js
│   └── simple-lib.js.map
├── fesm5
│   ├── simple-lib.js
│   └── simple-lib.js.map
├── lib
│   ├── simple-lib.component.d.ts
│   ├── simple-lib.module.d.ts
│   └── simple-lib.service.d.ts
├── package.json
├── public_api.d.ts
├── simple-lib.d.ts
└── simple-lib.metadata.json

Svar #1

Mens jeg oppdaterte min Angular-versjon, tror jeg at jeg kan ha funnet svaret. Biblioteket som vil bli brukt er avhengig av nettleseren som etterspør applikasjonen - esm5-versjonen vil bli brukt for eldre nettlesere som krever flere polyfills, og esm2015-bibliotekene vil bli brukt for nyere nettlesere som krever færre polyfills

"CLI-ens build-kommando lager nå automatisk en moderne ES2015-build med minimale polyfills og en kompatibel ES5-build for eldre nettlesere, og laster riktig fil basert på nettleseren. Du kan velge å ikke bruke denne endringen ved å sette mål tilbake til es5 i tsconfig.json-filen din. Lær mer på angular.io."

Fra https://update.angular.io/#7.1:9.0

Svar #2

I henhold til spesifikasjonene for «Angular Package Format» -

I dagens JavaScript-landskap vil utviklere bruke pakker på mange forskjellige måter. For eksempel kan noen bruke SystemJS, andre kan bruke Webpack. Andre igjen kan bruke pakker i Node eller kanskje i nettleseren som en UMD-pakke eller gjennom tilgang via globale variabler.

Les mer fra denne lenken - https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview

Relaterte artikler