1. Compile the TS file globally

Installing typescript globally compiles TS

npm install typescript -g

TSC –init generates the tsconfig.json file

TSC can compile TS files into JS files

TSC –watch Monitors changes in TS files to generate JS files

2. Configure the WebPack environment

NPM init -y Indicates the initial configuration

TSC –init generates the tsconfig.json file

Create a rollup.config.js file

Install dependencies

npm i rollup typescript rollup-plugin-typescript2 @rollup/plugin-node-resolve rollup-plugin-serve

Create the SRC folder and create the index.ts file under the SRC folder

rollup.config.json

import { nodeResolve } from '@rollup/plugin-node-resolve'; import ts from 'rollup-plugin-typescript2' import serve from 'rollup-plugin-serve' import path from 'path' export Default {input:' SRC /index.ts', output:{file: path.resolve(__dirname,'dist/bundle.js'), // global: make a global variable to receive // CJS: Module. Exports // esM: export default // iife: ()() // umd: NodeResolve ({extensions:['.js', '.ts']}), ts({tsconfig: Path.resolve (__dirName, 'tsconfig.json')}), serve({port: 3000, contentBase:'', // openPage is the root of the service: '/public/index.html', // which file to open open: true // open browser by default})]}Copy the code

The module and sourcemap in tsconfig.json need to be changed

"module": "ESNext",
"sourceMap": true,
Copy the code

Create a public folder and create index.html

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, < img SRC ="/dist/bundle.js"></ img >< img SRC ="/dist/bundle.js"></ img ></ img >Copy the code

Configuration commands

"scripts": {
    "dev": "rollup -cw"
  },
Copy the code

Execute the command

npm run dev
Copy the code