Jump to content
  • Advertisement
  • entries
    23
  • comments
    12
  • views
    1967

Browserify TypeScript

8Observer8

858 views

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":

index.html

<html>

<head>
    <script src="js/sayHello.js"></script>
    <script src="js/main.js"></script>
</head>

</html>

sayHello.js

function sayHello(name)
{
    console.log("Hello, " + name);
}

main.js

function main()
{
    sayHello("Ivan");
}
window.onload = main;

Output:
 

Quote

Hello, Ivan

But if you rewrite these files in TypeScript:

sayHello.ts

export function sayHello(name: string): void
{
    console.log("Hello, " + name);
}

main.ts

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":

<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:

Quote

 

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:

<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

<html>

<head>
    <script src="dist/bundle.min.js"></script>
</head>

</html>

 



0 Comments


Recommended Comments

There are no comments to display.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!