Browserify TypeScript + Bonus: UglifyJS

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

Показов 1628 Комментарии 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,104
Записей в блоге 243

Новые блоги и статьи Все статьи Все блоги /
Был там один разговор по поводу свободы в материальном мире. kumehtar 19.08.2026 Суть: рассматривается живое существо, оказавшееся внутри довольно странной системы (этого мира) и пытающееся обустроить в ней свой кусок пространства. Жизнь действительно предъявляет каждому. . .	Когда логика программы не спасает от человеческих ошибок Maks 18.08.2026 В последнее время всё чаще и чаще сталкиваюсь с таким явлением, как абсолютная невнимательность (или глупость) пользователей. Проявляется это чаще всего на работе в коллективе. Допустим, человек с. . .	Лето уходит kumehtar 17.08.2026	Мысли в слух kumehtar 17.08.2026 Забавно, насколько сейчас стала доступна информация. Например о магии, духовном развитии, медитациях, и других подобных направлениях, ранее зачастую тайных, передаваемых от учителя к ученику. Хотя. . .
Перемещение строк из ТЧ в другой документ с учетом текущего пробега Maks 17.08.2026 Реализация из решения ниже выполнена на примере нетипового документа "Автозапчасти", с ТЧ "Шины". За основу взят алгоритм отсюда: https:/ / www. cyberforum. ru/ blogs/ 359708/ 10838. html Задача: . . .	Саморегулирующийся социальный контракт для сервера cross-section. Hrethgir 14.08.2026 С кодом конечно таких глубоких размышлений пока не было, впрочем я уже привык к алгоритмизации. Суть предмета записи: снова в диалоге с нейросетью (я взял пока себе ник для учётки админа - Rector). . . .	Часы электронные Uhbif79 12.08.2026 Выкладываю программу часов. Программа позволяет: 1. Использовать системное время и дату, 2. Есть возможность вводить время и дату вручную. 3. Реализованы 2 будильника: начало и конец рабочего дня. . . .	Часы с будильником на основе класса QLCDNumber Uhbif79 12.08.2026 Всем добрый день, выкладываю программу часов с будильником на основе класса QLCDNumber. Здесь я пробовал самостоятельно создавал классы, впервые столкнулся с видимостью переменной одного класса из. . .

Наверх

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

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