8Observer8

Форум программистов и сисадминов Киберфорум

Войти

Регистрация
Восстановить пароль

Browserify TypeScript + Bonus: UglifyJS

Запись от 8Observer8 размещена 21.02.2019 в 18:32

Показов 1634 Комментарии 0

Метки typescript

Blog content

It is the most common problem for anyone who starts to study TS. They cannot include a few ".js" files after compilation to <script> tags in "index.html".

It is very simple in JS. You have two files in JS and you can include them in "index.html"

PHP/HTML
1
2
3
4
5
6
7
8
<html>
 
<head>
    <script src="js/sayHello.js"></script>
    <script src="js/main.js"></script>
</head>
 
</html>

sayHello.js

JavaScript
1
2
3
4
function sayHello(name)
{
    console.log("Hello, " + name);
}

main.js

JavaScript
1
2
3
4
5
function main()
{
    sayHello("Ivan");
}
window.onload = main;

Output:

Hello, Ivan

But if you rewrite these files in TypeScript:

sayHello.ts

JavaScript
1
2
3
4
export function sayHello(name: string): void
{
    console.log("Hello, " + name);
}

main.ts

JavaScript
1
2
3
4
5
6
7
import { sayHello } from './sayHello';
 
function main(): void
{
    sayHello("Ivan");
}
window.onload = main;

And if you compile them to JavaScript:

tsc ts/main.ts ts/sayHello.ts --outDir "dist"

You cannot just include this files in "index.html":

PHP/HTML
1
2
3
4
5
6
7
8
<html>
 
<head>
    <script src="dist/sayHello.js"></script>
    <script src="dist/main.js"></script>
</head>
 
</html>

You will see this errors in the browser debug console:

Uncaught ReferenceError: exports is not defined
at sayHello.js:2

Uncaught ReferenceError: exports is not defined
at main.js:2

There are a few ways to solve this problem:

You can concatenate all generated ".js" files in one bundle.js file using: Webpack, Gulp, Grund and so on. For example, see this official instruction: Gulp - TypeScript
You can compile to AMD modules and use RequreJS to load them. For example, see my instruction: A few TypeScript files on Sandbox
You can use Browserify to concatenate all generated ".js" files in one bundle.js file

I will show you how to use Browserify. Install Browserify using this command:

npm install browserify -g

You can create bundle.js using this command:

browserify dist/main.js dist/sayHello.js -o dist/bundle.js

You will see "bundle.js" in the "dist" folder. Now you can include "bundle.js" in "index.html" using <script> tag:

PHP/HTML
1
2
3
4
5
6
7
<html>
 
<head>
    <script src="dist/bundle.js"></script>
</head>
 
</html>

Open "index.html" file in a browser and you will see "Hello, Ivan" in the browser debug console.

Bonus. UglifyJS

You can install uglifyjs:

npm install uglify-js -g

And compress your "bundle.js" to "bundle.min.js":

uglifyjs dist/bundle.js -o dist/bundle.min.js

Do not forget to change a script name from "bundle.js" to "bundle.min.js" in "index.html":

index.html

PHP/HTML
1
2
3
4
5
6
7
<html>
 
<head>
    <script src="dist/bundle.min.js"></script>
</head>
 
</html>

Метки typescript

Размещено в Без категории

« A few TypeScript files on Sandbox Главная страница Specifications for Calculator using Jasmine and TypeScript »

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.

Всего комментариев 0

Комментарии

8Observer8 8Observer8 вне форума

Регистрация 05.10.2013
Адрес Саратов
Сообщений 8,116
Записей в блоге 243

Новые блоги и статьи Все статьи Все блоги /
Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Jin X 06.09.2026 Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Работая с форумом и нейросетями в браузере часто хочется что-то подкорректировать или добавить какого-то функционала. Ниже прикреплён. . .	Программа опроса у.з. расходомера SLS-720F Argus19 02.09.2026 Программа опроса у. з. расходомера SLS-720F Программа опрашивает один раз в минуту три ультразвуковых расходомера SLS-720F через интерфейс RS-485 по протоколу Modbus RTU. Опрашиваются регистры. . .	Hyper-V: Компьютер должен поддерживать доверенный платформенный модуль 2.0. Maks 31.08.2026 При установке Windows 11 на виртуальную машину Hyper-V 2-го поколения вылезла такая ошибка: Решение: в параметрах виртуальной машины, в разделе "Безопасность" (Security) активировать флаг. . .	Архитектура биовида Стива в Майнкрафте: Зачем бонобо кубический каннибализм anaschu 30.08.2026 Кубический Вагинокапитализм в Minecraft: Математический инвариант ОДУ и рок Стивов-бонобо Главная задача разработанной «Модели Всего» — наглядно продемонстрировать наличие системной «судьбы». . .
Оттачиваю умение писать js программы. russiannick 30.08.2026 Проектом выходного дня стало написание Книги шифров Виженера. Итогом стала версия 200, синий туман. Синий туман назван так, потому что замораживает текст под собой. Нажатие синих кнопок управляют. . .	мат медиц модель 30. презентация проекта anaschu 27.08.2026 хоп хоп хоп хидахоп, а я кладую))	Как у меня протекала болезнь zorxor 27.08.2026 Здравствуйте, друзья! Эта запись блога предназначена именно для вас - для моих дорогих друзей, которые знали меня лично. Чтобы ответить на вопрос - а что же со мной произошло на самом деле? Я учился. . .	Нашел вот забавное видео о измерениях. Лучшее что я видел на эту тему kumehtar 26.08.2026 ILETXiw9bMQ Основная суть и тезисы по измерениям: 0D (Нулевое измерение): точка, не имеющая длины, ширины, высоты или объема. Объект не может перемещаться в 0D. 1D (Первое измерение):. . .

Наверх

Сообщение форума

Отменить изменения