Webpack mit eckigen 1.x und ES5

Question

Nachdem ich Hunderte von Zeilen über browserify vs webpack und einige wie zu beiden gelesen habe, entschied ich mich für webpack zu gehen. Der Hauptgrund dafür ist, dass mir die Idee gefiel, alles in eine js-Datei zu bündeln.

Ich habe ein eckiges Projekt bereits funktioniert und ich möchte es für Webpack umgestalten. Das Problem? Mein Projekt verwendet angulares 1.4.7, ng-animiertes und normales Javascript (ES5) und alle Tutorials und Handbücher sind für ES6. Ich möchte mein Projekt nicht so sehr umgestalten. Wie soll es gehen? Ich möchte ein Beispiel für jedes Winkelmodul: Fabrik, Richtlinie, Controller und so weiter. Vielen Dank

Answer 1

Ich habe normalerweise eine Datei feature.module.js, die meine Moduldefinition hat und alle Direktiven/Dienste innerhalb des Moduls benötigt. Hat auch die externen Abhängigkeiten.

/* module.js */ 
 
angular.module('my.module',['dependancy1', 'dependancy2']); 
 

 
//External libraries 
 
require('./dependancy1.module.js'); 
 
require('./dependancy2.module.js'); 
 

 
//Internal components 
 
require('./thing.directive'); 
 
require('./thing.service'; 
 

 
 
/* service.js */ 
 
angular.module('my.module') 
 
    .directive('yourDir', function myDir(){...}); 
 
              
 
             

Answer 2

Ich neige dazu, dies zu tun:

app.js:

require('/any/angular/deps'); 
var subModule = require('/some/sub/module'); 

var app = angular.module('myApp', []); 

// pass the app module in sub modules to allow them to define their own config 
subModule.configure(app); 

/subModule/module.js:

var someSubDirective = require('./subDir/directive'); 

export function configure(app) { 

    someSubDirective.configure(app); 

} 

/subModule/subDir/directive.js:

export function configure(app) { 
    app.directive('myDir', myDir); 
} 

function myDir() { 

} 

Meine Idee alle Untermodule behandeln ihre eigene Konfiguration, erklärt config oder constant, factories oder providers so zu lassen ist. Lassen Sie das dann auf die app.js platzen. Dies bedeutet, dass es sehr einfach ist, einen Ordner aus Ihrer Struktur zu löschen, da es nur eine Zeile entfernt vom übergeordneten Modul ist.

Dies macht auch relevante Dateipfade viel kürzer und einfacher zu handhaben.

Answer 3

Ich habe jetzt das gleiche Problem. Und ich habe etwas gefunden, das funktioniert (work in progress, aber zumindest kann ich Fortschritte sehen). Meine Schritte:

1. Installieren yeoman
2. Run this angular-webpack generator. Wählen Sie ‚ES5‘ wenn Sie gefragt werden (die andere Option ist ‚ES2015‘, was ich denke, ist das gleiche, dass ‚ES6‘)
3. Starten Sie den automatisch generierten Textvorschlag mit Angular Code

Modifizieren Ja, Sie müssen noch um etwas über Schluck und Sass zu erfahren, aber zumindest kannst du eine einfache AngularJS-App mit der alten ES5-Syntax ausführen und anfangen, sie zu ändern.

Ich blogge wahrscheinlich darüber. Also, ich werde diese Antwort dann aktualisieren.