preface

I’m working on a blog project that uses vue+typescript+ element-UI on the front end and koA2 +typescript+mongoDB on the back end. The purpose of writing this blog is also to meet some problems in the process of writing background, which was solved after checking a lot of information. So the right when the summary, is also a record, can give others to do a complete reference.

The basic information

Here is a list of the configuration information that will be used. After all, it is always updated and may not be supported in a future version.

"nodemon"            : "^ 1.18.3"."ts-node"            : "^" 7.0.1."typescript"         : "^ 3.1.1." "
"node"               : "9.0.0"
Copy the code

Problem description

The problems are all about typescript. Koa2 has been around for a long time and is basically mature, but when I look for materials this time, I find very little development in typescript. If there is any, it is very simple and does not solve my problem.

So, using TS to develop KOA, since there is no webpack compilation involved, there are several problems:

  1. compile
  2. Refresh in real time and restart the server
  3. debugger

These are the things that really bothered me at the beginning. The simplest thing to do with Node development is to use Node xxx.js and then hot update. But once TS is introduced, compilation and real-time refresh issues need to be considered. After all, it’s not like you have to restart the server manually and compile it manually every time you change a bit of code.

The solution

Here’s my solution, and I’ll talk about why later, but just copy it if you don’t have time to read it or if you just want the answer.

"watch"      : "ts-node ./app/index.ts"."start"      : "nodemon --watch app/index.js"."build"      : "tsc"."debugger"   : "nodemon --watch ./app -e ts,tsx --exec node --inspect -r ts-node/register ./app/index.ts"."watch-serve": "nodemon --watch './app/**/*' -e ts,tsx --exec ts-node ./app/index.ts"
Copy the code

Let’s take it one at a time.

npm run watch

This command is to start a server locally using TS-Node. Take a look at the description of TS-Node.

TypeScript execution and REPL for node.js, with source map support. Works with TypeScript @>=2.0.

This is a typescript environment for execution and interaction in Node.js, which is simply made for TS!!

The only problem with this command is that hot updates are not supported. So pass.

npm run build && npm run start

These two are put together because they have a high correlation. It’s kind of a codependent relationship.

The first command is simply to compile the current TS project file. The output directory needs to be configured in tsconfig.json. Let me show you my results.

App is my project file. After running the command, the dist folder will be created in the root directory to store the JS files I compiled. This is how I open it.

Now come the second command, which starts the server from the compiled file entry. It only supports hot updates of compiled files. In fact, koA startup commands are developed in JS. Then any changes in the source file will not be affected, so pass.

npm run watch-serve

Here comes the point, this is the key to solving the problem!!

Here the perfect solution to the code hot update, real-time compilation, server restart and other problems. Improved the development experience.

This solution has been mentioned by some Chinese blogs, but I don’t know why it was used in this way at the beginning, which led to some mistakes in the later stage that now seem to be very low-level, but this will not be mentioned. But no one really explained the meaning of this order, and I had not been able to face this demon properly until yesterday when I met a question.

Both Nodemon and TS-Node have been introduced previously, but I will only explain them for specific configurations. I originally understood that there was a comma separating two different commands, but I was naive. Take a look at the documentation.

By default, nodemon looks for files with the .js, .mjs, .coffee, .litcoffee, and .json extensions. If you use the –exec option and monitor app.py nodemon will monitor files with the extension of .py. However, you can specify your own list with the -e (or –ext) switch like so:

nodemon -e js,jade
Copy the code

Now nodemon will restart on any changes to files in the directory (or subdirectories) with the extensions .js, .jade.

Nodemon eats several file types by default, which are.js,.mjs,.coffee,.litcoffee, and.json. The.ts I use here is not in the default supported file, so -e is used here to specify the file type I need to expand. The comma is just used to separate types. The –exec configuration is mentioned here. If you start the app.py file with nodemon, the.py extension will be supported by default. There’s something else in the document.

nodemon can also be used to execute and monitor other programs. nodemon will read the file extension of the script being run and monitor that extension instead of .js if there’s no nodemon.json:

nodemon --exec "python -v" ./app.py
Copy the code

Now nodemon will run app.py with python in verbose mode (note that if you’re not passing args to the exec program, you don’t need the quotes), and look for new or modified files with the .py extension.

As shown here, this configuration supports the same extensions as the running script, in addition to those supported by default. And, if the extender does not need to pass arguments, it can omit single quotes.

In summary, one command is used to add supported file types and one configuration is used to execute and monitor other types of programs.

As for the –watch parameter.

By default nodemon monitors the current working directory. If you want to take control of that option, use the –watch option to add specific paths:

nodemon --watch app --watch libs app/server.js

Now nodemon will only restart if there are changes in the ./app or ./libs directory. By default nodemon will traverse sub-directories, so there’s no need in explicitly including sub-directories.

Don’t use unix globbing to pass multiple directories, e.g –watch ./lib/*, it won’t work. You need a –watch flag per directory watched.

Firstly, Nodemon will monitor the folder where the script file is executed by default. Secondly, if you want to specify a specific folder, you need some detailed paths, such as absolute path or relative path, and do not use wildcards. Therefore, the use of my command line is invalid and against the rules, but having to do so does not affect the operation.

That was the end of it, but yesterday I used an NPM package and I wanted to see how it worked, so I ran into debugger problems, which forced me to read the command carefully.

npm run debugger

Basic debugging methods are available all over the web, but the problem is that when typescript is imported, everything gets messed up. I initially tried the following commands:

'nodemon --inspect --watch ./app -e ts,tsx --exec ts-node ./app/index.ts'
'nodemon --watch --inspect ./app -e ts,tsx --exec ts-node ./app/index.ts'
'nodemon --watch ./app -e ts,tsx --exec ts-node --inspect ./app/index.ts'
Copy the code

All of these can be tried on their own, but it doesn’t work. Then I kept thinking about it today, changed a few keywords Google, and found these two places.

Stackoverflow.com/questions/4…

Github.com/TypeStrong/…

Thanks to StackOverflow and Github, it looks like you know what’s going on.

Here is the -r parameter:

This is used to preload a module and can be used more than once. To go back to the command I wrote, ts-node/register is a module or, loosely speaking, register is a method under TS-Node. This is to use node to preload the TS-Node register module to run the TS program and enable debugger mode.

After the language

So far, in the compilation, hot update, debugger pit should be trudged out, I hope that the people behind the article I wrote can take less dettour. If something is wrong, you can comment and correct it. I should not release all the source code for a while, at least until I finish writing it.

Is it,