当前位置:网站首页>TypeScript增量编译
TypeScript增量编译
2022-07-06 16:30:00 【用户6256742】
我们在使用Node.js开发服务端时通常会使用TypeScript来开发大型项目,但是使用ts-node进行全量编译时经常遇到编译速度慢的问题,通常是修改一行代码编译两分钟。这时我们需要使用增量编译来优化编译速度,及其他的文件在项目启动时进行全量编译,开发时修改了哪个TS文件就编译成对应的JS文件。
开发环境
1.修改tscon.json文件
{
"compilerOptions": {
"watch": true
}
}
在ts配置中开启watch监听rootDir路径下的全部ts文件(文章末尾会有我的tsconfig.json)
2.编写程序
编写dev.js作为项目开发启动文件,封装Node.js自带方法来移动文件夹来复制如public文件夹、.env文件,启动tsc增量编译,监听tsc运行结果首次运行成功后开始使用shell来运行编译好的dist文件夹
整个demo我会在文章底部放gitee链接。
const fs = require('fs');
const path = require('path');
const clearDir = require('./modules/clearDir');//删除整个文件夹
const copyDir = require('./modules/copyDir');//复制文件夹
const countFile = require('./modules/countFile');//计算文件夹内文件的个数
clearDir('dist'); //清空dist
fs.mkdirSync('dist') //创建dist
copyDir('public', 'dist/public'); //复制public
fs.writeFileSync('dist/.env.development', fs.readFileSync('.env.development').toString()) //复制环境变量文件
// 开始执行tsc
const shell = require('shelljs');
const tsCount = countFile(path.join(__dirname, '../src')) //获取ts文件个数实时对比JS
const _tsc = shell.exec('tsc', {
async: true
});
// 实时对比TS和JS的个数
new Promise((resolve, reject) => {
_tsc.stdout.on('data', function (data) {
let src = path.join(__dirname, '../dist/src');
if (fs.existsSync(src)) {
let timer = setInterval(() => {
let jsCount = countFile('./dist/src')
if (jsCount == tsCount) {
clearInterval(timer)
resolve()
}
}, 50);
}
});
}).then(() => {
shell.exec('cross-env ENV=development nodemon --watch ./dist ./dist/src/index.js', {
async: true
});
})
我在这里面进行了dist文件夹的清空和public文件夹的复制,以及环境变量文件的迁移
整体思路:
初始化所需的静态文件夹,开始tsc的运行,同时监听源代码中的ts文件数量和dist中的js文件数量是否一直,一直则说明tsc首次编译结束。在src文件夹全部打包后开始使用nodemon运行dist文件夹,这样就只需要运行对应的js就可以了,大大加快了热更新速度。
很多同学在使用ts开发时使用到了ts路径别名,使用了module-alias插件来解决,但是dist下package.json 需要额外修改,具体在node.js中使用路径别名可以参考这篇文章TypeScript中使用类型别名
打包
const fs = require('fs');
const shell = require('shelljs');
const path = require('path');
const clearDir = require('./modules/clearDir')
const copyDir = require('./modules/copyDir');
const countFile = require('./modules/countFile');
clearDir('dist'); //清空dist
fs.mkdirSync('dist')
const _tsc = shell.exec('tsc', {
async: true
});
copyDir('public', 'dist/public'); //复制public
fs.writeFileSync('dist/package.json', fs.readFileSync('package.json').toString())
fs.writeFileSync('dist/yarn.lock', fs.readFileSync('yarn.lock').toString())
fs.writeFileSync('dist/.env.production', fs.readFileSync('.env.production').toString())
const tsCount = countFile(path.join(__dirname, '../src')) //获取ts文件个数实时对比JS
new Promise((resolve, reject) => {
_tsc.stdout.on('data', function (data) {
let src = path.join(__dirname, '../dist/src');
if (fs.existsSync(src)) {
let timer = setInterval(() => {
let jsCount = countFile('./dist/src');
if (jsCount == tsCount) {
clearInterval(timer)
resolve()
}
}, 50);
}
});
}).then(() => {
console.log(`打包完成,SRC下共 ${tsCount} 个文件`);
shell.exit(1)
})
原理和开发类似,只不过移动的文件夹不同,并且在tsc结束后可以直接退出
一个Koa+TypeScript的模板,ORM使用Sequelize,TS添加了增量编译以及类型别名,Koa也基本调试好,自动引入Router以及配置了静态文件
基本上可以Koa+TS下载即用,运行命令在Readme.md中
git clone https://gitee.com/awebcoder/koa-ts.git
tsconfig.json
{
"compilerOptions": {
"experimentalDecorators": true,
"target": "ES2015",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./",
"moduleResolution": "node",
//变量和函数参数未使用警告
// "noUnusedLocals": true,
// "noUnusedParameters": true,
"removeComments": true, //取消注释
"strict": true,
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
},
"skipLibCheck": true,
"esModuleInterop": true,
"noImplicitAny": true, // 不允许隐式的 any 类型
"watch": true
},
"include": ["src"],
"exclude": ["node_modules", "**/*.d.ts"]
}
边栏推荐
- Talking about the current malpractice and future development
- 亚朵三顾 IPO
- 基于jsp+servlet+mysql框架的旅游管理系统【源码+数据库+报告】
- DAY SIX
- 1000字精选 —— 接口测试基础
- Wasserstein slim gain with gradient poverty (wsgain-gp) introduction and code implementation -- missing data filling based on generated countermeasure network
- 基于SSM框架实现的房屋租赁管理系统
- Can async i/o be implemented by UDF operator and then called by SQL API? At present, it seems that only datastre can be seen
- Eureka Client启动后就关闭 Unregistering application xxx with eureka with status DOWN
- Asset security issues or constraints on the development of the encryption industry, risk control + compliance has become the key to breaking the platform
猜你喜欢
Restoration analysis of protobuf protocol of bullet screen in station B
Server SMP, NUMA, MPP system learning notes.
How to implement Lua entry of API gateway
App general function test cases
Building lease management system based on SSM framework
Penetration test --- database security: detailed explanation of SQL injection into database principle
【通信】两层无线 Femtocell 网络上行链路中的最优功率分配附matlab代码
【自动化测试框架】关于unittest你需要知道的事
Newsletter L Huobi ventures is in-depth contact with genesis public chain
量子时代计算机怎么保证数据安全?美国公布四项备选加密算法
随机推荐
MySQL implementation of field segmentation from one line to multiple lines of example code
自动化测试工具Katalon(Web)测试操作说明
Compile logisim
Today, I met a senior test developer from Tencent and saw the ceiling of the foundation
How to find out if the U disk file of the computer reinstallation system is hidden
DAY FIVE
Rider离线使用Nuget包的方法
app通用功能测试用例
Can async i/o be implemented by UDF operator and then called by SQL API? At present, it seems that only datastre can be seen
The tutorial of computer reinstallation win10 system is simple and easy to understand. It can be reinstalled directly without U disk
设计一个抢红包系统
Daily question brushing record (XV)
Gradle知識概括
Without CD, I'll teach you a trick to restore the factory settings of win10 system
Implementation steps of mysql start log in docker
氢创未来 产业加速 | 2022氢能专精特新创业大赛报名通道开启!
量子时代计算机怎么保证数据安全?美国公布四项备选加密算法
Asset security issues or constraints on the development of the encryption industry, risk control + compliance has become the key to breaking the platform
pytest多进程/多线程执行测试用例
The best sister won the big factory offer of 8 test posts at one go, which made me very proud