როგორ გამოვიყენოთ TypeScript მოდულის: system ექსპორტი systemjs-ით ბრაუზერში


ვცდილობ systemjs-ის გამოყენებას, და მე ეს კოდი tsc-ით გავატარე ექსპორტზე: https://github.com/quantumjs/solar-popup/blob/master/package.json#L10

{
  "compilerOptions": {
    "module": "system",
    "target": "es5",
    "sourceMap": true,
    "outFile":"./build/solar-popup.js",
    "sourceRoot": "./src/SolarPopup.ts",
    "rootDir": "./src/"

  },
  "exclude": [
    "node_modules"
  ]
}

თუმცა, როცა ცდილობ მას ბრაუზერში გამოიყენო, იმპორტირებულ ობიექტში არცერთი ექსპორტი არაა. მგონია, რომ ეს გამოწვეულია იმით, რომ solar-popup.js არ შეიცავს ექსპორტებს, მხოლოდ System.register გამოძახილებს.

ექსპორტი ასე გამოიყურება:

System.register("SolarPopup", ["ModalBackground", "constants"], function (exports_4, context_4) {
    "use strict";
    var __moduleName = context_4 && context_4.id;
    var ModalBackground_1, constants_2, SolarPopup;
    return {
        setters: [
            function (ModalBackground_1_1) {
                ModalBackground_1 = ModalBackground_1_1;
            },
            function (constants_2_1) {
                constants_2 = constants_2_1;

და ა.შ.

პასუხი #1

როდესაც თქვენ გაქვთ ეს ორი ოპცია tsconfig.json-ში

"module": "system",
"outFile":"./build/solar-popup.js",

TypeScript წარმოქმნის ერთ გამოსახულ ფაილს, რომელიც შეიცავს რამდენიმე System.register გამოძახებას, თითოეული რეგისტრირებს მოდულს თავის სახელთან ერთად:

 System.register("SolarPopup", ["ModalBackground", "constants"], function ...

"SolarPopup" აქ არის მუჯულის სახელი. SystemJS ეს ფაილი აფასებს როგორც პაკეტს, მოდულის გარეშე.

ბანდლის იმპორტის შედეგი არის ცარიელი ობიექტი, ხოლო გვერდითი ეფექტი ის არის, რომ ყველა მოდული შიგნით რეგისტრირდება და ხელმისაწვდომია იმპორტისთვის მყისიერად, მათი დამატებითი ჩამოტვირთვის საჭიროების გარეშე.

ასე რომ, დამატებითი იმპორტი დაგჭირდებათ, რომ ბანიდან მოდული მიიღოთ. სცადეთ ეს:

System.import('../build/solar-popup.js').then(function() {
    System.import('SolarPopup').then(function(SolarPopup) {
        console.dir(SolarPopup);
    });
});