pst*_*trm 5 javascript source-maps webpack babeljs
我正在尝试为我的 Babel 7.7 和 Webpack 4.41 构建代码启用源映射。
除了源自 node_modules 中代码的控制台语句外,源映射工作正常。这些声明主要是开发提示,当我们做错事时发出警告。对于我们自己的源代码中的控制台语句,源映射可以工作,如果第 3 方库中发生错误,它们也可以工作。
当依赖项 console.logs 时,跟踪如下所示:
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)
Run Code Online (Sandbox Code Playgroud)
在浏览器中检查 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');
}));
Run Code Online (Sandbox Code Playgroud)
我的 babel 配置如下所示:
{
"presets": [
[
"@babel/preset-env",
{
targets: {
browsers: "last 2 versions"
}
}
]
],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": 3,
"proposals": true,
"absoluteRuntime": true
}
]
]
}
Run Code Online (Sandbox Code Playgroud)
在 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'
}]
},
};
Run Code Online (Sandbox Code Playgroud)
我已经测试了https://webpack.js.org/configuration/devtool/的所有选项,而某些选项使其变得稍微更糟,没有选项使其变得更好。
我也尝试配置SourceMapDevToolPlugin
并EvalSourceMapDevToolPlugin
解决该问题,但仍然没有任何改进。我可能会遗漏一些东西,但我不知道它可能是什么。
这是预期的吗?node_modules 中的console.log 是否根本不受支持,或者是否有我缺少的设置?