Tarayıcıda hata ayıklamaya izin vermek için web paketini yapılandırın

131

Webpack'te yeniyim ve mevcut bir web uygulamasını kullanmak için dönüştürüyorum.

JS'mi paketlemek ve küçültmek için webpack kullanıyorum, bu da konuşlandırıldığında harika, ancak bu, geliştirme sırasında hata ayıklamayı çok zorlaştırıyor.

Genellikle, JS sorunlarını ayıklamak için Chrome'un yerleşik hata ayıklayıcısını kullanırım. (Veya firefox'ta Firebug). Ancak webpack ile her şey tek bir dosyada doldurulur ve bu mekanizmayı kullanarak hata ayıklamak zorlaşır.

Paketlemeyi hızlı bir şekilde açıp kapatmanın bir yolu var mı? veya küçültmeyi açıp kapatır mısınız?

Bazı komut dosyası yükleyici yapılandırması veya başka bir ayar olup olmadığını görmek için baktım, ancak açık görünmüyor.

Her şeyi bir modül gibi davranacak ve kullanım gerektirecek şekilde dönüştürmek için henüz zamanım olmadı. Bu yüzden yüklemem için sadece require ("script! ./ file.js") kalıbı kullanıyorum.

javascript webpack

— Jim
kaynak

3

Bu soruna bir çözüm buldunuz mu? Ayrıca mevcut değişkenlere bakmak için JS konsolunu kullanmayı tercih ediyorum. Benim ana sorunum, web paketinin tüm bu değişkenleri modül içinde

— gizlemesi

2

Asla bir çözüm bulamadık, bu yüzden maalesef web paketini kullanmayı bıraktık.

— Jim

Şimdi ne kullanıyorsun Web paketi yazarken hala bulabildiğim en popüler derleme aracı gibi görünüyor.

— Richard

101

Kaynak kodunuz ile paketlenmiş / küçültülmüş kod arasındaki eşlemeyi korumak için kaynak haritalarını kullanabilirsiniz .

Webpack , geliştirici aracında hata ayıklamayı geliştirmek için devtool seçeneği sağlar, sadece sizin için paketlenmiş dosyanın bir kaynak haritasını oluşturur. Bu seçenek komut satırından veya webpack.config.js yapılandırma dosyanızda kullanılabilir.

Aşağıda , oluşturulan kaynak harita dosyası ( bundle.js.map ) ile birlikte paketlenmiş dosyayı ( bundle.js ) oluşturmak için komut satırını kullanarak hazırlanmış bir örnek bulabilirsiniz .

$ webpack --devtool source-map ./entry.js bundle.js
Hash: b13b8d9e3292806f8563
Version: webpack 1.12.2
Time: 90ms
        Asset     Size  Chunks             Chunk Names
    bundle.js  1.74 kB       0  [emitted]  main
bundle.js.map  1.89 kB       0  [emitted]  main
   [0] ./entry.js 85 bytes {0} [built]
   [1] ./hello.js 59 bytes {0} [built]

index.html

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

entry.js

var hello = require('./hello.js');
document.body.innerHTML += 'It works ' + hello();

hello.js

module.exports = function () {
  return 'Hello world!';
};

Tarayıcınızda index.html'yi açarsanız (Chrome kullanıyorum ancak diğer tarayıcılarda da desteklendiğini düşünüyorum), Kaynaklar sekmesinde paketlenmiş dosyanın file: // şeması ve altındaki kaynak dosyalarında olduğunu göreceksiniz. özel web paketi: // düzeni.

Ve evet, orijinal kaynak kodunuz varmış gibi hata ayıklamaya başlayabilirsiniz! Tek satıra bir kesme noktası koymayı ve sayfayı yenilemeyi deneyin.

— dreyescat
kaynak

2

bundle.map js dosyasını işaret ediyor ama ya gerçek js dosyasının da tsx veya ts diyelim için bir haritası varsa?

— Andrej Kovacik

4

Projenizi üretim ve geliştirme modunu kullanarak kurmanın daha iyi olacağını düşünüyorum https://webpack.js.org/guides/production/ Ayrıca hata ayıklamak için kodunuzu nasıl eşleyeceğinizi de içerir

devtool: 'inline-source-map'

— m-farhan
kaynak

3

Daha önce de belirtildiği gibi kaynak haritaları çok kullanışlıdır.
Ancak bazen hangi kaynak haritanın kullanılacağını seçmek zor olabilir.

Web paketi kaynak eşleme sorunlarından biri hakkındaki bu yorum , gereksinimlere göre hangi kaynak haritasının kullanılacağını seçmede yardımcı olabilir.

— Abhinav Singi
kaynak

1

Buraya bir göz atın

javascript'i küçülten bir güzelleştirici. altta, tarayıcılar için çeşitli eklentilerin ve uzantıların bir listesi var, bunlara göz atın.

FireFox Deminifier ilginizi çekebilir , sunucudan alındığında javascript'inizi küçültmesi ve biçimlendirmesi gerekiyor.

görüntü açıklamasını buraya girin

— Muz
kaynak

10

deminifing, yorumlar hala soyulduğundan, satır numaraları artık eşleşmediğinden ve değişken isimleri aynı olmadığından küçültmeyi devre dışı bırakmakla aynı şey değildir. Hiç yoktan daha iyi olduğu söyleniyor.

— Jim

1

Chrome ayrıca hata ayıklayıcıda bir biçim seçeneğine sahiptir. Normal bir kaynak dosyanın sahip olabileceği tüm bilgilere sahip değildir, ancak harika bir başlangıçtır, ayrıca kesme noktaları belirleyebilirsiniz. Tıkladığınız düğme, ilk ekran görüntüsünün sol altındadır, {} şeklinde görünür.

Biçimlendirmeden önce:

Biçimlendirmeden sonra.

— Jolly1234
kaynak