跳到主要内容

vite

准备​

安装 vite、typescript、@babel/core、@babel/preset-env、@babel/preset-typescript

yarn add vite typescript @babel/core @babel/preset-env @babel/preset-typescript -D

搭建​

一、添加 vite.config.js 配置文件​

具体代码:

import { defineConfig } from "vite";

export default defineConfig({});

二、添加 vite 入口文件 index.html​

工作如下:

  1. 引入入口文件 index.ts

具体代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TypeScript</title>
</head>
<body>
    <script src="/src/index.ts"></script>
</body>
</html>

三、添加 babel.config.js 配置文件​

工作如下:

  1. 配置preset 预设如下:
    • 引入@babel/preset-env预设
    • 引入@babel/preset-typescript预设

具体代码:

module.exports = {
    presets:[
        "@babel/preset-env",
        "@babel/preset-typescript"
    ]
}

四、添加 tsconfig.json 配置文件​

具体代码

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "moduleResolution": "node",
        "strict": true,
        "jsx": "preserve",
        "sourceMap": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "lib": [
            "esnext",
            "dom"
        ],
    },
    "include": [
        "src/**/*.ts",
        "src/**/*.d.ts",
        "src/**/*.tsx",
        "src/**/*.vue"
    ]
}

五、添加 index.ts 入口文件​

具体代码

type PersonType = {
  name: string;
  age: number;
};

const person: PersonType = {
  name: "柏拉文",
  age: 23,
};

console.log(person)

六、package.json 配置命令​

具体代码

{
  "name": "vite-start",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
     "start":"vite"
  },
  "devDependencies": {
    "@babel/core": "^7.18.2",
    "@babel/preset-env": "^7.18.2",
    "@babel/preset-typescript": "^7.17.12",
    "typescript": "^4.7.2",
    "vite": "^2.9.9"
  }
}

至此，运行yarn start 即可实时编译TypeScript