Webpack z kanciastymi 1.x i ES5

Question

Po przeczytaniu setek linii o browserify vs webpack i kilku z nich zdecydowałem się przejść do webpacka. Głównym powodem jest to, ponieważ podobał mi się pomysł łączenia wszystkiego w plik js.

Mam już działający projekt kątowy i chcę go zreorganizować na potrzeby pakietu internetowego. Problem? Mój projekt używa kątowego 1.4.7, ng-animate i zwykłego javascript (ES5), a wszystkie samouczki i podręczniki dotyczą ES6. Nie chcę tak bardzo modyfikować mojego projektu. Jaka jest droga? Chciałbym podać przykład każdego modułu kątowego: fabryka, dyrektywa, kontroler i tak dalej. Wielkie dzięki

Answer 1

Zwykle mam plik feature.module.js, który ma moją definicję modułu i wymaga wszystkich dyrektyw/usług zawartych w module. Ma również zewnętrzne zaległości.

/* 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

staram się to zrobić:

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() { 

} 

Mój pomysł to niech wszystkie moduły podrzędne obsługiwać własną konfigurację, tak deklarując config lub constant, factories lub providers. Pozwólmy, by to się zaczęło bańką do app.js. Oznacza to, że naprawdę łatwo jest usunąć folder ze swojej struktury, ponieważ jest to usunięcie jednego wiersza z jego modułu nadrzędnego.

Dzięki temu ścieżki do plików są dużo krótsze i łatwiejsze w obsłudze.

Answer 3

Mam teraz do czynienia z tym samym problemem. I znalazłem coś, co działa (praca w toku, ale przynajmniej widzę postęp). Moje kroki:

1. Install yeoman
2. Uruchom this angular-webpack generator. Wybierz „ES5” pytany (druga opcja jest „ES2015”, które myślę, że jest taki sam, że „ES6”)
3. Zacznij zmieniająca automatycznie wygenerowany boilerplate z Kątowymi kodu

Tak, trzeba jeszcze aby dowiedzieć się więcej o łyku i sassie, ale przynajmniej możesz uruchomić prostą aplikację AngularJS przy użyciu starej składni ES5 i zacząć ją modyfikować.

Prawdopodobnie bloguję na ten temat. Tak więc zaktualizuję tę odpowiedź.