Web paketi kullanarak kütüphane kaynak haritaları nasıl yüklenir?

Webpack ile iki proje yapıyorum; Biri diğeri için bir kütüphanedir.Web paketi kullanarak kütüphane kaynak haritaları nasıl yüklenir?

benim sarıcı projesini oluştururken Kütüphanemin projesinden sourcemaps tüketmek mümkün mü? Kütüphane kodumu sarmalayıcı kullanıcı arayüzümden hata ayıklama yeteneğini isterim.

My inşa kütüphane inşa edilmesi ile düzgün çalışır. Tek sorun sourcemaps olduğunu. Tarayıcı hata ayıklayıcısında gördüğüm JavaScript ugglified, çünkü sourcemaps kullanılamıyor. webpack.config.js den

+-- my-ui/ 
    +-- dist/ 
     +-- my-ui.js 
     +-- my-ui.js.map 
    +-- node_modules/ 
     +-- my-lib/ 
      +-- dist/ 
       +-- bundle.js 
       +-- bundle.js.map

Snippet'ine: Benim proje yapısının

Pasaj source-map-loader üzerine ucu için @BinaryMuse için Sonunda benim sorunu çözdüm

module.exports = { 
    entry: './src/js/main.jsx', 
    output: { 
     path: path.join(__dirname, 'dist'), 
     filename: 'my-ui.js', 
     library: 'my-ui', 
     libraryTarget: 'umd' 
    }, 
    devtool: 'source-map', 
    module: { 
     loaders: [ 
      {test: /\.jsx?$/, loader: 'babel', include: path.join(__dirname, 'src')} 
     ] 
    }, 
    plugins: [ 
     new Clean('dist'), 
     new HtmlWebpackPlugin({ 
      template: 'src/index.html', 
      inject: true 
     }) 
    ] 
};

kaynak

2015-09-21 Jeff Fairley

ben kullanmadım ama * * [kaynak haritası yükleyici] (https://github.com/webpack/source-map-loader) Eğer aradığınızı olduğunu düşünüyorum. Gerekli dosyalar için bir 'preLoader' olarak atayın. Bu, bundle.js'nin –

Hey @MichelleTilley adresinde kaynak harita yorumuna sahip olduğunu varsayar. Şu anda 'source-map-loader 'kullanmayı deniyorum, ama' undefined 'altyazısı' özelliği okunamıyor 'var. Nereden gelebileceği hakkında bir fikrin var mı? "Webpack.config.js" adresim: 'devtool: 'source-map'',' preLoaders: [{test:/\.js $ /, loader: "source-map-loader"}] ',' loaders: [{test: /\.ts$/, yükleyici: 'ts-loader'}, {test: /\.html$/, yükleyici: 'ham-loader'}, {test: /\.css$/, yükleyici: 'style-loader! css-raw-loader'}] ' –

...

Teşekkür . Aslında bu benim için başlangıçta işe yaramadı, gerçekten doğru yoldu. Sonunda fark nedir

ben hem "my-lib" ve "my-ui" in WebPack için source-map-loader etkinleştirmeniz gerekir olmasıdır. "My-lib" webpack geneli, (ne yazık ki bir uyarı mesajı ile) source-map-loader içinde "my-ui" hataları şeyin "beni-lib" nin geçişli bağımlılıkları için kaynak haritalar bulamaz çünkü source-map-loader olmadan. Görünüşe göre kaynak haritalar, source-map-loader'un bağımlılık ağacının her yönüne bakabileceği kadar iyi.

Ayrıca, react-hot-loader ile birlikte source-map-loader kullanarak bir sorunla karşılaştım. Bakınız, react-hot-loader kaynak harita içermez. source-map-loader onları bulmaya çalıştığında (her şeyi taradığından), her şeyi yapamaz ve iptal edemez.

Sonuçta, ben daha fazla hataya dayanıklı olmasını source-map-loader isteriz, ancak doğru kurarken, çalışır!

devtool: 'source-map', 
module: { 
    preLoaders: [ 
     {test: /\.jsx?$/, loader: 'eslint', exclude: /node_modules/}, 
     {test: /\.jsx?$/, loader: 'source-map', exclude: /react-hot-loader/} 
    ], 
    loaders: [ 
     {test: /\.jsx?$/, loader: 'raect-hot!babel', exclude: /node_modules/} 
    ] 
}

kaynak

2015-09-23 20:43:50

Başlıklar için teşekkürler! Ben de bu kurulumla tepkili sıcak yükleyici kullanıyorum ve büyük olasılıkla bana iyi bir zaman tasarrufu sağladı. (aldığınız hata çok spesifik değildi!) – Venryx

-1

Sen WebPack sağlar eval kaynak haritası seçeneklerinden herhangi birini kullanmak mümkün olmalıdır.

Bu için webpack.config.jsmy-lib projenizde doğru olanı ayarlamak için yeterlidir.

devtool: 'eval',

eval ve eval-source-maps her iki çalışma gerekir.

çeşitli seçenekler için Webpack source map documentation bakınız.

kaynak

2016-01-13 21:32:18

Web paketi kullanarak kütüphane kaynak haritaları nasıl yüklenir?

cevap

İlgili konular