Was ist der Zweck der esm Verzeichnisse in den Angular 2 Modulen?

Question

ich mit Angular2 RC4 arbeite:

"@angular/common": "2.0.0-rc.4", 
    "@angular/compiler": "2.0.0-rc.4", 
    "@angular/core": "2.0.0-rc.4", 
    "@angular/forms": "0.2.0", 
    "@angular/http": "2.0.0-rc.4", 
    "@angular/platform-browser": "2.0.0-rc.4", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.4", 
    "@angular/router": "3.0.0-beta.2", 
    "@angular/upgrade": "2.0.0-rc.4", 

und ich bin mit JetBrains IntelliJ IDEA 2016,2. Wenn ich auf Angular2-Direktiven referenziere, bietet die IDE hilfreich an, das Paket zu importieren, in dem die Direktive definiert ist. Leider findet die IDE mehrere Definitionen der Direktiven, was bedeutet, dass ich aus einer Liste den richtigen auswählen muss. Gelegentlich wähle ich die "falsche" und es kommt zu einer großen Anzahl von Kompilierungsfehlern. Wie ich erfahren habe, ist das falsche Paket immer/normalerweise dasjenige in einem Angular2-Distributionsverzeichnis, das einen esm Unterordner enthält.

Bei näherer Betrachtung eines esm Ordners ist es Inhalte zu imitieren, die die der Geschwister src Ordner (zum Beispiel):

@angular 
    common 
    + esm 
    + src 
     + directives 
     + facade 
     + form-deprecated 
     + location 
     + pipes 
     common_directives.d.ts 
     common_directives.js 
     common_directives.js.map 
     common_directives.metadata.json 
     directives.d.ts 
     ... 
     pipes.js 
     pipes.js.map 
    + src 
    + directives 
    + facade 
    + form-deprecated 
    + location 
    + pipes 
     common_directives.d.ts 
     common_directives.js 
     common_directives.js.map 
     common_directives.metadata.json 
     directives.d.ts 
     ... 
     pipes.js 
     pipes.js.map 

Frage 1: Was ist der Zweck der esm Verzeichnisse ist und warum sie zur Verfügung gestellt werden in der Verteilung?

Frage 2: Als Angular2-Anwendungsentwickler brauche ich die Dateien in diesen Verzeichnissen?

Frage 3: Wenn "Nein" zu Frage 2 kann ich sicher diese aus meinem Projekt entfernen und/oder gibt es eine Möglichkeit, IntelliJ IDEA 2016.2 diese Ordner zu ignorieren?

Answer 1

Frage 1: (oder ES6) -Modul Syntax Die esm Ordner enthält die Bibliothek in reiner ES2015 geschrieben. Es gibt zwei Hauptgemeinschaftsgeschmacksrichtungen von Modul in JavaScript-Land, AMD und CommonJS, aber ES2015-Modul ist das erste Mal, dass eine Modul-Syntax tatsächlich Teil der Sprache ist. In ES6-Modulen geschriebener Code ist zukunftssicher: Die Syntax ist schöner, zyklische Abhängigkeiten werden unterstützt und Module exportieren Bindungen statt Werte. ES2015-Modul ist effizienter als die anderen Formate und kann die Erstellung kleinerer Bündelgröße bis Baumschüttel-Technik erleichtern, d. H. Importieren nur der Bits, die Sie benötigen, anstatt das Ganze zu importieren. Die Community hat bereits Tools entwickelt, die das ES2015-Modul nutzen. Zum Beispiel ist die rollup.js-Bibliothek ein JavaScript-Modul-Bundler, der die Baumschüttel-Technik verwendet, um kleinere Bündel zu erzeugen.

Warum hat das Angular-Team also die esm-Distribution eingeschlossen? Nun, obwohl die Browser die ES2015-Syntax heutzutage nicht vollständig unterstützen, können Sie Tools wie rollup.js verwenden, um die ES2015-Modul-Syntax voll auszunutzen, um ein Super-Lean-Paket Ihrer Anwendung zu erstellen.

Frage 2: Wie ich schon sagte, können Sie (oder müssen), verwenden Sie das esm Verzeichnis ein kleineres Bündel von Ihrer Anwendung mit rollup.js Bibliothek zum Beispiel zu erzeugen.

Frage 3: Sie müssen nichts entfernen. esm Verzeichnis ist Ihr bester Freund, wenn Sie ein Bündel Ihrer Anwendung für die Produktion generieren müssen.

Eine ausgezeichnete Referenz für alle ist die rollup.js wiki page. Schau mal.

Sie können auch den ausgezeichneten Artikel Building and Angular 2 Application for Production lesen, der zeigt, wie man rollup.js und Tree-Shaking verwendet.

** Bonus **: Wenn Sie eine package.json einer Bibliothek überprüfen, können Sie sehen, ob sie eine ES2015-Version enthält. Suchen Sie einfach nach der jsnext:main Eigenschaft. Für weitere Details können Sie die rollup - jsnext:main Dokumentation lesen.