Jak załadować mapy źródłowe biblioteki za pomocą pakietu internetowego?

Question

Buduję dwa projekty z pakietem sieci Web; jedna jest biblioteką dla drugiej.

Czy można spożywać sourcemaps z mojego projektu bibliotecznego podczas budowania projektu opakowania? Chciałbym mieć możliwość debugowania kodu biblioteki z mojego interfejsu użytkownika opakowania.

Moja kompilacja działa poprawnie, ponieważ biblioteka jest wbudowana. Jedyny problem to sourcemaps. JavaScript, który widzę w debuggerze przeglądarki, jest uciążliwy, ponieważ pliki cookie są niedostępne.

urywek mojego struktury projektu:

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

urywek z webpack.config.js:

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 
     }) 
    ] 
}; 

Answer 1

I w końcu zorientowali się mój problem ...

Dzięki @BinaryMuse za cynk na source-map-loader . To rzeczywiście była właściwa droga, chociaż początkowo nie działała dla mnie.

W końcu uświadomiłem sobie, że muszę włączyć source-map-loader dla webpacka w obu "my-lib" i "my-ui". Bez source-map-loader w konfiguracji sieciowej "my-lib", source-map-loader w błędach "my-ui" (z ostrzeżeniem niestety), ponieważ nie może zlokalizować map źródłowych dla przechodnich zależności "my-lib". Wygląda na to, że mapy źródłowe są tak dobre, że source-map-loader jest w stanie przejrzeć wszystkie aspekty drzewa zależności.

Zanotowałem również, że wystąpił problem z numerem source-map-loader w połączeniu z react-hot-loader. Zobacz, react-hot-loader nie zawiera map źródłowych. Kiedy source-map-loader próbuje je znaleźć (ponieważ po prostu skanuje wszystko), nie może i przerywa wszystko.

Ostatecznie, chciałbym, aby source-map-loader był bardziej odporny na uszkodzenia, ale po prawidłowym skonfigurowaniu działa!

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/} 
    ] 
} 

Answer 2

powinny być możliwe użycie dowolnego z eval źródłowych opcji map, które WebPACK zapewnia.

Naprawdę wystarczy ustawić odpowiednią opcję devtool w swoim webpack.config.js dla projektu my-lib.

devtool: 'eval', 

eval i eval-source-maps powinien zarówno praca.

Zapoznaj się z Webpack source map documentation dla różnych opcji.