ts-node 的那些坑

从 JS 到 TS，我们一开始还会用 Webpack 配置来运行我们应用，后面发现了 ts-node，直接 ts-node index.ts 就可以运行 TS 应用了，不需要用 Webpack 打包成低版本的 JS 才能运行。但是我在用 ts-node 的时候发现不少坑。

安装

ts-node 需要在全局去安装。这里要用 npm 去全局安装，yarn 全局安装好像用不了 ts-node。

npm install -g typescript
npm install -g ts-node

当然你 local 安装也可以的

npm install -g typescript
npm install -g ts-node

然后可以使用 npx 去跑 ts-node

npx ts-node index.ts

尝鲜

我们先来写一个小项目吧，就输出 'Hello World'。

const output = 'Hello World'

console.log(output)

够简单了吧。运行下面命令可直接跑我们的应用。

ts-node index.ts

成功

tsconfig.json

当我们真正写项目的时候，是需要 tsconfig.json 来对项目做一些约束的，这里我就用 Vue 自动创建的 tsconfig.json 作为例子。

{
  "compilerOptions": {
    "target": "es2018",
    "module": "commonjs",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "skipLibCheck": true,
    "paths": {
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types",
      "jest"
    ]
  },
  "include": [
    "index.ts",
    "lib.ts"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

使用 tsconfig.json

定义好 tsconfig.json 后，我们要测试一下是否真的能够使用了。我们先新创建另个文件 lib.ts

export const add = (a: number, b: number) => {
    return a + b
}

这里面就定义一个加法函数，然后在 index.ts 去运行一下。

import {add} from '@/lib'

const output = 'Hello World'

console.log(output)

console.log(add(1, 2))

但是报错：Error: Cannot find module '@/lib'。

在 tsconfig.json 里定义的 @ 别名，ts-node 根本不鸟你。所以我们怀疑 ts-node 没有识别 tsconfig.json。查了一圈发现这个 https://stackoverflow.com/questions/51610583/ts-node-ignores-d-ts-files-while-tsc-successfully-compiles-the-project。ts-node 7.0.0 以上就不自动识别 tsconfig.json 了，得加上 --files 才能识别，好吧。

ts-node index.ts --files

结果还是

真正使用你的别名

按照 stackoverflow 上的提示肯定是可以识别 tsconfig.json 的，所以这里我的猜想是 ts-node 不支持alias，毕竟这玩竟其实属于 webpack。查了一下，果然。

https://github.com/TypeStrong/ts-node/issues/138 这个 Issue 就说明了我们刚刚遇到了不能使用 alias 的问题。解决方案是我们得再装一个 tsconfig-paths 的包。没办法.

yarn add -D tsconfig-paths

再改改他给的命令：

ts-node -r tsconfig-paths/register index.ts --files

总算是成功了。

总结

1. 使用 ts-node 的时候要添加 --files 去识别你的 tsconfig.json 文件
2. 安装 tsconfig-paths 这个包来使用路径别名 alias

这两个点虽然很简单，上面的例子就输出和做个加法，但是在我做项目的时候是花很大力气去排查的，所以大家一定不要怕麻烦，可能解决方法就是这么的简单。