在Magento2中加載已編譯的Typescript AMD模塊

我試圖將Magento 2變成未來，並在那裏添加Typescript支持。一切編譯正確，但我不能加載它:(在Magento2中加載已編譯的Typescript AMD模塊

要求-config.js

var config = { 
    deps: [ 
     "web/js/app" 
    ], 
    bundles: { 
     "web/js/app": [ "main", "moduleone", "moduletwo" ] 
    } 
};

網/ JS/app.js

define("moduleone", ["require", "exports"], function (require, exports) { 
    "use strict"; 
    Object.defineProperty(exports, "__esModule", { value: true }); 
    var ModuleOne = (function() { 
     function ModuleOne() { 
     } 
     ModuleOne.prototype.sayHello = function() { 
      console.log("Hello from ModuleTwo!"); 
     }; 
     ModuleOne.prototype.sayHelloTo = function (who) { 
      console.log("Hello " + who.trim() + ". This is ModuleTwo"); 
     }; 
     return ModuleOne; 
    }()); 
    exports.ModuleOne = ModuleOne; 
}); 
define("moduletwo", ["require", "exports"], function (require, exports) { 
    "use strict"; 
    Object.defineProperty(exports, "__esModule", { value: true }); 
    var ModuleTwo = (function() { 
     function ModuleTwo() { 
     } 
     ModuleTwo.prototype.sayHello = function() { 
      console.log("Hello from ModuleTwo!"); 
     }; 
     ModuleTwo.prototype.sayHelloTo = function (who) { 
      console.log("Hello " + who.trim() + ". This is ModuleTwo"); 
     }; 
     return ModuleTwo; 
    }()); 
    exports.ModuleTwo = ModuleTwo; 
}); 
define("main", ["require", "exports", "moduleone", "moduletwo"], function (require, exports, Module1, Module2) { 
    "use strict"; 
    Object.defineProperty(exports, "__esModule", { value: true }); 
    var Main = (function() { 
     function Main() { 
      console.log('Test'); 
     } 
     Main.prototype.start = function() { 
      var m1 = new Module1.ModuleOne(); 
      var m2 = new Module2.ModuleTwo(); 
      m1.sayHelloTo("David Wesst"); 
      m2.sayHelloTo("David Wesst"); 
     }; 
     return Main; 
    }()); 
    exports.Main = Main; 
});

加載模塊：

<script type="text/javascript"> 
require(['main'], function(Main) { 
    console.log(Main); 
    var app = new Main(); 
    app.start(); 
});</script>

調用主要收益：

Uncaught TypeError: Main is not a constructor

Plz help！

來源

2017-02-27 Wewow

既然你正在寫原AMD的JavaScript，只要使用return Main和不exports.Main = Main，是應該做的伎倆。

也許我是誤解，那是編譯輸出，看起來確實如此。

在這種情況下使用，如果是從打字稿源代碼編譯，你可以（非常非常不愉快）使用

export = class Main {};

超過你所擁有的，現在這將是

export class Main {}

就個人而言，我會咬緊牙關，然後寫

export default class Main {};

和引導與

<script type="text/javascript"> 
require(['main'], function(module) { 
    var Main = module.default; 
    console.log(Main); 
    var app = new Main(); 
    app.start(); 
});</script>

通過這種方式，我們可以一起向前移動並殺死瀏覽器中TypeScript + NodeJS + CJS + AMD + Interop的不良遺產部門。

來源

2017-02-27 10:02:09

在Magento2中加載已編譯的Typescript AMD模塊

回答

相關問題