[TS automatic restart + TS automatic operation + Parcel automatic packaging]
Proceed as follows:
(1) Initialize npm init –yes and package.json appears
(2) Install typescript
Install npm i typescript -g globally or
Local installation: npm i typescript -D or
yarn install yarn global add typescript
[npm i typescript -D is the abbreviation of npm install typescript –save-dev]
(3) Generate tsconfig.json file
tsc –init
(4) Modify the configuration in tsconfig.json
“outDir: “./dist” –outDir is the directory where js files are generated after ts compilation
“rootDir”: “./src”, –rootDir is the directory where the ts source file written by yourself is located
Note: dist src package.json must be in a directory
(5) Compile the ts files in the src directory and subdirectories
tsc [In the current directory of src: enter tsc Note that you can directly write the tsc command]
[All ts files in the src directory and subdirectories will be compiled into js files, and all output to the dist directory]
(6) Install ts-node
ts-node allows node to run ts code directly, without using tsc to compile ts code into js code. [ts-node wraps node, it can run ts code directly]
Install npm i ts-node -g globally or
Local installation: npm i ts-node -D or
Yarn installation: yarn global add ts-node
(6) Install the nodemon tool [automatic detection tool]
Nodemon role: [nodemon can automatically detect changes to files in a directory to debug node.js-based applications by restarting the application]
Install globally npm install -g nodemon or
Local installation: npm i nodemon -D or
yarn install yarn add nodemon -D
(7) Configure automatic detection in package.json to 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 the same level directory src as package.json
-e ts indicates that the nodemon command is ready to listen to files with ts suffix
–exec ts-node ./src/project/app.ts Indicates that if any changes are detected in the src directory, the app.ts file must be re-executed
2.Parcel packaging supports browsers to run TS files
(1) Install the Parcel packaging tool: npm install parcel-bundler –save-dev
(2) Add startup items to npm in package.json to support startup of parcel toolkits
"scripts": { "start": "parcel ./index.html" }, (3) Start the parcel toolkit
npm run start [npm start] or npm run start [npm start] or yarn run start [yarn start]
This article is reprinted from https://www.xxhzm.cn/index.php/archives/662/
This site is for inclusion only, and the copyright belongs to the original author.