搭建一个能执行typescript demo的环境

今天在用ts练习reactivity模块的时候，想用nodemon运行测试一下，发现出大问题了

一. 错误的解决方法

1. tsconfig.json 配置

{
    "compilerOptions": {
        "module": "esnext",
        "target": "es2016",
        "sourceMap": false,
        "outDir": "./dist",
    },
    "exclude": [
        "node_modules",
        "**/node_modules/*",
    ]
}
复制代码

2. package.json 配置

{
  "name": "reactivity demo",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "dev": "nodemon --watch src/**/* -e ts --exec ts-node ./src/index"
  },
  "devDependencies": {
    "nodemon": "^2.0.15",
    "ts-node": "^10.4.0",
    "typescript": "^4.5.4"
  }
}

复制代码

3. 入口ts文件

import { effect, stop, reactive } from "./reactivity/index";

const state = reactive({
    name: 'asd'
})

const runner = effect(() => {
    console.log(state.name)
}, {
    lazy: true
})

runner()

复制代码

问题一

当我执行 yarn dev 的时候，报了下面的错

解决：这个解决办法在图中已经有了，就是在 tsconfig.json加上 "moduleResolution": "node"

问题二

继续执行 yarn dev，报了下面的错，看起来像是使用了 import 的问题

解决：网上找一下得到的解决方法是在 package.json加上 "type": "module"

问题三

继续执行 yarn dev，报了下面的错

解决：网上找了一下，说是 ts-node的执行命令有问题，需要改成 node --loader ts-node/esm，所以把我们的启动命令改为 nodemon --watch src/**/* -e ts --exec node --loader ts-node/esm ./src/index.ts

问题四

继续执行 yarn dev，报了下面的错，初步判断是因为没有后缀，没法找到这个文件，然后我加上了.ts的后缀，发现编辑器报错了 导入路径不能以“.ts”扩展名结束

解决：网上找了一下，说建议使用 .js后缀，然后需要把所有的 import引入的文件都使用 .js的后缀

启动成功了

继续执行 yarn dev，没有问题了

总结

虽然问题解决了，但是解决的方法可以说是很粗糙，特别是最后一步我就没办法接受

二、正确的解决方法

只需要改一下tsconfig.json，就可以完美运行了

{
    "compilerOptions": {
        "module": "CommonJS", // 旧： "module": "esnext"
        "target": "es2016",
        "sourceMap": false,
        "outDir": "./dist",
        "types": [ "node" ],  // 新增
    },
    "exclude": [
        "node_modules",
        "**/node_modules/*",
    ]
}
复制代码