Typescript incremental compilation

We are using Node.js When developing the server, we usually use TypeScript To develop large projects , But use ts-node When doing full compilation, we often encounter the problem of slow compilation speed , It usually takes two minutes to modify a line of code and compile . At this time, we need to use incremental compilation to optimize the compilation speed , And other files are fully compiled at the start of the project , Which has been modified during development TS The file is compiled into the corresponding JS file .

development environment

1. modify tscon.json file

{
  "compilerOptions": {
    "watch": true
  }
}

Copy

stay ts Open in configuration watch monitor rootDir All under the path ts file （ There will be me at the end of the article tsconfig.json）

2. Programming

To write dev.js As the project development startup document , encapsulation Node.js Bring your own method to move the folder to copy, such as public Folder 、.env file , start-up tsc Incremental compilation , monitor tsc The operation results will be used after the first successful operation shell To run the compiled dist Folder

Whole demo I will put at the bottom of the article gitee link .

const fs = require('fs');
const path = require('path');

const clearDir = require('./modules/clearDir');// Delete the entire folder 
const copyDir = require('./modules/copyDir');// Copy folder 
const countFile = require('./modules/countFile');// Calculate the number of files in the folder 


clearDir('dist'); // Empty dist
fs.mkdirSync('dist') // establish dist
copyDir('public', 'dist/public'); // Copy public
fs.writeFileSync('dist/.env.development', fs.readFileSync('.env.development').toString()) // Copy the environment variable file 

//  Start execution tsc
const shell = require('shelljs');
const tsCount = countFile(path.join(__dirname, '../src')) // obtain ts Real time comparison of the number of files JS
const _tsc = shell.exec('tsc', {
    async: true
});
//  Real time comparison TS and JS The number of 
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
    });
})

Copy

I did it here dist Folder emptying and public Copy of folder , And the migration of environment variable files

The whole idea ：

Initialize the required static folder , Start tsc Operation of , At the same time, listen for ts Number of documents and dist Medium js Whether the number of documents has been , Always explain tsc The first compilation is over . stay src After all folders are packaged, start using nodemon function dist Folder , In this way, you only need to run the corresponding js That's all right. , It greatly accelerates the hot update speed .

Many students are using it ts Developed using ts path alias , Used module-alias Plug in to solve , however dist Next package.json Additional modifications are required , Specific in node.js You can refer to this article for the use of path aliases in TypeScript Use type aliases in

pack

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'); // Empty dist
fs.mkdirSync('dist')
const _tsc = shell.exec('tsc', {
    async: true
});
copyDir('public', 'dist/public'); // Copy 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')) // obtain ts Real time comparison of the number of files 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(` Packing is done ,SRC Lower total  ${tsCount}  File `);
    shell.exit(1)
})

Copy

The principle is similar to development , It's just that the folders moved are different , And in tsc After that, you can exit directly

Demo Address

One Koa+TypeScript The template of ,ORM Use Sequelize,TS Added incremental compilation and type aliases ,Koa It is also basically debugged , Auto import Router And configuring static files

Basically Koa+TS Download is used , The run command is in Readme.md in

git clone https://gitee.com/awebcoder/koa-ts.git

Copy

tsconfig.json

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "target": "ES2015",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./",
    "moduleResolution": "node",
    // Variables and function parameters do not use warnings 
    // "noUnusedLocals": true,
    // "noUnusedParameters": true,
    "removeComments": true, // uncomment 
    "strict": true,
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    },
    "skipLibCheck": true,
    "esModuleInterop": true,
    "noImplicitAny": true, //  Implicit is not allowed  any  type 
    "watch": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "**/*.d.ts"]
}

Copy