Proposal: Refactor bundled --outFile result #6419

Activity

1. SetTrend commented on Jan 9, 2016

   

   Axel D. (SetTrend)

   on Jan 9, 2016

   Author

   More actions

   Converting module syntax to namespace syntax in the bundle file feels reasonable to me, because the file gets loaded completely anyway. To me it seems unnecessary to retain the costly module syntax/infrastructure in a bundle file.

   I don't feel it will be a feasible measure of leaving this issue to be required to add a whole bunch of aliases to a requirejs or similar configuration. Imagine this: "Download Angular2 from here! Hey, and don't forget to add these 30+ below aliases to your module loader configuration for it to work:"
2. Axel D. (SetTrend)

   changed the title [-]Cannot reference bundled --outFile result[/-] [+]Proposal: Refactor bundled --outFile result[/+] on Jan 9, 2016
3. mhegazy commented on Jan 11, 2016

   

   Mohamed Hegazy (mhegazy)

   on Jan 11, 2016

   Contributor

   More actions

   What does "Refactor bundled --outFile result" mean? can you provide more details.
4. SetTrend commented on Jan 12, 2016

   

   Axel D. (SetTrend)

   on Jan 12, 2016

   Author

   More actions

   Yes, sure. Lets have a look at the small example project taken from SetTrend/TS18 ...

   This is the current output generated by TSC using --outFile --module amd --target ES5 (I enhanced the output here with an external reference to jQuery):

   var __extends = (this && this.__extends) || function (d, b) {
       for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
       function __() { this.constructor = d; }
       d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
   };
   define("_Base", ["require", "exports"], function (require, exports) {
       "use strict";
       var _Base = (function () {
           function _Base(element) {
               this.element = element;
               this._var = 1;
           }
           return _Base;
       }());
       Object.defineProperty(exports, "__esModule", { value: true });
       exports.default = _Base;
   });
   define("Derived", ["require", "exports", "_Base"], function (require, exports, _Base_1) {
       "use strict";
       var Derived = (function (_super) {
           __extends(Derived, _super);
           function Derived(element) {
               _super.call(this, element);
           }
           return Derived;
       }(_Base_1.default));
       Object.defineProperty(exports, "__esModule", { value: true });
       exports.default = Derived;
   });
   define("Manager", ["require", "exports", "jquery"], function (require, exports, $) {
       "use strict";
       var Manager = (function () {
           function Manager(provider) {
               this._provider = provider;
               $("body").addClass("loaded");
           }
           return Manager;
       }());
       Object.defineProperty(exports, "__esModule", { value: true });
       exports.default = Manager;
   });
   
   //# sourceMappingURL=all.js.map

   In this simple example we find three defines. For each of these defines we need to create a configuration entry in the loader's configuration file or none of the defines will be found.

   As the all.js file is loaded and interpreted in one large piece anyway, it is of no advantage to have each of the sub modules declare their own define.

   I suggest to merge them all into one single standard define and export each of the sub-modules as namespaces, i.e. properties of the default output:

   "use strict";
   
   define(["require", "exports", "jquery"]
         ,  function (require, exports, $)
           {  exports.default =
             {  _Base: function (element)    // no closures => no enclosurement
                       {
                         this.element = element;
                         this._var = 1;
                       }
   
             ,  Derived: function (__super)
                         {
                           return __extends(function(element) { __super.call(this, element); }
                                           , __super
                                           );
                         }(this._Base)
   
             ,  Manager: function (provider)    // no closures => no enclosurement
                         {
                           this._provider = provider;
   
                           $("body").addClass("loaded");
                         }
             }
           });
   
   
   
   var __extends = (this && this.__extends)
                   || function (d, b)
                       {
                         for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
                         function __() { this.constructor = d; }
   
                         d.prototype = b === null
                           ? Object.create(b)
                           : (__.prototype = b.prototype, new __());
   
                         return d;
                       };
   
   //# sourceMappingURL=all.js.map

   
   While the current `import` statements result in the following JavaScript:

   define(["require", "exports", "Derived", "Manager"], function (require, exports, Derived_1, Manager_1) {
       "use strict";
       var d = new Derived_1.default(null);
       var m = new Manager_1.default(d);
   });
   
   //# sourceMappingURL=main.js.map

   The suggested import to look like this: import myLib from "./tests/Scripts/all.js" and rather generate something similar to this:

   "use strict";
   
   define(["require", "exports", "all"]
         , function (require, exports, all)
           {
             var d = new all.default.Derived(null);
             var m = new all.default.Manager(d);
           });
   
   //# sourceMappingURL=main.js.map
5. mhegazy commented on Jan 12, 2016

   

   Mohamed Hegazy (mhegazy)

   on Jan 12, 2016

   Contributor

   More actions

   looks like a duplicate of #4434
6. Mohamed Hegazy (mhegazy)

   closed this as completedon Jan 12, 2016
7. Mohamed Hegazy (mhegazy)

   added

   DuplicateAn existing issue was already createdAn existing issue was already created

   on Jan 12, 2016
8. SetTrend commented on Jan 12, 2016

   

   Axel D. (SetTrend)

   on Jan 12, 2016

   Author

   More actions

   No, not at all. As you can see from #4434, the suggestion there still suggests to create a number of define() statements - or System.register().
9. SetTrend commented on Jan 12, 2016

   

   Axel D. (SetTrend)

   on Jan 12, 2016

   Author

   More actions

   Please re-open.
10. mhegazy commented on Jan 12, 2016

    

    Mohamed Hegazy (mhegazy)

    on Jan 12, 2016

    Contributor

    More actions

    not really. see my comment in #4434 (comment).
11. SetTrend commented on Jan 12, 2016

    

    Axel D. (SetTrend)

    on Jan 12, 2016

    Author

    More actions

    Ah, OK. I was only looking at the conclusion at the end of the thread. Fully agree.
12. microsoft

    locked and limited conversation to collaborators on Jun 19, 2018