Hoe kunnen bibliotheekbronkaarten worden geladen met webpack?

Ik bouw twee projecten met webpack; de ene is een bibliotheek voor de andere.

Is het mogelijk om de sourcemaps van mijn bibliotheekproject te gebruiken bij het bouwen van mijn wrapper-project? Ik wil graag de mogelijkheid hebben om mijn bibliotheekcode te debuggen vanuit de gebruikersinterface van mijn wrapper.

Mijn build werkt correct omdat de bibliotheek is ingebouwd. Het enige probleem zijn de sourcemaps. Het JavaScript dat ik zie in de browser debugger is lelijk, omdat bronkaarten niet beschikbaar zijn.

Snippet van mijn projectstructuur:

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

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

Antwoord 1, autoriteit 100%

Ik heb eindelijk mijn probleem gevonden…

Met dank aan @BinaryMuse voor de tip over source-map-loader. Dit was inderdaad de juiste manier om te gaan, hoewel het aanvankelijk niet voor mij werkte.

Wat ik me uiteindelijk realiseerde, is dat ik de source-map-loadervoor webpack moet inschakelen in zowel “my-lib” en“my-ui”. Zonder source-map-loaderin “my-lib” webpack-configuratie, de source-map-loaderin “my-ui” fouten (met helaas een waarschuwingsbericht) omdat het kan geen bronkaarten vinden voor transitieve afhankelijkheden van “my-lib”. Blijkbaar zijn de bronkaarten zo goed dat source-map-loaderalle aspecten van de afhankelijkheidsboom kan bekijken.

Houd er ook rekening mee dat ik een probleem tegenkwam bij het gebruik van source-map-loaderin combinatie met react-hot-loader. Kijk, react-hot-loaderbevat geen bronkaarten. Wanneer source-map-loaderze probeert te vinden (omdat het gewoon alles scant), kan het niet en breekt alles af.

Uiteindelijk zou ik willen dat source-map-loaderfouttoleranter is, maar als het correct is ingesteld, werkt het!

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

Antwoord 2, autoriteit 4%

U zou elk van de evalbronkaartopties moeten kunnen gebruiken die Webpack biedt.

Eigenlijk komt dat gewoon neer op het instellen van de juiste devtool-optie in uw webpack.config.jsvoor het my-lib-project.

devtool: 'eval',

evalen eval-source-mapszouden beide moeten werken.

Zie de Webpack source map-documentatievoor de verschillende opties.


Antwoord 3, autoriteit 4%

Ik gebruik create-react-appen dit is hoe ik het heb opgelost (zonder ejectcmd uit te voeren)

Opmerking: als uw app webpack configal overschrijft met behulp van react-app-rewired, kunt u de eerste drie stappen negeren.

  • npm i react-app-rewired -D– Dit zal je helpen om webpackte overschrijven
    configuratie.
  • package.json– verander je scripts, vervang react-scriptsdoor react-app-rewired
 "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  }
  • config-overrides.js– maak dit bestand op het bovenliggende niveau van de app.

  • npm i source-map-loader -D– Om bronkaarten te laden (ervan uitgaande dat de dist van je lib een bronkaartbestand heeft). Het maakt niet uit welke build-tool (bijvoorbeeld: rollup, webpackof parcel) u gebruikt om sourcemapte genereren .

  • Kopieer onderstaande code in config-overrides.js

module.exports = {
  webpack: (config, env) => {
    // Load source maps in dev mode
    if (env === 'development') {
      config.module.rules.push({
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        use: ['source-map-loader'],
        enforce: 'pre',
      });
      // For `babel-loader` make sure that sourceMap is true.
      config.module.rules = config.module.rules.map(rule => {
        // `create-react-app` uses `babel-loader` in oneOf
        if (rule.oneOf) {
          rule.oneOf.map(oneOfRule => {
            if (
              oneOfRule.loader &&
              oneOfRule.loader.indexOf('babel-loader') !== -1
            ) {
              if (oneOfRule.hasOwnProperty('options')) {
                if (oneOfRule.options.hasOwnProperty('sourceMaps')) {
                  // eslint-disable-next-line no-param-reassign
                  oneOfRule.options.sourceMaps = true;
                }
              }
            }
          });
        }
        return rule;
      });
    }
    return config;
  },
};
  • Start je app opnieuw (als deze al actief is). source filesworden op verschillende locaties geladen, gebaseerd op het pad in het kaartbestand. Controleer alle mappen geduldig 🙂

Opmerking:
1. Uw bronkaarten worden in een van de mappen geladen (bijv. localhost:3000of webpack:///) op basis van het pad dat wordt gelezen van xxx.js.map het dossier.
2. Als u rollupvoor uw bibliotheken gebruikt, zorg er dan voor dat u het juiste pad opgeeft in het configuratiebestand (output.sourcemapPathTransform ). Dit zal helpen om sourcemapsin de juiste locatie.

Other episodes