X

TypeScript: система модулей и их загрузка

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"

Категории: JavaScript
Тэги: require.jstypescript