Geek Answers Handbook

Typescript importing imported class emissions requires (...) that creates browser errors

I was looking googled and apparently did not stumble over the explanations. I am writing in Typescript with the ultimate goal of having a .js file (or set) that I can reference through script tags in HTML.

button.ts

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

... emits ...

button.js

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

... which does not start in the browser because require () is not defined.

Similarly ...

Button-form.ts

...
export class ButtonForm {
...

... emits ...

Button-form.js

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

Problem

I cannot execute this javascript in the browser due to "require" and "export". It seems reasonable to TS to export and import class references, but the output is not something I can use. There should be a knowledge gap, but I'm not sure what I'm looking for.

+4
2

(, 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>

:

+2

https://www.npmjs.com/package/require-bro

require-bro.js, js, . .

<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
+1

More articles:


All Articles