为什么 module.js 文件在浏览器中不是运行

Question

代码不是运行ning 并且没有任何内容输出到控制台，就像我尝试 console.log("random text");在 module.ts 中，它不会向控制台记录任何内容

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

import { add } from "./function1";
import { subtract } from "./function2";
import { Person } from "./interface";

const John: Person = {
    name: "John",
    lastname: "Doe",
    greet(): void {
        console.log(`Hello, ${this.name} ${this.lastname}`);
    }
}
const addition = add(3, 3);
const subtraction = subtract(5, 2); 

console.log("Random Text"); //Doesnt Work



PACKAGE JSON
{
  "name": "assignment_4.3",
  "version": "0.0.1",
  "description": "typescript modules app",
  "main": "module.js",
  "dependencies": {
    "systemjs": "^0.20.18"
  },
  "devDependencies": {
    "lite-server": "^2.3.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"lite-server"
  },
  "keywords": [
    "typescript",
    "modules"
  ],
  "license": "ISC"
}

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">   
    <title>Document</title>
    <script src="./node_modules/systemjs/dist/system.js"></script>
</head>

<body>
    
    <script>
        SystemJS.config({
            baseUrl: '/',
            defaultExtensions: true
        });

        SystemJS.import('./module.js');
    </script>
</body>

</html>

Output HTML =====================

<body data-gr-c-s-loaded="true" cz-shortcut-listen="true"><script id="__bs_script__">//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.18.13'><\/script>".replace("HOST", location.hostname));
//]]></script><script async="" src="/browser-sync/browser-sync-client.js?v=2.18.13"></script>


<script>
    SystemJS.config({
        baseUrl: '/',
        defaultExtensions: true
    });

    SystemJS.import('module.js');
</script>


</body>

Answer 1

问题是您正在设置 tsc 来生成 SystemJS 包，然后使用 System.import 加载包。仅加载捆绑包注册捆绑包中的模块。它不会执行捆绑包中的模块：仍然需要请求它们。

当您使用 outFile 时，您说的是 "put all my modules in the same file"，这是一个捆绑包。这将创建一个文件，其模块名称与您在 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，在packages.

内有效

并让 SystemJS 添加 .js，因此导入 module 而不是 module.js:

SystemJS.import("module");

如果您想使用捆绑包

更改您的 tsconfig.json 以给您的包取一个与您的模块不同的名称，因为这将有助于消除混淆：

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

并且 declare the bundle 在您的 SystemJS 配置中：

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

就像上面一样，您应该在没有扩展名的情况下导入：

SystemJS.import("module")

这是题外话，但我建议不要将模块命名为 module，因为除了没有描述模块的内容外，它还会损害可移植性。例如AMD加载器，为加载器提供的一种虚拟模块保留模块名称module。

为什么 module.js 文件在浏览器中不是 运行

Why is module.js file not running in the browser

typescript

systemjs

如果您不想使用捆绑包

如果您想使用捆绑包

为什么 module.js 文件在浏览器中不是运行