hsenap技术笔记

用 Vite + TypeScript 搭一个前端项目

做小工具或单页应用时，我现在基本都用 Vite + TypeScript 起步：启动快、配置少，打包产物也干净。这篇记录一下从零搭起来的过程。

创建项目

npm create vite@latest my-app -- --template vanilla-ts
cd my-app
npm install
npm run dev

vanilla-ts 是不带框架的纯 TS 模板，想用 Vue / React 换成 vue-ts / react-ts 即可。

npm run dev 启动后终端会打印本地地址。加上 --host 参数（vite --host）还会打印局域网地址，手机连同一个 Wi-Fi 就能直接预览 H5 页面，调移动端样式很方便。

目录结构

my-app/
├─ index.html        # 入口 HTML，Vite 从这里开始解析
├─ public/           # 原样拷贝到产物根目录的静态文件
├─ src/
│  ├─ main.ts        # index.html 里 <script type="module"> 引用的入口
│  └─ style.css
├─ tsconfig.json
└─ package.json

和 webpack 不同，Vite 把 index.html 当作入口：HTML 里引用的 TS、CSS 会被它顺着依赖关系处理。

tsconfig 里值得注意的几项

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "noEmit": true,
    "isolatedModules": true
  },
  "include": ["src"]
}
  • moduleResolution: "bundler"：按打包工具的规则解析模块，允许省略扩展名，也认 package.json 里的 exports 字段。
  • noEmit: true：TS 编译器只负责类型检查，真正的转译交给 Vite（底层是 esbuild / Rolldown），所以不需要 tsc 输出文件。
  • isolatedModules: true：保证每个文件都能单独转译，避免用到需要跨文件类型信息才能编译的写法。

三条命令

{
  "scripts": {
    "dev": "vite --host",
    "build": "vite build",
    "typecheck": "tsc --noEmit"
  }
}

有一点容易踩坑：vite build 不做类型检查，类型写错了照样能打包成功。所以我会单独加一个 typecheck，提交前跑一下；或者把 build 写成 tsc --noEmit && vite build，类型不过就不让打包。

小结

  • Vite 负责开发服务器和打包，TypeScript 只负责类型检查，分工清楚；
  • --host 方便手机真机预览；
  • 记得单独跑类型检查，别指望 build 帮你兜底。

← 返回首页