Question

我在谷歌上搜索，显然没有偶然发现这个解释。我正在撰写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>

您可以在此处详细了解：Namespace and Modules

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 个答案: