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

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

18.12.2018 0 comments » Views: 351

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

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

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>

<!DOCTYPE html>

<html>

<head>

<title>TypeScript</title>

</head>

<body>

...

</body>

</html>

в консоли появится ошибка


ReferenceError: define is not defined

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>