Load transpiled TS2 with HTML <script> tag?

Question

I'm really new to Typescript2. I'm loving it and have written a module that I can easily import and use in other Typescript2 projects. But I also want my library to be able to be used as a standalone by simply using an HTML tag. When I do that, though, the browser complains "exports is undefined."

I'm guessing I have to write some sort of javascript that imports my module and instantiates it, and then have my browser load that wrapper script. Am I on the right track? How do I create a typescript that transpiles into something that I can just load natively in the browser with a script tag that just loads and instantiates?

Answer 1

You are on the right track. What you need is a module loader. For the browser, requirejs is mentioned in the typescript documentation, although there are several options (requirejs, browserify, webpack, rollup).

I use requirejs with typescript, so I have experience doing the following steps:

For requirejs, you could do the following to get started.

1. Ensure that you are compiling to modules in the AMD format when running the typescript compiler command (tsc) by using the typescript configuration file or command-line compiler option arguments

   // tsconfig.json
   {
       "compilerOptions": {
           "module": "amd"
       }
   }
   

2. Get requirejs

   • One source is http://requirejs.org/docs/download.html

3. Note the name of the .js file that is output by the typescript compiler

   • For example "my-script.js"

4. Add a script tag to the page

   • For example <script data-main="scripts/my-script" src="require.js"></script>

There is a simple "getting started" page for requirejs http://requirejs.org/docs/start.html

As a bonus, to export multiple modules to a single file, you can use the --outFile compiler option for typescript.