Question

代码没有运行，没有任何东西输出到控制台，就像我尝试console.log（“随机文本”）;在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时，您说“将我的所有模块放在同一个文件中”，这是一个捆绑包。这将创建一个文件，其模块名称与您在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"
    }
}

SystemJS配置中的declare the bundle：

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

如上所述，您应该在没有扩展名的情况下导入：

SystemJS.import("module")

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

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

1 个答案:

如果您不想使用捆绑包

如果您想使用捆绑