为从 Coffeescript 编译的多个连接的 javascript 文件生成源映射答案

【问题标题】：Generating source maps for multiple concatenated javascript files compiled from Coffeescript为从 Coffeescript 编译的多个连接的 javascript 文件生成源映射
【发布时间】：2014-09-05 08:57:30
【问题描述】：

有人在这方面取得过成功吗？

【问题讨论】：

标签： javascript compiler-construction coffeescript source-maps

【解决方案1】：

我认为这或多或少是一个未解决的问题： https://github.com/jashkenas/coffee-script/issues/2779 。最后一个有意义的评论来自一个月前的 jwalton。

不过，增加对它的支持似乎不是火箭科学，所以它可能很快就会到来。

Michael Ficarra（CoffeeScript Redux 的创建者）建议使用 https://github.com/michaelficarra/commonjs-everywhere。

两个警告：

它仅适用于捆绑 CommonJS 模块。
它使用的是 CoffeeScript Redux，它仍处于测试阶段（虽然看起来工作得很好），并且与原始 CoffeeScript 编译器不是 100% 兼容。

所以这不适用于您特别要求的“连接”。

4 月 14 日添加

您可能很幸运：combine-source-map 和/或 generate-sourcemap，均由同一作者撰写。

4 月 26 日添加

这看起来很简单：https://npmjs.org/package/mapcat。您只需将咖啡编译器生成的各个源映射文件提供给它。

5 月 16 日添加

Mariusz Nowak 刚刚发布了webmake-coffee。与 CommonJS Everywhere 一样，它需要将代码组织为 CommonJS 模块。与其他地方的 CommonJS 不同，它使用常规的 CoffeeScript。

似乎Grunt Coffee-Script plugin 已经有相当长一段时间（两个月）对连接文件的源映射支持，有效地证明了我原来的答案是不正确的。

即将推出的 Snockets 2.0 版也将支持它。

【讨论】：

感谢 Meryn 的参考！
grunt-contrib-coffee 创建一个连接的咖啡文件，然后使用源映射对其进行编译。更好的选择是运行grunt-contrib-coffee 而不连接，然后运行grunt-mapcat。这会构建一个指向每个单独咖啡文件的源映射。

【解决方案2】：

我最终使用了browserify，使用coffeeify 作为转换选项，并启用了browserify 的调试选项。我在 main.js 文件的每个请求中捆绑应用程序，并且任何运行时错误都会以相当不错的准确性显示在我的原始源中。

用我的眼球将连接/编译的 js 中的运行时错误映射回咖啡源当然要好得多！

【讨论】：

【解决方案3】：

我需要在缩小之前注释 AngularJS 代码，但 grunt-ng-annotate 不接受输入源映射，因此我无法使用 CoffeeScript 编译器生成的映射。

显然，gulp-sourcemaps 这不是问题：

var gulp = require('gulp');
var $ = require('gulp-load-plugins')(); // loading gulp plugins lazily
                                       // remember to include them in the package.json

gulp.task('appJS', function() {
  // concatenate compiled .coffee files and js files into build/app.js
  gulp.src(['./app/**/*.js','./app/**/*.coffee'])
    .pipe($.sourcemaps.init())
    .pipe($['if'](/[.]coffee$/, $.coffee({bare: true}).on('error', $.util.log)))
    .pipe($.concat('app.js'))
    .pipe($.ngAnnotate())
    .pipe($.uglify())
    .pipe($.sourcemaps.write())
    .pipe(gulp.dest('./build'))
});

同样的方法也适用于其他情况。就我而言，这是唯一有效的方法。

【讨论】：

【解决方案4】：

我写了一个完美的任务。 Check it out

【讨论】：