TypeScript имеет 5 доступных систем модулей и три загрузчика..
Системы модулей:
- AMD (Asynchronys Module Defenition)
- CommonJS
- UMD (Universal Module Defenition)
- System
- ES 2015
При компиляции систему модулей нужно указать параметром --module
tsc --module amd main.ts // для AMD tsc --module commonjs main.ts // для CommonJS tsc --module umd main.ts // для UMD tsc --module system main.ts // для SytemJS
После того как JS код будет скомпилирован, в HTML необходимо добавить соответствующий загрузчик.
Загрузчики:
- RequireJS: используется для загрузки AMD (Asynchronys Module Defenition)
- Browserify: использует синтаксис CommonJS
- SystemJS: универсальный загрузчик, может применяться для модулей любого типа
Например, мы использовали систему модулей AMD. Скомпилировали код через
tsc --outFile main.js --module amd main.ts
Теперь в случае, если просто подключить только main.js на html страницу
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TypeScript</title>
</head>
<body>
...
<script src="main.js"></script>
</body>
</html> в консоли появится ошибка
ReferenceError: define is not defined
Для того, чтобы скомпилированный код работал корректно, нужно подключить require.js и указать в нем главный скрипт
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TypeScript</title>
</head>
<body>
...
<script data-main="main" src="require.js"></script>
</body>
</html> Здесь в аттрибуте data-main, указываем путь к нашему скомпилированному скрипту без расширения js, т.е. main.js -> data-main="main"