0

So recently I've decided to try to rewrite one of my "little" projects from es5 to Typescript. It's a Node.js Rest api based on express.js.

Is there a way how to recompile a TS project into a single file on change and primarily also run the app?

When using react/es6 I'm using webpack dev server, which can recompile on change pretty quickly. When using es5 in node.js I'm using nodemon, which immediately re-runs the code on change. But how to properly combine these two functionalities? Should I use webpack to compile TS code? But is webpack capable of also running the code?

I've seen an example of using the ts compiler with nodemon, but using this way it's not possible to create one single output bundle.

src
  |- entryPoint.ts
  |- routes
  |    |- foo.ts
  |    |- bar.ts
  |    |- ...
  |- schemas
  |    |- foo.ts
  |    |- bar.ts
  |    |- ...
  |- ...
dist
  |- singleOutputBundle.js
tsconfig.json
nodemon.json
webpack.config.js
package.json
Community
  • 1
  • 1
Patrik Šimunič
  • 449
  • 1
  • 4
  • 16

1 Answers1

0

First, install the loader for typescript

npm i -D awesome-typescript-loader

In your webpack config file, add these

"entry": "./src/entryPoint.ts",
"output": {
    "filename": "singleOutputBundle.js",
    "path": __dirname + "/dist"
},
"resolve": {
    "extensions:[".ts",".js"],
},
"module": {
    "rules": [
         {
             "test": /\.ts$/,
             "use": "awesome-typescript-loader",
             "exclude": "/node_modules/"
         }
    ]
}

This will configure webpack to transpile ts code for you, the rest you just configure as normal

Trash Can
  • 6,608
  • 5
  • 24
  • 38
  • Thanks. In the end, I had to use this solution. But as I wrote, this solution doesn't includes running the compiled code. You can't even use a webpack-dev-server alongside with nodemon, because it's not effecting a filesystem, so nodemon has nothing to watch or run. And just one note to your config, it should also contain "target": "node", otherwise the webpack will probably have issues with importing some modules (like fs or net). Unfortunately, I guess there's no good solution to this yet... – Patrik Šimunič Mar 21 '17 at 21:53