如何在远离html的情况下使用在WebStorm中生成的TypeScript?

问题描述 投票:0回答:1

我已经尝试了所有的答案,但我已经堆积了错误,如

main.js:2未捕获的ReferenceError:未定义导出

当我使用编译es5作为目标

未捕获的SyntaxError:意外的令牌{

当我使用编译es6作为目标

main.ts

import {MyLib} from './mylib';
let myLib = new MyLib("Anonymous", "Someone");
console.warn(myLib);

mylib.ts

export class MyLib {
    constructor(public a: String, public b: String) {

    }


    toString() {
        return "library tostring: " + this.a + " " + this.b;
    }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

的index.html

<html>

    <head>
        <title>
            ts-demo !!
        </title>

        <script type="module" src="./require.js"></script>
        <script type="module" src="./system.min.js"></script>

        <script src="./tsdemo/main.js"></script>
    </head>
    <body>

    </body>

</html>
javascript typescript requirejs phpstorm webstorm
1个回答
2
投票
  1. 您需要将<script>类型设置为module以使ES6模块工作,如:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="module" src="./tsdemo/main.js"></script>
</head>
<body>
</body>
</html>
  1. 此外,导入中需要.js扩展名才能使其在浏览器中运行。 Typescript编译器没有自动添加它的选项(https://github.com/Microsoft/TypeScript/issues/16577),但您可以在main.ts文件中添加扩展名,例如:
    import {MyLib} from './mylib.js';
    let myLib = new MyLib("Anonymous", "Someone");

    console.warn(myLib);

tsc做正确的事情并从.ts文件中解析类型,保留生成的javascript中的扩展名

© www.soinside.com 2019 - 2024. All rights reserved.