TypeScript (ts) 工程化最全安装教程

 一、安装流程：

sudo npm install -g typescript

tsc --init

npm init

npm i webpack webpack-cli webpack-dev-server ts-loader typescript html-webpack-plugin

 

二、详解：

1. 使用NPM 全局安装 TypeScript

// Windows
npm install -g typescript

// Macos
sudo npm install -g typescript

安装完成后，我们就可以使用 tsc 命令来执行 TypeScript 的相关代码了：

 

2. 生成ts配置文件

tsc --init

 会在项目目录下生成一个 tsconfig.json 的配置文件📃

 

3. 生成package.json 

npm init

 

4. 安装工程化工具（用于打包、自动化生成文件）

（1）webpack相关

webpack，webpack-cli，webpack-dev-server

（2）typescript相关

加载编译.ts格式的文件 ：ts-loader

让库可以使用ts语法：typescript

把宿主页面和ts生成的目标js合成一个页面：html-webpack-plugin

npm i webpack webpack-cli webpack-dev-server ts-loader typescript html-webpack-plugin

 

5. 配置webpack.config.js

配置详情地址：webpack文件配置代码

 

6.修改package.json

修改dev的执行语句，让他按照上一步配置的webpack.config.js执行。

{
  "name": "08.ts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --config ./build/webpack.config.js"
  },
  "author": "dj",
  "license": "ISC"
}

 

最终我们的ts工程化成功跑起来了，并且做了热更新。