Использование Typescript в браузере

Я много боролся с этой проблемой в последнее время. Я создаю новый проект Typescript и пытаюсь найти наилучший способ использования Typescript для соединения с базой данных и отображения результатов в браузере. Тем не менее я получаю консольные ошибки в браузере следующим образом:

Uncaught ReferenceError: exports is not defined ("export class Database")

Uncaught ReferenceError: require is not defined ("import {Database} from "./Database";")

Из того, что я могу сказать, я получаю ошибку, потому что файлы передаются в модуль CommonJS, который браузер не может понять.

Мой вопрос: это правильный диагноз проблемы? Если да, то как лучше всего решить эту проблему?

Один из подходов моего исследования говорит об использовании WebPack или Browserify, а другие предлагают использовать AMD/SystemJS или RequireJS. Мне любопытно, можно ли это сделать с помощью Gulp и Webpack, но я не уверен, с чего начать, и как это вписывается в рабочий процесс.

Класс базы данных

export class Database{
    //...
}

Монго Класс

<reference path="../../../typings/browser/ambient/node/index.d.ts" />
<reference path="../../../typings/browser/ambient/mongodb/index.d.ts" />

    import {IDatabase} from "../interfaces/IDatabase";
    import {Database} from "./Database";
    import {MongoClient} from "mongodb";

    class MongoDB extends Database implements IDatabase{
        //...
    }

Интерфейс базы данных

export interface IDatabase{
    //...
}

Параметры TSConfig

"target": "es6",
"module": "commonjs",
"moduleResolution": "classic",
"sourceMap": true,
Источник

2 ответа

Решение

Я понял мою проблему. Я ссылался на эти файлы прямо на странице "index.html", в этом не было необходимости. Нужно было изменить ссылку, чтобы контроллер узла знал, где находятся файлы, а не страницу индекса. После этого и при компиляции экспорт и требование работали нормально.

Источник

Теперь только tsc Инструмент командной строки может делать все, что нужно для использования машинописного текста в браузере.

Прежде всего, настройте модуль как AMD в tsconfig.json.

{
  "compilerOptions": {
    "module": "amd",
    "outDir": "./", //Just by default
    "rootDir": "./" //Just by default
  }
}

Во-вторых, подготовьте действительно простой index html. Он использует входной файл index.js для ускорения всего приложения (с помощью require.js).

<html>
  <body>
    <div id="me">Nothing</div>

    <script data-main="./index.js" src="https://cdn.bootcss.com/require.js/2.3.6/require.min.js"></script>
  </body>
</html>

Затем напишите все, что хотите, в index.ts.

//import something from somewhere

const el : HTMLElement | null = document.getElementById('me');
if(el){
  el.innerHTML = 'Hey I am typescript!';
}

Вы также можете импортировать другие файлы, как и в обычном машинописном тексте.

Наконец, запустите tsc команда для компиляции всех файлов, затем откройте index.html, вы увидите, что происходит.

Источник

Вот несколько ресурсов, с которых можно начать:

  1. Webpack: ссылка
  2. Gulp+ webpack: ссылка
  3. Browserify: ссылка
  4. Systemjs: ссылка, ссылка
  5. requirejs: ссылка
  6. Пример задания глотка: ссылка
  7. Пример базовой конфигурации systemjs в index.html: ссылка

Не существует "лучшего способа", это зависит от специфики вашего приложения. Если вам нужно / можете объединить все приложения в один файл js - webpack или browserify. В противном случае - systemjs, может быть, requirejs. Мои личные предпочтения - gulp+ systemjs. Но, как показывают ссылки 1-5, это можно сделать с любым загрузчиком.

Браузеры до сих пор не могут загружать модули javascript, и для их работы нужны так называемые загрузчики (то есть webpack, requirejs, systemjs, browserify). Вот почему вы видите ошибки, которые вы указали. Чтобы от них избавиться - выберите один из загрузчиков, настройте его и ошибки исчезнут.

Надеюсь, это поможет вам начать.

Источник
Другие вопросы по тегам