Typescript导入导出的类会发出require(..），从而导致浏览器错误

Typescript importing exported class emits require(...) which produces browser errors

本文关键字：浏览器 错误 require 导入 Typescript      更新时间：2023-09-26

我在谷歌上搜索过，显然没有偶然发现解释。我用Typescript编写，最终目标是拥有一个.js文件（或多个），我可以通过HTML中的脚本标记引用该文件。

按钮.ts

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

发射。。。

按钮.js

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

它不会在浏览器中运行，因为require（）没有定义。

同样。。。

按钮

...
export class ButtonForm {
...

发射。。。

js按钮

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

问题

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

如果您不打算使用模块系统（如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>

您可以在这里阅读更多关于它的信息：命名空间和模块

您可以使用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>

在示例-two.js中，您可以执行以下操作：

var exampleOne = require('example-one');
var exampleTwo = {} // do your magic
相关文章：