WebPack Dev Sunucu + Ekspres Web Sunucusu

Question

sorun aynı anda aşağıdaki görevlerden ikisi yapacak bir gelişme iş akışını ayarlama yaşıyorum:

1. yeniden derleyin statik varlıkları (js, css) dosyası değişikliği. Bu statik varlıkları sunun. Varlıklar değiştirildiğinde sayfanın yeniden yüklenmesi gerektiğini tarayıcıya bildirin. Reaksiyonlu sıcak yükleyici kullanın.
2. Statik varlıkların "tüketeceği" bir API'ye hizmet veren bir sunucuyu çalıştırmak için express kullanın. Sunucu dosyam değiştiğinde bu hızlı sunucunun yeniden başlatılmasını sağlayın.

Webpack-dev sunucusunun statik varlıklara sahip olması ve ayrı bir web sunucusunun farklı bir bağlantı noktasında API'ye hizmet vermesi için en iyi uygulama hangisidir? Öyleyse, javascript API çağrıları, ana bilgisayar ve bağlantı noktasını belirtmeli ve üretime geçmeden önce değiştirilmesi gerekir. Tüm öğreticilerin çevrimiçi ortamda odaklandığı görülüyor ve bir API sunucusu kurmuyor. Beni doğru yönde işaret eden var mı?

Webpack yerine gulp ve browserify veya SystemJS kullanmama karşı değilim, ancak reaksiyona sıcak yükleyici kullanmak istersem webpack kullanmam gerekiyor.

Answer 1

Geçtiğimiz yıl gulp + webpack kullanıyoruz ve harika geçti. Yalnızca bir statik html dosyası (index.html) sunan bir API Ağ Geçidine sahibiz ve diğer her şey sadece REST uç noktalarıdır. Daha sonra index.html dosyasında CDN (Cloudfront) 'dan yüklenen bir css dosyası ya da iki ve bir çift betiğe başvururuz.

Bu şekilde üretimde çalışırsanız, yerel kurulumunuzun webpack dev sunucusunu "yerel CDN" olarak kullanması yeterlidir. Haklısınız, javascript'in api url'nin ne olduğunu bilmesi gerekir, çünkü bu, yerel üretime göre değişecektir. Aslında, yerel, dev, sahne ve prodüksiyon var - bir kez 2 ortalıkta çalışmak için kurulum yaptıktan sonra daha fazla eklemek zor değil (bu iyi!)

Şimdi bizim index.html dolu şablon değişkenleri var. API Ağ Geçidi tarafından hizmet verdiği zaman. senin uygulaması başlatılırken ve herhangi API/cdn çağrılarına bu değişkenleri prepend edilir tepki verdiğinde

<script> 
    var siteConfig = { 
    apiBase: '<%=apiBaseUri%>', 
    cdnBase: '<%=cdnBaseUri%>' 
    }; 
</script> 
<script src="<%=cdnBaseUri%>/assets/js/bundle.min.js"></script> 

Sonra sadece siteConfig çekmek: Buna benzer. Değişkenlerinizi ortamınıza bağlı olarak değiştirin ve işiniz bitti!

Sayfa sunulduğunda bu varsayı doldurmak yerine biraz daha basit bir yaklaşım yapmak yerine inşa edebilirsiniz. Nasıl başladığımıza göre, işler evrimleştikçe çalışma zamanında yönetilmesi daha kolay oldu.

BTW, bu sadece webpack kullanarak tüm yapabileceğiniz eminim - vb

Answer 2

yudum muhtemelen gerekli değil ama tüylenme, birim testlerinin çalıştırılmasında yudum kullanmak zamanda bizim için daha kolaydı

böyle bir şey yapabilirsiniz:

• oluştur webpack-dev-sunucu
• Bağlantı ekspres() vekil
• oluşturma mutlak url
• Başlat bot ile varlıklar h sunucuları.

Not: Her iki sunucuyu da çalıştırmak için farklı bağlantı noktalarına sahip olduğunuzdan emin olun.

var proxy = require('proxy-middleware'); 
var express = require('express'); 
var url = require('url'); 

//----------------- Web Proxy-------------------- 
var app = express(); 
app.use('/assets', proxy(url.parse('http://localhost:8000/dist/assets'))); 
app.get('/api/url', function(req, res) {} 
app.post('/api/url', function(req, res) {} 

// ---------------Webpack-dev-server--------------------- 
var server = new WebpackDevServer(webpack(config), config.devServer); 

// ---------------Run both servers----------------------- 
server.listen(config.port, 'localhost', function(err) {}); 
app.listen(8080);