With just typescript (no webpack and no bable), can I get a multiple file solution to run in a browser?

Question

What would the tsconfig.json need to be to make this work in Chrome? So that I only had to run tsc and could then view the file in a browser and the appropriate result would display in the console?

index.html contains:

<!DOCTYPE html>
<html>
    <head><title>TypeScript app</title></head>
    <body>
        <script src="dist/app.js"></script>
    </body>
</html>

index.ts contains

import { alpha } from "alpha";
import { beta } from "beta";
console.log(alpha + " " + beta);

alpha contains

export const alpha = 'alpha';

beta contains

export const beta = 'beta';

The entry point would be index.ts and I would like it all bundled into a single file named app.js.

related: https://stackoverflow.com/questions/47818983/typescript-make-outfile-to-include-dependencies/61307660 — morris4, Apr 20 '20 at 07:22

score 13 · Answer 1 · answered Mar 18 '17 at 21:41

No browser implements ES6 and its module system natively yet. However, if you want to avoid Webpack and Babel specifically, there are options which have less required configuration, though are perhaps less powerful. The TypeScript compiler itself can handle bundling and transpiling to ES5 (which modern browsers support), leaving only the module system to be covered by a library. Here's one such solution using RequireJS:

tsconfig.json

{
    "compilerOptions": {
        "module": "amd",
        "target": "es5",
        "outFile": "dist/app.js"
    },
    "include": [
        "src/**/*"
    ]
}

index.html

<!DOCTYPE html>
<html>
    <head><title>TypeScript app</title></head>
    <body>
        <script data-main="dist/app" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js"></script>
    </body>
</html>

src/app.ts

// normally you would use a .d.ts file for RequireJS instead of declare
declare var require: (deps: string[]) => void;

require(['index']);

src/index.ts

import { alpha } from "./alpha";
import { beta } from "./beta";
console.log(alpha + " " + beta);

src/alpha.ts

export const alpha = 'alpha';

src/beta.ts

export const beta = 'beta';

this works well if alpha and beta are in the src directory and compiled. But I am trying to build a lerna demo. And thus alpha and beta are other packages. Was wondering if tsc could bundle the dependencies in as well. — Steven T. Cramer, Mar 19 '17 at 02:56
I haven't tested this, but you could try adding the paths to the other packages in the "include" section of the tsconfig file. — Steven Barnett, Mar 19 '17 at 03:29

score 8 · Answer 2 · answered Mar 18 '19 at 21:17

Add this snippet before loading bundle generated by TS, you need to specify TS to use AMD loader in TS config.

window.define = function(name, required, moduleFn) {
  var require = function() { throw new Error("AMD require not supported!")}
  var exports = window.define.modules[name] = {}
  var resolved = [require, exports]
  for (var i = 2; i < required.length; i++) {
    var m = window.define.modules[required[i]]
    if (!m) throw new Error("AMD module `" + required[i] + "` not found!")
    resolved.push(m)
  }
  moduleFn.apply(null, resolved)
}
window.define.modules = {}

Example

With just typescript (no webpack and no bable), can I get a multiple file solution to run in a browser?

2 Answers2

Linked