[英]How to load library source maps using webpack?
我正在用 webpack 构建两个项目; 一个是另一个的图书馆。
构建包装器项目时是否可以使用我的库项目中的源映射? 我希望能够从我的包装器 UI 调试我的库代码。
我的构建工作正常,因为库是内置的。唯一的问题是源映射。 我在浏览器调试器中看到的 JavaScript 是丑化的,因为源映射不可用。
我的项目结构的片段:
+-- my-ui/
+-- dist/
+-- my-ui.js
+-- my-ui.js.map
+-- node_modules/
+-- my-lib/
+-- dist/
+-- bundle.js
+-- bundle.js.map
来自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
})
]
};
我终于知道我的问题了...
感谢 @BinaryMuse 提供有关source-map-loader 的提示。 这确实是正确的方法,尽管它最初对我不起作用。
我最终意识到我需要在“my-lib”和“my-ui”中为 webpack 启用source-map-loader
。 如果没有source-map-loader
在“我的-LIB”的WebPack配置时, source-map-loader
里面的“我的UI”的错误(与可悲的是一条警告消息),因为它无法找到来源映射为“我的-LIB”的传递依赖. 显然,源映射非常好,以至于source-map-loader
能够查看依赖树的所有方面。
另外值得注意的是,我在使用source-map-loader
和react-hot-loader
遇到了一个问题。 看, react-hot-loader
不包括源映射。 当source-map-loader
试图找到它们时(因为它只是扫描所有内容),它无法并中止所有内容。
最终,我希望source-map-loader
具有更高的容错性,但是如果设置正确,它确实可以工作!
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/}
]
}
我的回答类似于@Jeff Fairley 的,我有相同的目录结构,唯一的区别是我使用的是module: { rules: [] }
而不是他的module: { preLoaders: [..], loaders: [...]}
。 这是我必须添加到我的 webpack.config.js 文件中的内容:
mode: 'development',
devtool: 'eval-source-map',
module: {
rules: [
{
test: /\.js$/,
enforce: "pre",
use: ["source-map-loader"],
}
]
},
然后我跑了
npm i -D source-map-loader
我在 Chrome 的开发工具中点击回溯时看到了我使用的依赖项的 TypeScript 源代码。 有关source-map-loader
的信息,请参阅 Webpack 文档。
您应该能够使用 Webpack 提供的任何eval源映射选项。
实际上,这相当于在您的webpack.config.js
为my-lib
项目设置正确的devtool
选项。
devtool: 'eval',
eval
和eval-source-maps
应该都可以工作。
有关各种选项,请参阅Webpack 源映射文档。
我正在使用create-react-app
,这就是我修复它的方式(不运行eject
cmd)
注意:如果您的应用程序已经使用
react-app-rewired
webpack config
覆盖了webpack config
您可以忽略前三个步骤。
npm i react-app-rewired -D
- 这将帮助您覆盖webpack
配置。package.json
- 改变你的脚本,用react-app-rewired
替换react-scripts
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
}
config-overrides.js
- 在应用程序的父级创建此文件。
npm i source-map-loader -D
- 加载源映射(假设你的 lib 的 dist 有源映射文件)。 不要紧,它的构建工具(如: Rollup
, webpack
或parcel
)用来生成sourcemap
。
在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;
},
};
source files
根据地图文件中的路径加载到不同的位置。 耐心检查所有文件夹:)注意:1.您的源映射根据它从 xxx.js.map 文件读取的路径加载到文件夹之一(例如:
localhost:3000
或webpack:///
)。 2. 如果你正在为你的库使用rollup
,请确保你在配置文件(output.sourcemapPathTransform)中提供了正确的路径,这将有助于在正确的位置加载sourcemaps
。
很好的解决方案! 它可以在我们复杂的工作环境中工作。 感谢您解决。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.