如何使用 TypeScript 模块:在浏览器中使用 systemjs 进行系统导出 [英] How to consume TypeScript module:system export with systemjs in browser

问题描述

我正在尝试使用 systemjs，并且我已经使用 tsc 导出了此代码:

导出如下:

System.register("SolarPopup", ["ModalBackground", "constants"], function (exports_4, context_4) {严格使用"；var __moduleName = context_4 &&context_4.id;var ModalBackground_1、constants_2、SolarPopup；返回 {二传手: [功能(ModalBackground_1_1){ModalBackground_1 = ModalBackground_1_1;},函数(常量_2_1){常量_2 = 常量_2_1;

等

解决方案

当你在 tsconfig.json

中有这两个选项时

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

TypeScript 生成包含多个 System.register 调用的单个输出文件，每个调用都使用自己的名称注册一个模块:

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

SolarPopup"是这里的模块名称.SystemJS 将此类文件解释为 捆绑包，而不是模块.

导入 bundle 的结果是一个空对象，副作用是里面的所有模块都注册了，可以立即导入，无需获取.

因此，您需要额外导入才能从包中获取模块.试试这个:

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

I’m trying to use systemjs, and I have exported this code with 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"
  ]
}

However then trying to consume it in the browser the imported object doesn't contain any of the exports. I think this is due to the solar-popup.js not containing any exports, just System.register calls

The export looks like this:

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;

etc

解决方案

When you have these two options in tsconfig.json

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

TypeScript generates single output file that contains several System.register calls, each registering a module with its own name:

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

"SolarPopup" is a module name here. SystemJS interprets such file as a bundle, not a module.

The result of importing a bundle is an empty object, and a side effect is that all modules inside are registered and are available immediately for importing without need to fetch them.

So you need an additional import to get a module from the bundle. Try this:

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

这篇关于如何使用 TypeScript 模块:在浏览器中使用 systemjs 进行系统导出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！