学习vite笔记3

搭建vite项目

1、安装node

2、推荐pnpm 作为包管理工具 npm i -g pnpm

3、切换 pnpm 默认镜像源 pnpm config set registry registry.npmmirror.com/

4、项目初始化 pnpm create vite

5、输入项目名称

6、选择前端框架

7、选择开发语言

8、进入项目目录 cd 项目名称

9、安装依赖 pnpm install

10、 pnpm run dev

项目结构目录

. ├── index.html 
  ├── package.json
  ├── pnpm-lock.yaml 
  ├── src 
  │ ├── App.css 
  │ ├── App.tsx 
  │ ├── favicon.svg 
  │ ├── index.css 
  │ ├── logo.svg 
  │ ├── main.tsx 
  │ └── vite-env.d.ts 
  ├── tsconfig.json 
  └── vite.config.ts

index.html 中包含一段代码

<script type="module" src="/src/main.tsx"></script>

中包含了一个声明了 type="module" 的script标签

疑惑点 浏览器并不识别 tsx 语法，也无法直接 import css 文件，上面这段代码究竟是如何被浏览器正常执行的呢？

这是因为 vite Dev Server 所做的 “中间处理”， 在读取到 main.tsx文件的内容后， vite会对文件内容进行编译

Vite 会将项目的源代码 编译成 浏览器 可以识别的代码，与此同时，一个import语句 即代表了一个http请求

Vite Dev Server 会读取本地文件， 返回浏览器 可以解析的代码。 当浏览器解析到新的 import语句，又会发出新的请求， 直到所有资源加载完成。

vite 所倡导的 no-bundle理念的真正含义：利用 浏览器原生ES模块的支持，实现开发阶段的 Dev Server ，进行模块的按需加载， 而不是先整体打包在进行加载。 在开发阶段省略了繁琐且耗时的打包过程。

配置文件 vite.config.ts

1、 配置文件可以有三种后缀 .js .ts .mjs

生产环境构建

vite 在开发阶段通过Dev Server 实现了不打包的特性， 而在生产环境中，Vite 依然会 基于 Rollup 进行打包，并采取一系列打包优化手段.

"scripts": { 
    // 开发阶段启动 Vite Dev Server 
    "dev": "vite", 
    // 生产环境打包
    "build": "tsc && vite build", 
    // 生产环境打包完预览产物 
    "preview": "vite preview"
},

打包前先执行 tsc 是用来 编译ts 代码并进行类型检查，而这里主要用来做类型检查。

{
"compilerOptions": {
    // 省略其他配置 
    // 1. noEmit 表示只做类型检查，而不会输出产物文件
    // 2. 这行配置与 tsc --noEmit 命令等效
    "noEmit": true, 
    }, 
}

Vite 提供了开箱即用的 TypeScript 以及 JSX 的编译能力，但实际上底层并没有实现 TypeScript 的类型校验系统，因此需要借助 tsc 来完成类型校验(在 Vue 项目中使用 vue-tsc 这个工具来完成)，在打包前提早暴露出类型相关的问题，保证代码的健壮性。