JSPM Bundle with TypeScript transpiler

Question

I'm getting more into System.js and JSPM, where I've come to the point where I want to bundle my TypeScript source code into a JavaScript bundle.

Now I can bundle my generated JavaScript code with something like: jspm bundle some/source/path someDestFile.js

but then I need to pre-build all my TypeScript first into JavaScript and then bundle, finding myself left with all the compiled (and seperated) JS files. This is far from ideal!

I walked through the jspm docs here, but did not find a solution.

Just to be clear, I do not want to compile TypeScript in my browser, rather a precompiled bundle of solid JavaScript.

How do I do this?

P.S. I used the TypeScript transpiler installation as seen here

score 9 · Accepted Answer · answered Aug 12 '15 at 08:54

9

You can do it with JSPM builder. You can bundle all typescript files and bundlesfx to one single file, configurating jspm.conf.js like that:

System.config({
    defaultJSExtensions: true,
    transpiler: "typescript",
    typescriptOptions: {
        "module": "amd",
        "experimentalDecorators": true
    },
    ...
    packages: {
        "app": {
            "main": "index",
            "defaultExtension": "ts",
            "meta": {
                "*.ts": {
                    "loader": "ts"
                }
            }
        }
});

and then run :

jspm bundle-sfx src/index dist/app.js

You can see full workign example in here: https://github.com/b091/ts-skeleton/

answered Aug 12 '15 at 08:54

b091

519
2
7

This seems to compile. but my imports are are not working. How would I for example import angular 1.x? I tried ``import * as angular from 'angular'`` and ``import angular = require('angular')``. Both did not work. – Nicky Aug 12 '15 at 20:40
1

Forgot my ``/// ``, it's working excellent now! Thanks for the very awesome sample project, it made some things a lot clearer! – Nicky Aug 12 '15 at 22:11

score 1 · Answer 2 · answered Nov 15 '16 at 16:35

I believe the question is getting out of date. I just tried this with JSPM 0.17.0-beta.31 with plugin-typescript (https://github.com/frankwallis/plugin-typescript), and "jspm bundle" did indeed pre-translate the TypeScript for me.

"jspm bundle-sfx" is now "jspm build". Because the original accepted answer suggested switching to bundle-sfx (build), which should not be necessary now, I'd like to clarify the decision of whether to use bundle or build. I find bundle to be more useful for speeding up development, whereas build can produce a smaller file with more optimizations, so you may want to use bundle during development and build when you release. Be aware that if you use build on a library, code that imports your library will be unable to share its dependencies.

JSPM Bundle with TypeScript transpiler

2 Answers2

Linked