0001. 从 0 到 1 搭建一个原生的（vanilla） vite 工程

1. 🎯 本节内容
2. 🫧 评价
3. 🤔 “vanilla” 是什么意思？
4. 🔍 查看官方提供的 vanilla-ts 模板
5. 🤔 Vite 支持 TS 吗？
6. 💻 demos.1 - 从 0 到 1 搭建一个 vite-vanilla-ts 工程
7. 🔗 引用

1. 🎯 本节内容

从 0 到 1 搭建一个 vite 的原生 demo

2. 🫧 评价

基于 vite 从 0 到 1 搭建一个 vite-vanilla-ts 工程，实现最基础的：
- dev
- build
- preview
vite 是比 webpack 更上层的工具链
- vite 是一个上层的工具链，它帮我们预先配置好的很多东西，你只需要安装 vite 就可以实现 dev server、build 等操作。
- build 出来的产物，也是自带文件指纹的。
- 从开箱即用的角度来对比，vite 比 webpack 做得更加全面，你只需要 1～2min，就能搭建好一个纯粹的 vite-demo 了，并且还带有 TypeScript 支持。

3. 🤔 “vanilla” 是什么意思？

vanilla - “纯粹” -> 发音：/vəˈnɪlə/
“Vanilla” 代表的是纯粹、简单和直接的编程方式，强调不依赖额外的框架或库，而是直接使用原生的语言和技术。

4. 🔍 查看官方提供的 vanilla-ts 模板

vite -- vanilla-ts
- 通过本节示例最终搭建出来的 demo 效果和官网提供的这个 vanilla-ts 示例是非常类似的，主要区别在于我们的 demo 缺少了一些 ts 配置信息。
- 可以在写完之后去到官方文档中对比一下看看。
- 可以点进去，通过 StackBlitz 在线查看 vanilla-ts 的模板源码。
也可以通过以下命令在本地创建

bash

$ npm create vite@latest my-vanilla-ts -- --template vanilla-ts
# https://github.com/vitejs/vite/tree/main/packages/create-vite/template-vanilla-ts
# 相当于直接从 vite 仓库中拉取这个模板中的内容

5. 🤔 Vite 支持 TS 吗？

Vite 天然支持引入 .ts 文件。
注意，Vite 仅执行 .ts 文件的转译工作，并 不执行 任何类型检查。如果有类型检查的需求，可以通过 tsc 来实现。

6. 💻 demos.1 - 从 0 到 1 搭建一个 `vite-vanilla-ts` 工程

bash

# 创建 vite-demo 目录
$ mkdir vite-demo
# 进入 vite-demo
$ cd vite-demo
# 初始化包
$ pnpm init
# 安装 vite、TypeScript
$ pnpm add vite typescript -D

# 创建必要的文件
# index.html - doc：https://cn.vitejs.dev/guide/#index-html-and-project-root
# 编写测试脚本：src/index.ts、src/counter.ts

# 往 package.json 中插入以下 scripts 脚本：
# "dev": "vite",
# "build": "vite build",
# "preview": "vite preview"

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script type="module" src="./src/index.ts"></script>
</html>

import { setupCounter } from './counter'

document.querySelector('#app')!.innerHTML = `
  <div>
    <button id="counter" type="button"></button>
  </div>
`
setupCounter(document.querySelector('#counter') as HTMLButtonElement)

export function setupCounter(element: HTMLButtonElement) {
  let counter = 0
  const setCounter = (count: number) => {
    counter = count
    element.innerHTML = `Counter: ${counter}`
  }
  setCounter(0)
  element.addEventListener('click', () => setCounter(counter + 1))
}

json

{
  "name": "vite-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "packageManager": "pnpm@10.15.1",
  "devDependencies": {
    "typescript": "^5.9.3",
    "vite": "^7.1.9"
  }
}

无需任何其它的配置，现在已经可以正常完成以下操作：
【开发环境】启动开发服务器，执行命令 pnpm dev
【生产环境】出包，执行命令 pnpm build，预览构建产物，执行命令 pnpm preview

bash

$ pnpm dev

# > vite-demo@1.0.0 dev .../demos/1/vite-demo
# > vite


#   VITE v7.1.9  ready in 410 ms

#   ➜  Local:   http://localhost:5173/
#   ➜  Network: use --host to expose
#   ➜  press h + enter to show help

$ pnpm build

# > vite-demo@1.0.0 build .../demos/1/vite-demo
# > vite build

# vite v7.1.9 building for production...
# ✓ 4 modules transformed.
# dist/index.html                0.32 kB │ gzip: 0.24 kB
# dist/assets/index-CgkQmZVT.js  0.97 kB │ gzip: 0.53 kB
# ✓ built in 51ms

$ pnpm preview

# > vite-demo@1.0.0 preview .../demos/1/vite-demo
# > vite preview

#   ➜  Local:   http://localhost:4173/
#   ➜  Network: use --host to expose
#   ➜  press h + enter to show help