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

Browserify TypeScript + Bonus: UglifyJS

Запись от 8Observer8 размещена 21.02.2019 в 18:32
Обновил(-а) 8Observer8 21.02.2019 в 18:55

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>
Размещено в Без категории
Просмотров 107 Комментарии 0
Всего комментариев 0
Комментарии
 
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru