Browserify生成的源地图无法被Node.js识别

编程问答 2022-08-14

问题描述

browserify生成的源地图无法被Node.js识别。这是实验：

我正在使用LiveScript，它可以将.ls代码编译为带有嵌入式源映射的.js代码。这是我的测试代码：

export sleep = (f,ms) -> set-timeout ms,f

console.log "hello!"
i = 0
<~ :lo(op) ~>
    console.log "looping... #{i++}"
    <~ sleep 3000ms
    return op! if i > 20
    debugger
    lo(op)
console.log "Ended."

当我使用LiveScript的命令行工具编译此代码时，它会正确生成源映射，因此我可以按预期通过Chrome开发工具进行调试：

$ lsc --compile --map embedded --bare --print hello2.ls > _hello2.js
$ node --enable-source-maps --inspect-brk _hello2.js

结果如下：

enter image description here

正确生成的JavaScript文件是这样的：

// Generated by LiveScript 1.6.0
var sleep,i,out$ = typeof exports != 'undefined' && exports || this;
out$.sleep = sleep = function(f,ms){
  return setTimeout(ms,f);
};
console.log("hello!");
i = 0;
(function lo(op){
  console.log("looping... " + (i++));
  return sleep(3000,function(){
    if (i > 20) {
      return op();
    }
    debugger;
    return lo(op);
  });
})(function(){
  return console.log("Ended.");
});
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhlbGxvMi5scyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzthQUFPLEtBQU0sQ0FBQSxDQUFBLENBQUUsUUFBQSxDQUFBLENBQUEsRUFBQSxFQUFBO1NBQVcsV0FBWSxJQUFJLENBQUo7O0FBRXRDLE9BQU8sQ0FBQyxJQUFZLFFBQUE7QUFDcEIsQ0FBRSxDQUFBLENBQUEsQ0FBRTtDQUNELFFBQUEsQ0FBQSxFQUFBLENBQUEsRUFBQTtFQUNDLE9BQU8sQ0FBQyxJQUFJLGFBQUEsQ0FBQSxDQUFBLENBQVksQ0FBRSxDQUFBLEVBQUcsQ0FBckI7U0FDTCxNQUFNO0lBQ0UsSUFBRyxDQUFFLENBQUEsQ0FBQSxDQUFFLEVBQVA7TUFBWCxNQUFBLENBQU8sRUFBUCxDQUFTLENBQVQ7O0lBQ0E7V0FDQSxHQUFHLEVBQUQ7R0FITzs7U0FJYixPQUFPLENBQUMsSUFBWSxRQUFBIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHNsZWVwID0gKGYsIG1zKSAtPiBzZXQtdGltZW91dCBtcywgZlxuXG5jb25zb2xlLmxvZyBcImhlbGxvIVwiXG5pID0gMFxuPH4gOmxvKG9wKSB+PlxuICAgIGNvbnNvbGUubG9nIFwibG9vcgluZy4uLiAje2krK31cIlxuICAgIDx+IHNsZWVwIDMwMDBtc1xuICAgIHJldHVybiBvcCEgaWYgaSA+IDIwXG4gICAgZGVidWdnZXJcbiAgICBsbyhvcclcbmNvbnNvbGUubG9nIFwiRW5kZWQuXCJcbiJdfQ==

问题

我需要调试require的外部模块的LiveScript代码，所以我认为我可以通过browserify生成一个捆绑软件，并像往常一样调试代码。这是我创建捆绑包的方法：

$ ./node_modules/browserify/bin/cmd.js -t browserify-LiveScript --extension "ls" --debug hello2.ls -o b_hello2.js
$ node --enable-source-maps --inspect-brk b_hello2.js

这是意外的结果：

enter image description here

即使browserify-LiveScript使用the exact compiling options that I use，生成的源映射也大不相同。这是browserify生成的.js文件：

