我开始创建一个 serverless 项目，这个项目使用了 serverless webpack 插件。 目前我们已经通过 webpack 集成了 babel，并且现在我们希望最好能够在 vs code 中进行调试。
我们的文件结构如下: dist:
|- babelExample.js
|- babelExample.js.map
|- converse.js
|- converse.js.map
我们设置了webpack.config.js文件
var path = require('path');
const webpack = require('webpack');
module.exports = {
devtool: "source-map",
debug: true,
entry: {
babelExample: 'example/babelExample.js',
converse: 'converse/converse.js'
},
target: 'node',
plugin: [
new webpack.DefinePlugin({
'__DEV__': true
}),
new webpack.HotModuleReplacementPlugin(),
],
module: {
loaders: [
{
test: /\.js$/,
loaders: ['babel'],
include: __dirname,
exclude: /node_modules/
},
{
test: /\.json$/,
loader: 'json-loader'
}
]
},
output: {
devtoolModuleFilenameTemplate: info => {
return `${info.resourcePath}?${info.loaders}`
},
libraryTarget: 'commonjs',
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
resolve: {
root: [
path.resolve(__dirname),
path.resolve(__dirname, 'server'),
],
extensions: ['', '.js', '.jsx']
}
};
我们的 launch.json
{
"type": "node",
"request": "launch",
"name": "Serve webcast",
"program": "/Users/edevh46/.nvm/versions/node/v4.3.2/lib/node_modules/serverless/bin/serverless",
"cwd": "${workspaceRoot}",
"args": [
"webpack",
"serve"
],
"preLaunchTask": "build",
"runtimeArgs": [
"--nolazy"
],
"outFiles": [
"${cwd}/dist/**/*.js"
],
"sourceMaps": true,
"smartStep": true
},
当启动 serverless webpack 时，它会正确地查看 dist 文件夹中生成的 js 文件，但是为了使断点起作用，我们必须在生成的文件上设置断点，然后才能显示正确的源代码。
在我的看来，路径没有被正确解析到 VS Code 中的特定文件。
查看映射文件：
{"version":3,"sources":["webpack/bootstrap cfe5ab77d9ed3f728d29?undefined","./server/example/babelExample.js?undefined","./~/babel-runtime/core-js/promise.js?undefined","./~/core-js/library/fn/promise.js?undefined","./~/core-js/library/modules/es6.string.iterator.js?undefined","./~/core-js/library/modules/_string-at.js?undefined","./~/core-js/library/modules/_to-integer.js?undefined","./~/core-js/library/modules/_defined.js?undefined","./~/core-js/library/modules/_iter-define.js?undefined","./~/core-js/library/modules/_library.js?undefined","./~/core-js/library/modules/_export.js?undefined","./~/core-js/library/modules/_global.js?undefined","./~/core-js/library/modules/_core.js?undefined","./~/core-js/library/modules/_ctx.js?undefined","./~/core-js/library/modules/_a-function.js?undefined","./~/core-js/library/modules/_hide.js?undefined","./~/core-js/library/modules/_object-dp.js?undefined","./~/core-js/library/modules/_an-object.js?undefined","./~/core-js/library/modules/_is-object.js?
再往下：
"file":"babelExample.js","sourcesContent":[" \t// 模块缓存\n \tvar installedModules = {};\n\n \t// require 函数\n \tfunction webpack_require(moduleId) {\n\n \t\t// 检查模块是否在缓存中\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// 创建新模块（并将其放入缓存）\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// 执行模块函数\n \t\tmodules[moduleId].call(module.exports, module, module.exports, webpack_require);\n\n \t\t// 标记模块已加载\n \t\tmodule.loaded = true;\n\n \t\t// 返回模块的导出对象\n \t\treturn module.exports;\n \t}\n\n\n \t// 暴露模块对象 (webpack_modules)\n \t__webpack_require__.m = modules;\n\n \t// 暴露模块缓存\n \t__webpack_require__.c = installedModules;\n\n \t// webpack_public_path\n \t__webpack_require__.p = \"\";\n\n \t// 加载入口模块并返回导出对象\n \treturn webpack_require(0);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap cfe5ab77d9ed3f728d29","'use strict';\nconst createResponse = require('../lib/createResponse');\n\n\nexport const hello = (event, context, cb) => {\n console.log('SERVER this');\n const p = new Promise((resolve, reject) => {\n
resolve('success');\n });\n p\n .then(r => cb(null, {\n
message: 'Go Serverless Webpack (Babel) v1.0! Your function executed successfully!',\n event,\n }))\n .catch(e => cb(e));\n};\n\n\n// WEBPACK FOOTER //\n// ./server/example/babelExample.js","module.exports
我只是对匹配源映射感到陌生，但如果有人能帮忙理解为什么我必须在生成的文件上设置断点而不是原始文件，我会非常感激。
我已经尝试了 node2 --inspect ，但在那里断点完全失效，这让我相信缺少一些东西来帮助解析路径，回到原始文件。
任何帮助都将不胜感激。
.scripts命令找出问题所在，如果需要，添加sourceMapPathOverrides条目。 - Rob Lourens