BoilerplateMVC / Backbone-Require-Boilerplate

A Rad Backbone.js and Require.js Boilerplate Project.
MIT License
604 stars 129 forks source link

How to generate source map #48

Open HongPong opened 10 years ago

HongPong commented 10 years ago

Assuming I have amdclean 2.2.4, grunt-contrib-uglify .5.1 and uglify-js 2.4.15 , how can I get a source map to be generated via amdclean (or another step if necessary)?

I am a little confused how the gruntfile references uglify, i.e. where options could be placed to configure it:

      desktopJS: {
        options: {
          baseUrl: 'public/js/app',
...
          onModuleBundleComplete: amdcleanLogic,
          preserveLicenseComments: false,
          optimize: 'uglify',

I was not able to find documentation about configuring uglify settings that can lead to a source map generation in the amdclean repo. Still learning my way around grunt.

gfranko commented 10 years ago

I haven't generated source maps myself, but I believe that you can easily generate them by passing the escodegen.sourceMap option to AMDclean. Like this:

    amdcleanLogic = function (data) {
      var outputFile = data.path;
      fs.writeFileSync(outputFile, amdclean.clean({
        'code': fs.readFileSync(outputFile),
        'removeModules': ['text'],
        'escodegen': {
            // Your source map file should be saved here
            'sourceMap': 'example.js'
        }
      }));
    };

Note: Under the hood, AMDclean uses Escodegen.

Let me know if this works!

HongPong commented 10 years ago

Thanks for the info. Now I get this error which makes me suspect some other problem w the args going in. Not much hits on google for "escodegen invalid mapping".

{ [Error: Error: Invalid mapping: {"generated":{"line":1,"column":0},"source":"src.js","original":{"
line":0,"column":0},"name":null}
    at SourceMapGenerator_validateMapping [as _validateMapping] (myrepo\node_modules\amdclean\node_modules\escodegen\node_modules\source-map\lib\source-map\so
urce-map-generator.js:273:15)
]
  originalError: [Error: Invalid mapping: {"generated":{"line":1,"column":0},"source":"src.js","orig
inal":{"line":0,"column":0},"name":null}] }

Options on the task when it runs are :

Options: logLevel=0, done=undefined, baseUrl="public/js/app", paths={"desktop":"init/DesktopInit"},
wrap, onModuleBundleComplete=undefined, preserveLicenseComments=false, optimize="uglify", mainConfig
File="public/js/app/config/config.js", include=["desktop"], out="public/dist/js/DesktopInit.min.js"

I tried setting sourceMap to 'true' instead and it got bogged down a different way.

>> Tracing dependencies for:
>> repo/public/dist/js/DesktopInit.m
>> in.js
>> Uglifying file:
>> repo/public/dist/js/DesktopInit.m
>> in.js
>> Error: Cannot uglify file:
>> repo/public/dist/js/DesktopInit.m
>> in.js. Skipping it. Error is:
>> Unexpected token: punc (:) (line: 2, col: 11, pos: 25)
Warning: RequireJS failed. Use --force to continue.

I am a little confused if uglifyjs2 is engaged here or if it's just escodegen by itself. escodegen is at version 1.4.1 which is current. Thanks for the help, it's a new area for me.

HongPong commented 10 years ago

It seems possible this is a windows issue with the long paths (unfortunately that is my local env right now). Also i noticed that uglifyjs 2.4.15 has source-map .1.34 while amdclean2.2.4 has escodegen 1.4.1 and source-map .1.38 . not sure if that makes a difference but it's a thing.

For whatever reason my minification is working again. Go figure...

HongPong commented 10 years ago

using the prettier formatting in chrome, the problem is at here:

}, p = {listenTo: "on",listenToOnce: "once"};
            n.each(p, function(e, t) {

which is actually around line 220 in backbone.js:

 _.each(listenMethods, function(implementation, method) {
    Events[method] = function(obj, name, callback) {

So underscorejs turns into 'n' and then it gets confused.

HongPong commented 10 years ago

For a while I got around this by using a delay, but when i updated to the newest AMDclean it stopped working. Backbone gets underscore as undefined . this almost worked for me:

require(["underscore", "jquery", "backbone", "routers/DesktopRouter", "jqueryui", "bootstrap", "backbone.validateAll"],

  function (_, $, Backbone, DesktopRouter) {

    // Instantiates a new Desktop Router instance
    //new DesktopRouter();
    var theTimeout = window.setTimeout(function() {new DesktopRouter();}, 100);
  }

The trouble definitely seemed to be that lodash is loading later than it should, when it's minified. I tried adding _ as first param to the the function signatures on desktopinit.

also tried this shim setting:

  shim: {

     // 'underscore': {
      //  exports: '_'
     // },
      'backbone': {
        deps: ['jquery'],
        exports: 'Backbone'
      },

also tried adding skipModuleInsertion: true, no effect there.

when minification is active, console.log('underscore', _) returns

function n(t){return t&&"object"==typeof t&&!hs(t)&&Bn.call(t,"__wrapped__")?t:new g(t)} 

Once in a while when I hit reload it does work correctly, and this is still the value. (i'm assuming something lets lodash get loaded slightly faster).

HongPong commented 10 years ago

Just to kind of redo all of this & see if I introduced the problem, I tried installing BRB plain vanilla over again and minifying it. With AMDClean 2.2.6 it gives me exactly the same kind of error that is messing with my project. I think something changed in the arguments of AMDClean over these versions that broke its implementation in this project? I got different runtime errors/minification files depending on which version of AMDClean was around.

HongPong commented 10 years ago

I was able to sort out my issues by going back to amdclean 1.5.0 and that works fine. looks like my patch was wrong, dang! Seemed to work at the time tho.

gfranko commented 10 years ago

Try AMDclean 2.3.0. It should fix your issues!