TypeScript 安装配置

npm install -g typescript

手动编译
tsc helloworld.ts

在项目的根目录中执行：tsc --init

vscode自动编译

1. 配置文件tsconfig.json

• tsc --init

2. 修改tsconfig.json配置

• "outDir": "./js" // 输出文件夹

3. 启动监视任务:

• 终端 -> 运行任务 -> 监视tsconfig.json

webpack自动打包TS

安装开发依赖

"clean-webpack-plugin": "^3.0.0",
"cross-env": "^7.0.2",
"html-webpack-plugin": "^4.5.0",
"ts-loader": "^8.1.0",
"typescript": "^4.2.4",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.2"

----- build/webpack.config.js

const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const isProd = process.env.NODE_ENV === 'production' // 是否生产环境

function resolve (dir) {
 return path.resolve(__dirname, '..', dir)
}
module.exports = {
 mode: isProd ? 'production' : 'development',
 entry: {
  app: './src/main.ts'
 },
 output: {
  path: resolve('dist'),
  filename: '[name].[contenthash:8].js'
 },
 module: {
  rules: [
   {
    test: /\.tsx?$/,
    use: 'ts-loader',
    include: [resolve('src')]
   }
  ]
 },
 plugins: [
  new CleanWebpackPlugin({
  }),
  new HtmlWebpackPlugin({
   template: './public/index.html'
  })
 ],
 resolve: {
  extensions: ['.ts', '.tsx', '.js']
 },
 devtool: isProd ? 'cheap-module-source-map' : 'cheap-module-eval-source-map',
 devServer: {
  host: 'localhost', // 主机名
  stats: 'errors-only', // 打包日志输出输出错误信息
  port: 8081,
  open: true
 }
}

----- public/index.html 创建 html 结构

----- src/main.ts 写 ts 代码

配置打包命令

"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js",

"build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"