Typescript导入导出的类发出require（...），这会产生浏览器错误

Question

我已经google了一下，显然没有偶然发现这个解释。 我正在撰写Typescript，最终目标是拥有一个.js文件（或众多），我可以通过HTML中的脚本标签来引用。

button.ts

...
import * as BF fro "./button-form.ts";
...

......发出......

button.js

...
var BF = require("./button-form");
...

...由于未定义require（），因此无法在浏览器中运行。

同样...

按钮form.ts

...
export class ButtonForm {
...

......发出......

按钮form.js

...
exports.ButtonForm = ButtonForm;
...

问题

由于'require'和'exports'，我无法在浏览器中执行此javascript。 在我看来，在TS中导出和导入类引用是合适的，但输出不是我可以使用的。 这里肯定存在知识差距，但我不确定我在寻找什么。

Answer 1

如果您不打算使用模块系统（例如requirejs），那么您不需要import但使用/// <reference path="..." />

例如：

A.ts

namespace A {
    export function echo(value: any): void {
        console.log(`A.echo: ${ value }`);
    }
}

B.ts

/// <reference path="A.ts" />

namespace B {
    export function echo(value: any): void {
        A.echo(value);
        console.log(`B.echo: ${ value }`);
    }
}

在你的HTML中：

<head>
    <script src="A.js"></script>
    <script src="B.js"></script>
    <script>
        B.echo("hey");
    </script>
</head>

您可以在此处阅读更多相关信息：命名空间和模块

Answer 2

您可以使用https://www.npmjs.com/package/require-bro

首先包括require-bro.js然后是其余的js，最后你可以使用require。 功能只需要在全局窗口对象中搜索。

<script src="require-bro.js"></script>
<script src="example-one.js"></script>
<script src="example-two.js"></script>

在example-two.js中你可以做类似的事情：

var exampleOne = require('example-one');
var exampleTwo = {} // do your magic

Typescript导入导出的类发出require（...），这会产生浏览器错误

问题描述

button.ts

button.js

按钮form.ts

按钮form.js

问题

2 个解决方案

解决方案1
2 已采纳 2016-05-15 18:28:56

解决方案2
1 2016-05-15 18:33:33

Typescript导入导出的类发出require（...），这会产生浏览器错误

问题描述

button.ts

button.js

按钮form.ts

按钮form.js

问题

2 个解决方案

解决方案1 2 已采纳 2016-05-15 18:28:56

解决方案2 1 2016-05-15 18:33:33

解决方案1
2 已采纳 2016-05-15 18:28:56

解决方案2
1 2016-05-15 18:33:33