(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
// Generated by LiveScript 1.6.0
var sleep,function(){
    if (i > 20) {
      return op();
    }
    debugger;
    return lo(op);
  });
})(function(){
  return console.log("Ended.");
});



},{}]},{},[1])
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vZGVfbW9kdWxlcy9icm93c2VyLXBhY2svX3ByZWx1ZGUuanMiLCJoZWxsbzIubHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUNBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSIsImZpbGUiOiJnZW5lcmF0ZWQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlc0NvbnRlbnQiOlsiKGZ1bmN0aW9uKCl7ZnVuY3Rpb24gcihlLG4sdCl7ZnVuY3Rpb24gbyhpLGYpe2lmkcfuW2ldKXtpZighZVtpXSl7dmFyIGM9XCJmdW5jdGlvblwiPT10eXBlb2YgcmVxdWlyZSYmcmVxdWlyZTtpZighZiYmYylyZXR1cm4gYyhpLCEwKTtpZih1KXJldHVybiB1KGksITApO3ZhciBhPW5ldyBFcnJvcihcIkNhbm5vdCBmaW5kIG1vZHVsZSAnXCIraStcIidcIik7dGhyb3cgYS5jb2RlPVwiTU9EVUxFX05PVF9GT1VORFwiLGF9dmFyIHA9bltpXT17ZXhwb3J0czp7fX07ZVtpXVswXS5jYWxsKHAuZXhwb3J0cyxmdW5jdGlvbihyKXt2YXIgbj1lW2ldWzFdW3JdO3JldHVybiBvKG58fHIpfSxwLHAuZXhwb3J0cyxyLGUsbix0KX1yZXR1cm4gbltpXS5leHBvcnRzfWZvcih2YXIgdT1cImZ1bmN0aW9uXCI9PXR5cGVvZiByZXF1aXJlJiZyZXF1aXJlLGk9MDtpPHQubGVuZ3RoO2krKylvKHRbaV0pO3JldHVybiBvfXJldHVybiByfSkoKSIsIi8vIEdlbmVyYXRlZCBieSBMaXZlU2NyaXB0IDEuNi4wXG52YXIgc2xlZXAsIGksIG91dCQgPSB0eXBlb2YgZXhwb3J0cyahpSAndW5kZWZpbmVkJyAmjibleHBvcnRzIHx8IHRoaXM7XG5vdXQkLnNsZWVwID0gc2xlZXAgPSBmdW5jdGlvbihmLCBtcyl7XG4gIHJldHVybiBzZXRUaW1lb3V0KG1zLCBmKTtcbn07XG5jb25zb2xlLmxvZyhcImhlbGxvIVwiKTtcbmkgPSAwO1xuKGZ1bmN0aW9uIGxvKG9wKXtcbiAgY29uc29sZS5sb2coXCJsb29waW5nLi4uIFwiICsgKGkrKykpO1xuICByZXR1cm4gc2xlZXAoMzAwMCwgZnVuY3Rpb24oKXtcbiAgICBpZiAoaSA+IDIwKSB7XG4gICAgICByZXR1cm4gb3AoKTtcbiAgICB9XG4gICAgZGVidWdnZXI7XG4gICAgcmV0dXJuIGxvKG9wKTtcbiAgfSk7XG59KShmdW5jdGlvbigpe1xuICByZXR1cm4gY29uc29sZS5sb2coXCJFbmRlZC5cIik7XG59KTtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPWRhdGE6YXBwbGljYXRpb24vanNvbjtiYXNlNjQsZXlKMlpYSnphVzl1SWpvekxDSnpiM1Z5WTJWeklqcGJJbWhsYkd4dk1pNXNjeUpkTENKdVlXMWxjeUk2VzEwc0ltMWhjSEJwYm1keklqb2lPenRoUVVGUExFdEJRVTBzUTBGQlFTeERRVUZCTEVOQlFVVXNVVUZCUVN4RFFVRkJMRU5CUVVFc1JVRkJRU3hGUVVGQk8xTkJRVmNzVjBGQldTeEpRVUZKTEVOQlFVbzdPMEZCUlhSRExFOUJRVThzUTBGQlF5eEpRVUZaTEZGQlFVRTdRVUZEY0VJc1EwRkJSU3hEUVVGQkxFTkJRVUVzUTBGQlJUdERRVU5FTEZGQlFVRXNRMEZCUVN4RlFVRkJMRU5CUVVFc1JVRkJRVHRGUVVORExFOUJRVThzUTBGQlF5eEpRVUZKTEdGQlFVRXNRMEZCUVN4RFFVRkJMRU5CUVZrc1EwRkJSU3hEUVVGQkxFVkJRVWNzUTBGQmNrSTdVMEZEVEN4TlFVRk5PMGxCUTBVc1NVRkJSeXhEUVVGRkxFTkJRVUVzUTBGQlFTeERRVUZGTEVWQlFWQTdUVUZCV0N4TlFVRkJMRU5CUVU4c1JVRkJVQ3hEUVVGVExFTkJRVlE3TzBsqlEwRTdWMEZEUVN4SFFVRkhMRVZCUVVRN1IwRklUenM3VTBGsllpeFBRVUZQTEVOQlFVTXNTVUZCV1N4UlFVRkJJaXdpYzI5MWNtTmxjME52Ym5SbGJuUWlPbHR1ZFd4c1hYMD1cblxuIl19

问题

browserify为什么会生成Node.js无法理解的源映射？我该如何解决？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

browserifybrowserifybrowserifydebuggingdebuggingdebuggingsource-maps