Typescript включить модули в браузере? - PullRequest
Новая
       17

Typescript включить модули в браузере?

0 голосов
/ 18 декабря 2018

Я только начинаю с TypeScript (и разработки интерфейса в целом), исходящего из ac # background, так что извините, если это действительно простой вопрос, но я не могу понять, где я ошибаюсь ...

Сейчас я пытаюсь создать действительно простую программу для извлечения некоторых примеров данных из URL в формате JSON, анализа классов TS и отображения их на странице.

Чтобы получить ответ json, я нашел этот ответ , который рекомендует использовать пакет узла.Я установил его, и, кажется, все в порядке (по крайней мере, TS не выдаёт мне ошибок).

Я также понял, что мне нужно скомпилировать (не уверен, что это правильный термин?) С Browserifyсделать его совместимым с браузером, так как он использует модуль узла.Я сделал это, но теперь, когда я пытаюсь запустить в браузере, он говорит, что мой метод не определен. 

export class Keynote {
KeyValue: string;
Description: string;
Parent: string;
}

Класс извлечения: 

import {Keynote} from "./Keynote";
import * as request from "request-promise-native";

function GetKeynotes(): Array<Keynote> {
    const baseUrl = 'https://revolutiondesign.biz/Sandbox/TypeScript/KeynoteProvider.php';
    var options = {uri: baseUrl};

    const result = JSON.parse(request.get(options));
    return result;
}

и html: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Keynotes Testing</title>
    <script src="bundle.js"></script>
    <script>
        function Retrieve() {
            var notes = GetKeynotes();
            document.getElementById('container').innerText = JSON.stringify(notes);
        }
    </script>
</head>
<body>
<div>
    <button content="Get some notes" onclick="Retrieve()">Get some notes</button>
</div>
<div id="container">

</div>
</body>
</html>

Browserify действительно длинный, поэтому я не хотел копировать здесь, но вы можете увидеть его в https://revolutiondesign.biz/Sandbox/TypeScript/KeynoteDisplay.html в источнике, если хотите.

Когда я нажимаю кнопку, яполучить эту ошибку в браузере: 

KeynoteDisplay.html:9 Uncaught ReferenceError: GetKeynotes is not defined
    at Retrieve (KeynoteDisplay.html:9)
    at HTMLButtonElement.onclick (KeynoteDisplay.html:16)
Retrieve @ KeynoteDisplay.html:9
onclick @ KeynoteDisplay.html:16

GetKeynotes определен в моей машинописи, и в 5-й строке bundle.js я вижу функцию с таким именем ... Почему она не определена?

ОБНОВЛЕНИЕ

Хорошо, я играл с jspm и SystemJs, но у меня все еще что-то не так.Я сослался на модуль с помощью jspm и сделал сборку для build.js и загрузил все это, просто чтобы убедиться, что все есть.Вот теги в моем html для сценариев: 

<script src="../../jspm_packages/system.js"></script>
<script src="../../config.js"></script>
<script src="build.js"></script>
<script>
    System.import("Sandbox/TypeScript/build.js")
    function Retrieve() {
        System.import("Sandbox/TypeScript/build.js")
        var notes = GetKeynotes();
        document.getElementById('container').innerText = JSON.stringify(notes);
    }
</script>

Когда я нажимаю кнопку, я могу отладить свою функцию, но она все равно выдает ошибку «GetKeynotes не определена», как и раньше ...Я снова вижу функцию с этим именем в файле build.js, поэтому не понимаю, почему она не находит его.

Я также попробовал System.import («Sandbox / TypeScript / KeynoteRetrieval.js»)но выдает ошибку: 

Uncaught (in promise) Error: (SystemJS) Node tls module not supported in browsers.
    Error loading https://revolutiondesign.biz/Sandbox/TypeScript/KeynoteRetrieval.js
...