Menu
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.
608
TypeScript compiler is designed to compile TypeScript and if you want to do more, you need to use Webpack or another bundling tool that provides seamless integration with TypeScript. Now that we have settled with Webpack, let's understand how Webpack works with TypeScript. As we know, TSC needs a tsconfig.
Webpack gives you control over how to treat different assets it encounters. For example, you can decide to inline assets to your JavaScript bundles to avoid requests. Webpack also allows you to use techniques like CSS Modules to couple styling with components.
The TypeScript compiler supports a mix of JavaScript and TypeScript files if we use the compiler option --allowJs : TypeScript files are compiled. JavaScript files are simply copied over to the output directory (after a few simple type checks).
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';
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
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
