A toolchain is a sequence of development tools that transforms source code into software ready for delivery and execution. A stand-alone TypeScript web app can begin with NPM, the TypeScript compiler, and a tsconfig.json file. section 16.1 section 16.2
A basic TypeScript toolchain assigns each stage a practical responsibility:
- NPM creates package.json and installs project-local development packages. section 16.1
- The TypeScript compiler reads files from src, targets ES2022, and writes generated JavaScript to dist. section 16.1
- A bundler resolves dependencies and packages application code, CSS, or other resources into one or more deliverable bundles. section 16.3
- Webpack can use ts-loader to compile TypeScript while constructing the bundle. section 16.3
Compile a small application
In webapp, install TypeScript locally, configure src and dist, then place console.log("Web App") in src/index.ts. Run `tsc` to produce dist/index.js and execute it with `node dist/index.js`. With webpack added, configure `./src/index.ts` as the entry, use ts-loader for `.ts` files, create `dist/bundle.js`, and run `npx webpack` followed by `node dist/bundle.js`. section 16.1 section 16.3
Frameworks can hide much of the toolchain. In a TypeScript React setup, Babel transforms TypeScript and JSX into JavaScript while the TypeScript compiler checks for type errors; setting noEmit prevents the compiler from generating JavaScript. section 20.2
Listing 16.3 The contents of the tsconfig.json file in the webapp folder
{
"compilerOptions": {
"target": "es2022",
"outDir": "./dist",
"rootDir": "./src"
}
}
Inspect the minimal tsconfig.json that connects the source and generated-code directories and selects the JavaScript target. section 16.1
Listing 16.7 The contents of the webpack.config.js file in the webapp folder
module.exports = {
mode: "development",
devtool: "inline-source-map",
entry: "./src/index.ts",
output: { filename: "bundle.js" },
resolve: { extensions: [".ts", ".js"] },
module: {
rules: [
{ test: /\.ts/, use: "ts-loader", exclude: /node_modules/ }
]
}
};
Inspect the webpack configuration that connects the TypeScript entry point, loader, dependency resolution, and bundle output. section 16.3
