In Part 3 (Step 4) we managed to use Knockout.js in TypeScript. The dependencies were resolved by Require.js. In this Post, we are going to use Node style modules with the help of Browserify.
Step 5: Browserify
Browserify is a very helpful tool. It does one thing, and one thing only, but it does it really well. It can convert Node.js modules to be browser friendly.
This may not sound too exciting, so let me explain.
In Node.js, you can write JavaScript modularly. To do this, just import a module with the require command (not to be mistaken with RequireJS!), and, in the module you are importing, export the things you want to expose. See this example on the Node.js page: https://nodejs.org/api/modules.html
Unfortunately this just won’t work in a browser. Browserify solves this issue by tracking down all the dependencies, collecting everything into a JavaScript file, and converting all modules to its own dependency mapping.
Excellent! But why should this make us so happy?
- The NPM repository contains a LOT of useful items, but many of these are written as Node modules (with dependencies). Instead of having to use bower* next to NPM, you can now use NPM exclusively.
- You can set your TypeScript compiler to handle modules as node/commonjs instead of amd. So we can also say goodbye to our RequireJs config file!
Getting rid of RequireJS
Let’s rewrite a few things:
First of all, you can delete your “require-config.ts” file (delete the “require-config.js” too to keep it clean). You should
not forget to update the “index.html” file as well. Change the body into:
[...]
<body>
<ul data-bind="foreach: words">
<li><p data-bind="text: $data"></p></li>
</ul>
<script src="../javascript/bundle.js"></script>
</body>
[...]
Next, you can install Browserify:
npm install --global browserify
Now you can use the command “browserify”!
Before we use it, let’s tweak the tsconfig.json file, and set the module handling to be Node flavored CommonJS!
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true
},
"files": [
"./typings/index.d.ts",
"./typescript/main.ts"
]
}
We can also start to use source mapping. This is useful for debugging; in your browser you are not going to get an error on the generated .js code, but on the original .ts code you wrote!
Accio Browserify!
And now the time has arrived to use Browserify.
Let’s create a folder named “javascript” in the project root folder. This will make a great target folder for Browserify.
Compile your .ts files first, by simply posting the following in your Command Line:
tsc
And then:
browserify typescript/main.js -o javascript/bundle.js
By giving “typescript/main.js” as a parameter, Browserify will take it as an entry point and hunt down all the dependencies it needs. If you have multiple files, you don’t have to list them all, just the starting point.
If you check the “javascript” folder, you will find the “bundle.js”. This contains everything you will need for your application to run, including all the external dependencies (and the dependencies of those dependencies etc…). This should amount to around 5000 lines.
Test it by refreshing your browser, and think of all the things you don’t have to do from now on when it comes to dependencies! It’s a great feeling, isn’t it?
Coming up Next:
In the Next Post we are going to automate our build with help from Gulp!
* Bower is yet another package manager tool. Bower is just like NPM, but its registry only contains libraries for the frontend. Not only can Bower can be disappointing when it comes to searching for packages, the packages that come with NPM are of much higher quality.