Rollup commonjs

Question

Ich arbeite an einem Angular2-Projekt. Ich ging durch Angular2 aot Dokumente und ich konnte ngFactory Dateien erzeugen. Ich habe Rollup js wie in den Dokumenten vorgeschlagen verwendet. Ich habe einige non-es6 npm-Pakete. Ich habe benötigt, um die Nicht-es6-Pakete zu laden.

Die Dokumentation (angular2 und rollup) schlägt vor, das Rollup-Plugin-commonjs zum Bündeln der Nicht-es6-Module zu verwenden. Im Folgenden ist meine Rollup-Konfiguration.

export default { 
 
    entry: 'scripts/main.js', 
 
    dest: 'build/app.js', // output a single application bundle 
 
    sourceMap: true, 
 
    format: 'iife', 
 
    context: 'this', 
 
    plugins: [ 
 

 
     nodeResolve(
 
      { 
 
       jsnext: true, 
 
       module: true, 
 
      } 
 
     ), 
 
     commonjs({ 
 
      include: 'node_modules/**/**', 
 
     }) , 
 

 
     uglify() 
 
    ] 
 
}

Ich habe das Commonjs Plugin vorhanden. Aber immer noch sind die Browserfehler als 'erforderlich' undefiniert '. Wie kann ich die Nicht-es6-Module ohne die Hilfe von bündeln? Webpack/browserify Bitte beraten.

Answer 1

Das Setup, das ich derzeit verwende, teilt Vendor/App-Dateien in separate Bundles. Ich habe noch nicht untersucht, ob ich diese noch mit AoT arbeiten kann, was ein Problem sein könnte, aber ich habe commonjs-Module, die mit dieser Methode arbeiten.

Es hat die Entwicklung beschleunigt, um nur mein App-Paket zum Testen zu erstellen (ich hatte Probleme mit Webpack und 20s Build-Zeiten).

In einer vendor.ts Datei (Mine ist in das gleiche Verzeichnis wie die main.ts Datei) Ich so etwas wie die folgenden haben:

import * as _leaflet from 'leaflet/dist/leaflet'; //leaflet is installed via npm in this case. 
... 
export default { 
    ... 
    _leaflet 
}; 

Und eine vendor.rollup.js Datei, die die Commonjs verwendet plugin like:

commonjs({ 
    include: [ 
     helpers.root('node_modules', '**') //This is just a method to make an absolute path to node_modules. See Angular 2 webpack docs for that. 
    ] 
}) 

Welche erstellt ein Anbieterbündel.

Dann in meiner app.rollup.js (Konfigurationsdatei, um mein App-Bundle zu erstellen).

export default { 
    entry: 'src/main.ts', 
    dest: 'bundles/app.js', 
    format: 'iife', 
    sourceMap: true, 
    moduleName: 'app', 
    plugins: [ 
     ... 
    ], 
    external: [ 
     'leaflet/leaflet' //Yeah, you can rename it to have nicer looking imports. 
    ], 
    globals: { 
     ... 
     'leaflet/leaflet': 'vendor._leaflet' //And map it to the correct global var here. 
    } 
}; 

Und schließlich in meiner Anwendung kann ich

import * as L from 'leaflet/leaflet';

Erinnerung verwenden: Ich habe nicht versucht mit AoT Kompilierung oder Produktionscode noch ein Schritt zu einer Zeit.