简体   繁体   English

编译后,打字稿代码在浏览器中不显示任何内容

[英]Typescript code not showing anything in the browser after transpiling

I am trying to write some very simple examples of Typescript code In Atom editor. 我试图在Atom编辑器中编写一些非常简单的Typescript代码示例。 The example consists of one main.ts and a very small module with only one small class (myclasses.ts) . 该示例由一个main.ts和一个只有一个小类(myclasses.ts)的非常小的模块组成。 I import the module normally 我正常导入模块
The transpiling process goes without any errors and .js files Are being created normally in the output folder. 转译过程没有任何错误,并且.js文件通常在输出文件夹中创建。 I trans-pile using the CLI 我使用CLI进行转堆

tsc *.ts --target 'es6' 

And I do it also from within Atom, in both cases it finishes without Any errors nor warnings. 而且我也从Atom内部执行此操作,在两种情况下都完成了操作,没​​有任何错误或警告。 When I run the main.js file from the CLI using: 当我使用以下命令从CLI运行main.js文件时:

node main.js 

It works just fine and I get the results and the output of every function But when I Open the html file that calls the main.js nothhing Happens! 它工作得很好,我得到了每个函数的结果和输出,但是当我打开调用main.js的html文件时,什么都没发生! No errors no warnings nothing in the console, no output ... 没有错误,没有警告,控制台中没有任何内容,没有输出...

this is the contents of tsconfig.json: 这是tsconfig.json的内容:

{
  "compilerOptions": {

    "target": "ES2015",
    "module": "umd",
    "outDir": "built",
    "strict": true

  },

  "exclude": [
      "node_modules"
  ]
}

and this the main.js (after transpiling): 这是main.js(在编译后):

(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "./myclasses"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const myclasses_1 = require("./myclasses");
    var colors;
    (function (colors) {
        colors[colors["Red"] = 0] = "Red";
        colors[colors["Green"] = 1] = "Green";
        colors[colors["Blue"] = 2] = "Blue";
    })(colors || (colors = {}));
    ;
    let msg = 'Ameme tmena';
    let result = msg.toUpperCase();
    console.log(result);
    let aa = msg.endsWith('a');
    console.log(aa);
    function tryLoop(l) {
        for (let i = 0; i < l; i++) {
            let PowrOf2 = () => Math.pow(i, 2);
            console.log(i, PowrOf2());
        }
    }
    ;
    tryLoop(7);
    let test1;
    test1 = 'Amama Terr';
    let ThEnd = test1.endsWith('r');
    console.log(ThEnd);
    let p1 = new myclasses_1.Point(78, 89);
    p1.calcXY();
    p1.x = 8;
    p1.y = 90;
    p1.calcXY();
    p1.x = -8;
    p1.y = 0;
    p1.calcXY();
    console.log('Hiiiiiii');
    let testing;
    testing = 19;
    testing += (testing > 20) ? -2 : +2;
    console.log(testing);
});

You can just change the tsconfig not to create module: 您可以更改tsconfig而不创建模块:

{
  "compilerOptions": {

    "target": "ES2015",
    "module": "none",
    "outDir": "built",
    "strict": true

  },

  "exclude": [
      "node_modules"
  ]
}

This should output clean JS code. 这应该输出干净的JS代码。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM