Skip to content

Instantly share code, notes, and snippets.

@sloosch
Created January 31, 2015 18:41
Show Gist options
  • Save sloosch/07eb491558862cee53fd to your computer and use it in GitHub Desktop.
Save sloosch/07eb491558862cee53fd to your computer and use it in GitHub Desktop.
ng annotate webpack loader with source map support
var ngAnnotate = require('ng-annotate');
var utils = require('loader-utils');
var SourceMapConsumer = require('source-map').SourceMapConsumer;
var SourceMapGenerator = require('source-map').SourceMapGenerator;
module.exports = function(content, sm) {
var filename = utils.getCurrentRequest(this);
var res = ngAnnotate(content, {
add : true,
sourcemap : {inline: false, inFile : filename, sourceRoot:filename}
}
);
var mergeMap = null;
if(sm) {
var generator = SourceMapGenerator.fromSourceMap(new SourceMapConsumer(sm));
generator.applySourceMap(new SourceMapConsumer(res.map), filename);
mergeMap = generator.toString();
}
this.callback(null, res.src, mergeMap);
};
@kentcdodds
Copy link

Found that this could be improved by checking if there's a res.map and not merging if there's not:

var ngAnnotate = require('ng-annotate');
var utils = require('loader-utils');
var SourceMapConsumer = require('source-map').SourceMapConsumer;
var SourceMapGenerator = require('source-map').SourceMapGenerator;

module.exports = function(source, sm) {
  var filename = utils.getCurrentRequest(this);

  var res = ngAnnotate(source, {
      add: true,
      sourcemap: {inline: false, inFile: filename, sourceRoot: filename}
    }
  );

  var mergeMap;
  if (sm) {
    var generator = SourceMapGenerator.fromSourceMap(new SourceMapConsumer(sm));
    if (res.map) {
      generator.applySourceMap(new SourceMapConsumer(res.map), filename);
      mergeMap = generator.toString();
    } else {
      mergeMap = sm;
    }
  }

  this.callback(null, res.src || source, mergeMap);
};

But of course you don't get an email, so you may never know about this... Unless... @sloosch?

@kentcdodds
Copy link

Oh, and don't forget to cache!

var ngAnnotate = require('ng-annotate');
var utils = require('loader-utils');
var SourceMapConsumer = require('source-map').SourceMapConsumer;
var SourceMapGenerator = require('source-map').SourceMapGenerator;

module.exports = function(source, sm) {
  this.cacheable && this.cacheable();
  var filename = utils.getCurrentRequest(this);

  var res = ngAnnotate(source, {
      add: true,
      sourcemap: {inline: false, inFile: filename, sourceRoot: filename}
    }
  );

  var mergeMap;
  if (sm) {
    var generator = SourceMapGenerator.fromSourceMap(new SourceMapConsumer(sm));
    if (res.map) {
      generator.applySourceMap(new SourceMapConsumer(res.map), filename);
      mergeMap = generator.toString();
    } else {
      mergeMap = sm;
    }
  }

  this.callback(null, res.src || source, mergeMap);
};

@kentcdodds
Copy link

P.S. Made a PR to the repo that owns the ng-annotate-loader name on npm: andrey-skl/ng-annotate-loader#2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment