今天在用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/*",
]
}
复制代码