build ts to js

[ak1103dev]

I use absolute path for import library or utilities. When I build ts to js, it cannot run js file because import with absolute path not found. I think use webpack for build ts to js

[geraldsamosir]

@ak1103dev have you check the version of node is is it support for typescript?

[kasipavankumar]

Greetings.

If I'm not wrong, we can add paths to tsconfig.json which should resolve imports of the respective modules at build time.

For example:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
        "app/*": ["app/*"],
        "config/*": ["app/_config/*"]
    },
}

Reference

• https://www.typescriptlang.org/tsconfig#paths

[kasipavankumar]

Greetings, again.

After digging deeper, it can be said that adding paths to tsconfig.json cannot solve this issue.

The Problem

Typescript compiler's expected behavior of not mapping import aliases was a growing debate on it's repository (#10866) but was closed under working as intended. Mapping import aliases by tsc was never intended in the first place.

The objective of this repository is to make use of Typescript with NodeJS and so features like import aliases to improve productivity, readability and maintainability of the codebase. So, using tsc for build process, renders the whole import aliases thing pointless. As @ak1103dev mentioned, using module bundler like Webpack is the way to go.

I can see the use of tsconfig-paths to handle mapping of import aliases during runtime in development, which I tried to use in the build script but that doesn't work.

https://github.com/witsawa-corporation/node-ts-boilerplate/blob/aa67acf9b0fd46d92af05bf10fa70da6cc132002/package.json#L10

Possible Solution

I was able to solve this issue and make the production (build) version running without any errors with Webpack using ts-loader and tsconfig-paths-webpack-plugin.

Caveats (or not?)

Performance

Since Webpack is used to generate the production bundle, it crunches everything in a single (and possibly minified) file which then can be executed using node build/server.js. This can have performance benefits because, server has to handle only a single minified file.

And, if we think of a scenario where tsc had a feature of mapping import aliases, the production bundle would be divided in modules as written during development this means on every request, the modules have to be required (imports & exports) which can decrease (depending on how powerful the production server is) performance when handling requests.

---

@ak1103dev, please let me know your thoughts on this. I would be glad to make a PR using the Webpack solution.

[ak1103dev]

@kasipavankumar the script is not error for running. but I want to build ts to js then run start js file for production.

[kasipavankumar]

Yes, sir. I get your point. I've tried to reproduce the issue locally.

There were two issues I've encountered:

1. On npm run build, TypeScript compiler throws error of module not found.
2. Even after using paths in tsconfig.json, the absolute are not being resolved in the production bundle.

So, I used Webpack to correctly resolve the relative imports at the build time. On doing so, npm run build && npm run start:prod works properly without any import errors.