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-loader
voor webpack moet inschakelen in zowel “my-lib” en“my-ui”. Zonder source-map-loader
in “my-lib” webpack-configuratie, de source-map-loader
in “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-loader
alle aspecten van de afhankelijkheidsboom kan bekijken.
Houd er ook rekening mee dat ik een probleem tegenkwam bij het gebruik van source-map-loader
in combinatie met react-hot-loader
. Kijk, react-hot-loader
bevat geen bronkaarten. Wanneer source-map-loader
ze probeert te vinden (omdat het gewoon alles scant), kan het niet en breekt alles af.
Uiteindelijk zou ik willen dat source-map-loader
fouttoleranter 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.js
voor het my-lib
-project.
devtool: 'eval',
eval
en eval-source-maps
zouden beide moeten werken.
Zie de Webpack source map-documentatievoor de verschillende opties.
Antwoord 3, autoriteit 4%
Ik gebruik create-react-app
en dit is hoe ik het heb opgelost (zonder eject
cmd uit te voeren)
Opmerking: als uw app
webpack config
al overschrijft met behulp vanreact-app-rewired
, kunt u de eerste drie stappen negeren.
npm i react-app-rewired -D
– Dit zal je helpen omwebpack
te overschrijven
configuratie.package.json
– verander je scripts, vervangreact-scripts
doorreact-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
,webpack
ofparcel
) u gebruikt omsourcemap
te 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 files
worden 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:3000
ofwebpack:///
) op basis van het pad dat wordt gelezen van xxx.js.map het dossier.
2. Als urollup
voor uw bibliotheken gebruikt, zorg er dan voor dat u het juiste pad opgeeft in het configuratiebestand (output.sourcemapPathTransform ). Dit zal helpen omsourcemaps
in de juiste locatie.