将 Typescript 实时编译为 es5 并立即运行

Question

所以最近我决定尝试将我的一个“小”项目从 es5 重写为 Typescript。这是一个基于 express.js 的 Node.js Rest api。

有没有办法在更改时将 TS 项目重新编译为单个文件，并且主要还运行应用程序？

在使用 react/es6 时，我使用的是 webpack 开发服务器，它可以很快地根据更改重新编译。在 node.js 中使用 es5 时，我使用的是 nodemon，它会在更改时立即重新运行代码。但是如何正确结合这两个功能呢？我应该使用 webpack 来编译 TS 代码吗？但是 webpack 是否也可以运行代码？

我见过using the ts compiler with nodemon 的示例，但使用这种方式无法创建单个输出包。

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

Answer 1

首先，安装 typescript 的加载器

npm i -D awesome-typescript-loader

在你的 webpack 配置文件中，添加这些

"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/"
         }
    ]
}

这将配置 webpack 为您转译 ts 代码，其余的您只需正常配置