Build typescript project process locally

1. initialization

cnpm init —yes

2. Global installation typescript

cnpm install typesrcipt -g

3. Generate tsconfig file

tsc —int

4. modify tsconfig.json Configuration in

"outDir": "./dist" outDir yes ts Automatically generated after compilation js File storage directory

"rootDir": "./src" rootDir I wrote it myself ts The directory where the source file is located

5. compile src In the catalog ts file

tsc

6. Global installation ts-node

cnpm install ts-node -g

7. install nodemon Tools （ Automatically detect code updates and restart projects ）

cnpm install -g nodemon

8. stay package.json Configure automatic detection in , Automatically restart the application

"scripts": {
    "dev": "nodemon --watch src/ -e ts --exec ts-node ./src/app.ts"
  }

nodemon --watch src/ Indicates that the detection directory is package.json At the same directory src

-e ts Express nodemon The command is ready to listen to ts Postfix file

--exec ts-node .lsrc/projectJapp.ts Indicates that src Any changes in the directory must be re executed app.ts file

9.parcel Automatic packaging supports browser operation ts file

• install parcel Packaging tools ：cnpm install parcel-bundler --save-dev
• Create a new index.html, To introduce index.ts
• stay package.json Middle feeding npm Add a startup entry , Support startup parcel tool kit

"scripts": {
  "start": "parcel ./index.html"
},

• start-up parcel tool kit

    npm start

After startup, as shown in the figure ：