Использование машинописного текста в браузере

Question

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

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

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

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

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

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

Класс Database

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, 

Answer 1

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

Answer 2

Вот некоторые ресурсы, чтобы вы начали:

1. Webpack: link
2. Глоток + WebPack: link
3. Browserify: link
4. Systemjs: link, link
5. requirejs: link
6. Задача пробной глотки: link
7. Пример основной systemjs конфигурации в index.html: link

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

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

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