我正在尝试为Babel 7.7和Webpack 4.41构建的代码启用源映射。
除了源于node_modules中代码的控制台语句外,sourcemaps都可以正常工作。这些语句主要是开发人员提示,是对我们做错事的警告。对于我们自己的源代码中的控制台语句,sourcemaps起作用,如果在第三方库中发生错误,它们也起作用。
当依赖项控制台记录日志时,跟踪如下所示:
Warning: a promise was rejected with a non-error: [object String]
at eval (webpack-internal:///./src/app/bootstrap/bootstrap.js:66:13)
From previous event:
at _callee$ (webpack-internal:///./src/app/bootstrap/bootstrap.js:65:140)
at tryCatch (webpack-internal:///../node_modules/regenerator-runtime/runtime.js:45:40)
at Generator.invoke [as _invoke] (webpack-internal:///../node_modules/regenerator-runtime/runtime.js:271:22)
at Generator.prototype.<computed> [as next] (webpack-internal:///../node_modules/regenerator-runtime/runtime.js:97:21)
在浏览器中检查bootstrap.js时,我没有完全得到构建代码,仍然应用了源映射,但是我也没有得到babel的输出,甚至没有原始代码。介于两者之间。
我创建了一个用于复制问题的简单回购协议,以尝试以受控方式解决该问题:https://github.com/pstenstrm/webpack-sourcemap-test
Object(react_loadable__WEBPACK_IMPORTED_MODULE_9__["preloadReady"])().then(function _callee() {
return _Users_path_to_proj_node_modules_babel_runtime_corejs3_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.async(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return _Users_path_to_proj_node_modules_babel_runtime_corejs3_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.awrap(new bluebird__WEBPACK_IMPORTED_MODULE_1___default.a(function (a,reject) {
reject('asdas');
}));
我的babel配置如下:
{
"presets": [
[
"@babel/preset-env",{
targets: {
browsers: "last 2 versions"
}
}
]
],"plugins": [
[
"@babel/plugin-transform-runtime",{
"corejs": 3,"proposals": true,"absoluteRuntime": true
}
]
]
}
在webpack中,设置如下:
const path = require('path');
module.exports = {
entry: ['./src/index.js'],mode: 'development',devtool: 'eval-source-map',output: {
path: path.resolve(__dirname,'dist'),filename: 'bundle.js'
},module: {
rules: [{
test: /\.js$/,exclude: [/node_modules/],use: 'babel-loader?sourceMap&cacheDirectory'
}]
},};
我已经测试了https://webpack.js.org/configuration/devtool/的所有选项,而有些选项使它稍差一些,没有选项使它变得更好。
我也尝试配置SourceMapDevToolPlugin
和EvalSourceMapDevToolPlugin
来解决该问题,但仍然没有任何改善。我可能会丢失某些东西,但我不知道它可能是什么。
这是所期望的吗?是否仅不支持node_modules中的console.log,还是缺少我的设置?