TypeScript开发流程

一、简易编译TypeScript文件

• 安装 node.js
• 使用npm全局安装typescript: npm i -g typescript
• 创建一个ts文件: hello.ts
• 编译hello.ts: 执行命令tsc hello.ts，生成产物为hello.js
• 执行hello.js：node hello.js

tips: 编译和执行ts文件，可使用一条指令完成。

npm install ts-node -g
ts-node hello.ts

二、webpack打包TypeScript文件

如果tsx文件很多的话，使用tsc一个一个编译文件很麻烦，这时候可使用webpack进行打包。

• 1、生成tsconfig.json文件，执行以下命令会自动创建

tsc -init

• 2、创建webpack.config.js

// 引入一个包
const path = require('path')
// clean
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  // 指定入口文件
  entry: './src/index.ts',
  // 指定打包文件所在目录
  output: {
    // 指定打包文件的目录
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js",
    // 配置打包环境
    environment: {
      // 告诉webpack不要用箭头函数
      arrowFunction: false
    }
  },
  mode: "development",
  // 指定webpack打包时要使用的模块
  module: {
    // 指定加载的规则
    rules: [
      {
        // test指定规则生效的文件
        test: /\.ts$/,
        // 要使用的loader
        use: ['ts-loader'],
        // 要排除的文件
        exclude: /node_modules/
      }
    ]
  },
  // 配置webpack的插件
  plugins: [
    new CleanWebpackPlugin()
  ],
  // 用来设置引用模块
  resolve: {
    extensions: ['.ts', '.js']
  }
}

• 3、创建package.json文件

npm init -y

• 4、项目添加依赖
  npm i -D webpack webpack-cli typescript ts-loader clean-webpack-plugin

• 5、package.json npm命令配置

{
  "name": "typescript_app",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack && node dist/bundle.js",
    "start": "webpack serve --open  "
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "ts-loader": "^9.3.1",
    "typescript": "^4.7.4",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
  }
}

• 6、打包和运行项目

npm run build