Köşeli 1.x ve ES5 ile Webpack

Question

Web tarayıcısına karşı tarayıcıda yüzlerce satır okuduktan ve her ikisi de web paketi için gitmeye karar verdim. Bunun ana sebebi, her şeyi bir js dosyasına yerleştirme fikrini beğendim.

Halihazırda çalıştığım açısal bir projem var ve bunu web paketi için yeniden düzenlemek istiyorum. Sorun? Projem açısal 1.4.7, ng-animate ve düz javascript (ES5) kullanıyor ve tüm dersler ve kılavuzlar ES6 içindir. Projemi o kadar çok tekrar etmek istemiyorum. Gitmenin yolu nedir? Her bir açısal modülün bir örneğini istiyorum: fabrika, yönerge, denetleyici vb. Çok teşekkürler

Answer 1

Genellikle, modül tanımımı içeren ve modülde yer alan tüm yönergeleri/hizmetleri gerektiren bir feature.module.js dosyasına sahibim. Ayrıca dış bağımlılıklar da var.

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

Answer 2

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

bunu yapmak eğilimindedir:

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

} 

Benim fikrim tüm alt modüller öylesine config veya constant, factories veya providers ilan kendi yapılandırmasını halledeyim etmektir. Bunu daha sonra app.js. Bu, bir klasörü kendi yapınızdan silmek için gerçekten kolay olduğu anlamına gelir, çünkü ana modülünden bir satır kaldırmadır. Bu, ilgili dosya yollarının da daha kısa ve daha kolay işlenmesini sağlar.

Answer 3

Şimdi aynı sorunla uğraşıyorum. Ve işe yarayan bir şey buldum (devam eden çalışmalar, ama en azından ilerlemeyi görebiliyorum). Benim adımlar:

1. yeoman
2. Çalıştır this angular-webpack generator yükleyin. sorulduğunda 'ES5' seçiniz (Diğer seçenek aynı olduğunu tahmin 'ES2015' olduğu 'ES6' o) sizin Eğik kodu ile otomatik olarak oluşturulan klişe değiştirerek
3. Başlat

Evet, hala ihtiyaç gulp ve sass hakkında bilgi edinmek için, ama en azından eski ES5 sözdizimini kullanarak basit bir AngularJS uygulamasını çalıştırabilir ve değiştirmeye başlayabilirsiniz.

Muhtemelen bu konu hakkında blog yapıyorum. Öyleyse, bu cevabı güncelleyeceğim.