TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. You can install it from Node Package Manager (NPM) and tinker with its tsc executable. It accepts a handful of options which may be stored inside tsconfig.json configuration file.
SystemJS is a JavaScript module loader that allows using ES Modules in all browsers. You can get it either via CDN or from Node Package Manager.
\nYou may be wondering why do we even talk about SystemJS and Typescript together? Wouldn't it suffice to use Typescript compiler alone?
\nUnfortunately, Typescript compiler is not that almighty. While it can compile each file to a given target, it has no way to bundle several files into one.
\nStrangely enough, it looks like Typescript supports ES6 Modules syntax inside *.ts files, since you can write either export or export default. You can even use Babel-like imports and named imports, thanks to esModuleInterop option. But underneath, Typescript transforms all export and import instructions via the module code generation option.
\nmodule can be one of: None, CommonJS, AMD, System, UMD, ES6, ES2015, ESNext.
\nNode environment uses CommonJS modules and don't need to bundle files into one, so in this case, Typescript alone would suffice. But browsers face more challenges. They neither understand CommonJS syntax nor ES6 Modules syntax. Thus, Typescript must delegate the hard work of bundling to:
\nTo facilitate bundling, Typescript provides two compiler options: module and outFile. The moment you specify outFile option, module option becomes limited to System or AMD.
\nIn this tutorial, we will focus on the SystemJS, which is one of the run-time module loaders. If you can't wait to see the code, I've created a Github repository for you. Otherwise, let's start off our tutorial.
\nFirstly, we are going to install SystemJS
\nyarn add systemjsWith that, create an index.html file with the following content
\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Typescript with SystemJS 5.x</title>\n <script src=\"./node_modules/systemjs/dist/s.js\"></script>\n <script src=\"./node_modules/systemjs/dist/extras/named-register.js\"></script>\n</head>\n<body>\n<script>\n System.import('./bundle.js')\n .then(() => System.import('systemjs/app'))\n .catch(console.error.bind(console))\n</script>\n</body>\n</html>As you see in the snippet above, in the head section we must include the s.js and named-register.js scripts.
\nHaving the base SystemJS configuration, let's move on to the minimal Typescript configuration.
\nIn here, we are going to install Typescript globally
\nyarn global add typescriptNext, we must create tsconfig.json file inside our project, as shown below
\n{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"module\": \"system\",\n \"outFile\": \"./bundle.js\",\n \"strict\": true,\n \"esModuleInterop\": true,\n \"inlineSourceMap\": true,\n \"inlineSources\": true\n },\n \"exclude\": [\n \"node_modules\"\n ]\n}Notable parts from the snippet above are:
\nAfter you run tsc compiler, the content of your bundle.js file should be similar to the snippet below.
// For readability, only crucial bits are displayed\nSystem.register(\"systemjs/app\", [\"shared/Family\"], function (exports_5, context_5) { /*...*/ });\nSystem.register(\"shared/Family\", [\"shared/Child\", \"shared/Parent\"], function (exports_4, context_4) { /*...*/ } });\nSystem.register(\"shared/Parent\", [], function (exports_3, context_3) { /*...*/ });Bundle.js is already a big file which uses many System.register calls, combining all our .ts modules. This is exactly what SystemJS 5.x with Extra Named register needs.
\nImportantly, systemjs/app was marked as the root element for SystemJS import. Corresponding systemjs/app.ts script loads all other .ts files from a shared directory.
\nWith the proper configuration of Typescript and SystemJS, let's dive into the project structure.
\nFeel free to clone related repository https://github.com/tekmi/blogging-typescript-with-bundlers yourself.
\nThe main file lives inside systemjs/app.ts which imports all the needed dependencies.
\nimport Family, { Child, Parent } from \"../shared/Family\";\n\nconst child1 = new Child('Marc');\nconst parent1 = new Parent('Adam');\nconst parent2 = new Parent('Yanjiao');\n\nconst myFamily = new Family();\nmyFamily.addMember(child1);\nmyFamily.addMember(parent1);\nmyFamily.addMember(parent2);\n\nmyFamily.printNames();If you look inside the package.json, you will see that systemjs is the main dependency. Next to it, there is lite-server dev dependency which is used to start the local server.
\nOnce you cloned the repository, you can follow those steps to see the Typescript and SystemJS in practice.
\ncd systemjs\nyarn install\nyarn devThe last command will open your browser. So the only thing left is actually checking console logs inside your browser Developer Tools.
\nTypescript is gaining momentum and bringing lots of good things for JavaScript developers. It doesn't try to be an all-at-once tool and it doesn't try to lock us inside its ecosystem. With its target and module options, it gives us lots of flexibility.
\nTypescript focus on one thing. It brings a powerful compiler that enhances JS with strong typings. Other parts, like bundling, are gracefully delegated to other, battle-tested tools from the frontend world.
\nIn this tutorial, we have focused on SystemJS and Typescript, but there is much more to explore. In the upcoming tutorials, I will be looking into AMD, Gulp and Webpack modules integration.
"}},"pageContext":{"postId":"c1e754ff-3e6f-5c98-8a1b-1f00ae278050","slug":"how-to-bundle-many-typescript-files-using-systemjs"}}}