官网写得很简单。
按照官网的思路确实可以使用ts
开发,但是缺少路径别名处理,监听ts
文件更改等功能。
1. 增加typescript
支持
1.1 把源文件都改成ts
,当然前提要安装typescript
依赖以及配置tsconfig.json
1.2 使用tsc
编译所有ts
文件
这里我配置的是编译到dist
目录:
编译完成后在根目录的
index.js
中修改一下,因为以前是启动的src/app.js
,现在编译完成后当然位置就不一样了:
// 把这里的地址改成编译后的app.js的地址
const app = require('./dist/app')
module.exports = app.callback()
如果你把所有的require
和module.exports
改成了import
和exports
,启动项目的时候报错,那么index.js
中导入方式可能要改一下
module.exports = app.default.callback()
2. 路径别名处理
为了方便经常设置路径别名,ts
中的别名和webpack
中的别名是一个意思,但是有个问题就是编译的时候确没有替换掉别名。
// tsconfig.json
"paths": {
"@/*": ["src/*"]
}
2.1 使用tsconfig-paths
(不得行)
以前我的项目就是用的这个,但是这里不能用,主要是因为这个插件是运行时插件,也就相当于中间件,当你使用node
或者ts-node
启动项目的时候可以用它。
而目前云工程部署并不支持额外的node
参数,如果能有和pm2
一样的这个命令就好了
pm2 start bootstrap.js --node-args="-r tsconfig-paths/register"
如果参考pm2就可以这样
inspirecloud dev --node-args="-r tsconfig-paths/register"
控制台增加一个添加node参数的地方,再把这参数加上就完美了
2.2 使用tscpaths
安装完成后把打包命令改成
tsc --project tsconfig.json && tscpaths -p tsconfig.json -s ./src -o ./dist
就行了
3. 添加监控
开发阶段肯定不能改一下去build
一下,最好有自动化,官方项目上面有个inspirecloud.json
文件
{
"main": "index.js",
"watch": [
"**/*.js"
]
}
这里面有watch
的选项,但是没有更多可控的选项,所以我使用了gulp
来辅助监听
3.1 添加gulp
gulp
安装完成,编写gulpfile.js
,这里我用到了gulp-shell
插件:
const gulp = require('gulp')
const shell = require('gulp-shell')
// 原理很简单就是监听`src`下的文件,一有改变就执行`build`
const watch = async () => {
gulp.watch('src/**/*', {ignoreInitial: false}, shell.task('tsc --project tsconfig.json && tscpaths -p tsconfig.json -s ./src -o ./dist'))
}
module.exports = {
watch,
}
我本来想把build
和inspirecloud dev
和在一起,但是好像没办法同时执行两个监听任务。
4 结果
最后的效果就是要开两个任务。
这样当
src
里面的文件变化的时候就会触发构建,然后inspirecloud dev
监听了所有js
文件,发现有新的js
文件就会触发重启服务。
由于我用过的工具不是很多,所以只能想到这种方法,如果有更好的方法欢迎讨论!