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:2Uncaught 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>
Lost a few hours trying to resolve this, until I found your explanation : it's crystal clear.
Thanks a lot for this.
The next step is eventually to use watchify for detecting changes in the scripts and automatically rebuild the bundle.js