Typescript 为什么module.js文件没有在浏览器中运行

代码没有运行，没有任何东西输出到控制台，就像我尝试console.log（“随机文本”）；在module.ts中，它不会将任何内容记录到控制台

在这里，我基本上是在我的typescript项目中运行模块。所以我安装了systemjs，并将其包含在添加的配置中。在tsconfig中添加模块“system”。但它仍然不起作用

从“/function1”导入{add}；
从“/function2”导入{subtract}”；
从“/interface”导入{Person}；
警察约翰：人={
姓名：“约翰”，
姓：“Doe”，
问候（）：无效{
log（`Hello，${this.name}${this.lastname}`）；
}
}
常数加法=加法（3，3）；
常量减法=减法（5,2）；
控制台日志（“随机文本”）//不起作用
包JSON
{
“名称”：“任务4.3”，
“版本”：“0.0.1”，
“说明”：“typescript模块应用程序”，
“main”：“module.js”，
“依赖项”：{
“systemjs”：“^0.20.18”
},
“依赖性”：{
lite服务器“^2.3.0”
},
“脚本”：{
“测试”：“echo\”错误：未指定测试\“&退出1”，
“dev”：“lite服务器”
},
“关键词”：[
“打字稿”，
“模块”
],
“许可证”：“ISC”
}

{
“编译器选项”：{
“模块”：“系统”，
“目标”：“es5”，
“noemiton”：没错，
“源地图”：正确，
“removeComments”：正确，
“outFile”：“../module.js”
}
}

文件
SystemJS.config({
baseUrl:“/”，
defaultExtensions:true
});
SystemJS.import（'./module.js'）；
输出HTML=====================
//
SystemJS.config({
baseUrl:“/”，
defaultExtensions:true
});
SystemJS.import（'module.js'）；

问题在于，您正在设置

tsc

以生成SystemJS捆绑包，然后使用

System.import

加载捆绑包。加载捆绑包仅注册捆绑包中的模块。它不执行捆绑包中的模块：它们仍然需要被请求

当您使用

outFile

时，您说的是“将我的所有模块放在同一个文件中”，这是一个捆绑包。这将创建一个模块名与您输入的TypeScript代码完全相同的文件。因此，如果它们在那里没有扩展，那么它们在生成的包中就没有扩展。通过查看

tsc

生成的文件，您可以看到：

System.register("module", [], function (exports_1, context_1) {
    "use strict";
    var __moduleName = context_1 && context_1.id;
    return {
        setters: [],
        execute: function () {
            console.log("MODULE");
        }
    };
});

如果您不想使用捆绑包 更改您的

tsconfig.json

以删除

outFile

：

{
    "compilerOptions": {
        "module":"system",
        "target": "es5",
        "noEmitOnError": true,
        "sourceMap": true,
        "removeComments": true
    }
}

将SystemJS配置更改为：

    SystemJS.config({
      baseUrl: './',
      packages: {
        '': {
          defaultExtension: "js"
        },
      }
    });

添加默认扩展名的设置是单数形式的

defaultExtension

，在

包中有效

让SystemJS添加
.js
，因此导入
模块而不是
模块.js
：

SystemJS.import("module");

如果你想使用一个包
更改您的
tsconfig.json
，为您的包指定一个与模块不同的名称，因为这将有助于消除混淆：

{
    "compilerOptions": {
        "module":"system",
        "target": "es5",
        "noEmitOnError": true,
        "sourceMap": true,
        "removeComments": true,
        "outFile": "bundle.js"
    }
}

在SystemJS配置中：

   SystemJS.config({
        baseUrl: './',
        bundles: {
          "bundle.js": ["module"],
        },
    });

如上所述，您应该在不使用扩展名的情况下导入：

SystemJS.import("module")


这是一个旁白，但我建议不要命名您的模块
module
，因为除了不描述模块的功能外，它还损害了可移植性。例如，AMD加载程序，为加载程序提供的一种虚拟模块保留模块名
module
。
为什么控制台上会有任何内容？您有一个
greet
方法，该方法有一个
console.log
语句，但它不会在任何地方被调用。是否有我遗漏的内容，或者您遗漏的内容需要包含在您的问题中？我之前调用过该函数，但它仍然不起作用，即使我将console.log（“随机文本”）添加到模块中。它不会登录到控制台请不要添加诸如“为什么没有人应答”之类的分散注意力的文本你的问题的标题。为什么不给包中的模块提供扩展。这是否意味着当调用bundle.js时，它会加载模块？我似乎无法理解当您在TypeScript中导入模块时，该模块是如何工作的，您导入的是
“something”
，而不是
“something.js”
或
“something.ts”
tsc
不会弄乱这一点，并保持模块名称不变。这允许最大的灵活性。因此，代码可以在所有类型脚本都已预编译为
.js
文件的情况下使用。您只需要让加载程序查找附加了
.js
的相同模块名。同样的代码也可以在TypeScript被动态编译的情况下使用。在这种情况下，模块加载器将被配置为在模块名称的末尾添加一个
.ts
。嘿，谢谢，路易斯。我非常感谢你的回答和回答。我想问的最后一件事是，除了从文档中，我在哪里可以学到更多关于这一切的知识。我希望有一个很好的学习资源，我可以告诉你，但我不知道。我所学到的是通过反复试验和阅读SystemJS的源代码，
tsc
，等等。由于缺乏文档，要获得一个环境设置是多么的困难，这真是太可笑了。感谢您提供此解决方案！