Форум программистов, компьютерный форум, киберфорум
Наши страницы
8Observer8
Войти
Регистрация
Восстановить пароль
Рейтинг: 5.00. Голосов: 1.

Компиляция из TypeScript в ES3 или ES5 для использования в браузере

Запись от 8Observer8 размещена 17.12.2018 в 12:06
Обновил(-а) 8Observer8 09.01.2019 в 21:06

Есть много способов, как скомпилировать в ES3 или ES5, чтобы использовать в браузере.

Я знаю хорошо два способа:
  • Gulp + Browserify. Здесь подробная инструкция: Gulp · TypeScript
  • Использование "module": "amd" и библиотеку Require.js

Остановлюсь подробно на втором варианте. Второй вариант очень хорошо подходит если вам нужно расположить ваши модули в песочнице, например, на Plunker, чтобы задать вопрос по TypeScript. То есть когда вам нужно сделать минимальный пример для демонстрации какого-то вопроса для размещения в песочнице и этот минимальный пример состоит их нескольких модулей. Для разработки веб приложений этот вариант тоже подходит.

Пример в песочнице, который выводит информацию на окно браузера:https://plnkr.co/edit/QmAov1yCDCFChmKKjuyj?p=preview

Результат:
Цитата:
Hello from main
triangle1 color = green
triangle2 color = yellow
Локально на своей машине вы:
  • создаёте пустую папку для проекта
  • создаёте файл package.json с помощью команды:
    Цитата:
    npm init -y
  • устанавливаете файл с типами для Require.js:
    Цитата:
    npm i -D @types/requirejs

Минимальный tsconfig.json:

JSON
1
2
3
4
5
6
{
    "compilerOptions": {
        "target": "es5",
        "module": "amd"
    }
}
Напишем два модуля. Есть главный модуль Program, в который импортируется модуль Trinangle. В классе Triangle хранится свойство "color", которое мы выводим на экран в функции main класса Program.

Program.ts

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { Triangle } from "./Triangle";
 
// Playground: https://plnkr.co/edit/QmAov1yCDCFChmKKjuyj?p=preview
 
class Program
{
    public static main()
    {
        document.write("Hello from main<br>");
 
        let triangle1 = new Triangle();
        document.write(`triangle1 color = ${ triangle1.color }<br>`);
 
        let triangle2 = new Triangle("yellow");
        document.write(`triangle2 color = ${ triangle2.color }`);
        document.close();
    }
}
Program.main();
Triangle.ts

Javascript
1
2
3
4
5
6
7
8
9
export class Triangle
{
    public color: string;
 
    public constructor(color = "green")
    {
        this.color = color;
    }
}
Файл RequireConfig.ts определяет корень проекта baseUrl и определяет главный модуль:

Javascript
1
2
3
4
5
6
7
8
requirejs.config({
    baseUrl: "."
});
 
requirejs(["Program"], (Program) =>
{
 
});
Загружаем сначала файл require.min.js, потом RequireConfig.js, а далее загружается главный модуль и все оcтальные модули, которые требуются в import

index.html
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Minimal Example in TypeScript and Require.js</title>
    <script data-main="RequireConfig" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
</head>
 
<body>
 
</body>
 
</html>
Enter the command to the terminal for compilation:
Цитата:
tsc
Now we can open "index.html" in browser and we can see that all modules was loaded.
Размещено в Без категории
Просмотров 222 Комментарии 0
Всего комментариев 0
Комментарии
 
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru