ts学习心得: nodejs项目配置package.json

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情

下面以开发爬虫的那个项目为例，展示如何在开发过程中中更好的使用ts。

当使用ts写爬虫，我们可以体会到ts给我们带来的遍历，极大减少bug的机会。当我们写好之后，是不能直接把代码给别人用的，还需要进编译，转化为js文件才能给别人使用。

目前我们是使用ts-node对ts进行编译成js，然后使用node执行js文件:

"scripts": {
    "dev": "ts-node ./src/crowller.ts"
}

这样有个很不方便的地方是当我们修改文件执行，都需要手动执行npm run dev命令。那有没有什么办法检测文件改动后立即编译成js，然后利用node来执行js文件。下面我们来一步步的实现这个目的。

1. 实时把ts编译成js

首先在package.json里面加上如下代码，-w是一旦有ts文件的改动就进行编译:

"scripts": { "build": "tsc -w" }

上面的编译完的文件会放在同级目录下，我们需要放在build文件夹下，那么就需要设置tsconfig.json:

// 打包后的代码 
"outDir": "./build" 
// 源代码 
"rootDir": "./src"

2. 实时监控js并运行

我们运行的一般都是js文件，所以要监控build下js文件的变动，一旦变动就执行一次，那么就需要使用nodemon这个库了，当js文件有变动的时候就执行某个命令。

注意 nodomon只能监控js文件，不能监控ts文件

"scripts": { 
    "build": "tsc -w", 
    "start": "nodemon node ./build/crowller.js" 
}

这里有个小问题就是nodemon监控了所有的文件变化，我们需要过滤一些文件，因此在package.json加入如下配置:

"nodemonConfig": {
    "ignore": [
      "data/*"
    ]
}

通过上面的步骤，我们开启两个命令行，分别运行npm run build 和npm start。这样当ts文件有改动的时候，就编译成js文件，当监控到js文件有改动的时候，就执行js文件。

3. 利用concurrently优雅启动命令 我们还可以在进一步，使用一个命令行来运行上面的命令，即使用第三方库concurrently，同时运行上面的命令：npm:dev:* 这是一种简写，即运行dev:开头的所有命令

"scripts": { 
    "dev:build": "tsc -w", 
    "dev:start": "nodemon node ./build/crowller.js", 
    "dev": "concurrently npm:dev:*" 
}

最后一点就是首先要执行一次tsc编译，因为concurrently是同时运行的，第一次启动的时候可能还没有编译完就开始运行js文件了，所以首先要执行一次编译，先生成js文件。&&是继发运行的意思。

"scripts": { 
    "dev:build": "tsc -w", 
    "dev:start": "nodemon ./build/index.js", 
    "dev": "tsc && concurrently npm:dev:*" 
}