vite快速上手-快速创建vite项目以及生产环境打包构建

快速上手vite

我们这里使用pnpm构建项目
pnpm的镜像在国外，所以我们需要切换到国内镜像

// 查看源
pnpm get registry
// 临时修改
pnpm --registry https://registry.npmmirror.com install axios 
// 持久使用-国内镜像
pnpm config set registry https://registry.npmmirror.com
// 还原
pnpm config set registry https://registry.npmjs.org

初始化

创建vite项目

pnpm create vite

按照选项初始化完成项目后，进入目录，安装依赖

pnpm install

启动项目

pnpm run dev

出现这个界面就说明启动成功了。

vite项目的初始化目录：

在该目录中，index.html是项目的根文件，vite默认会把该文件作为项目的入口，如果我们访问localhost:3000端口的时候，vite的Dev Server就会返回这个文件的内容。

我们可以看到，index.html这个文件内有这么一行：

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

由于现代浏览器支持原生的ES模块规范，因此原生的ES语法可以放到浏览器中直接执行，只需要在script中声明type="module"即可。
在index.html文件中，引入了src/main.ts,那么就相当于请求了http://localhost:3000/src/main.ts资源，我们可以在浏览器中查看到这个请求：

vite中的Dev Server接到这个请求后会在内部进行一系列处理，然后将资源返回给浏览器。
大概就是下面的流程：

浏览器是不识别.ts的语法也不会直接import css，这段代码能够被浏览器识别并执行，是因为Vite Dev Server做中间处理了，我们可以在页面的响应中看到编译后的结果：

import './style.css'
import App from './App.vue'

在vite项目中，一个import代表一个请http请求，上面的示例代码中，分别代表两个不同的请求，Vite Dev Server会读取本地文件，返回浏览器可以解析的代码。
当浏览器解析时遇到import语句，则又会发送新的请求，以此类推，直到所有的资源加载完成。

vite倡导的no-bundle理念的真正含义：利用原生浏览的ES模块支持，实现开发阶段的Dev Server，进行模块的按需加载，而不是先整体打包后在进行加载。
vite的这种模式与webpack截然不同，webpack是先打包解析所有资源再加载，而vite在开发阶段省掉了打包的这种操作，将这种解析的方式交给浏览器来处理，所以这就是为什么它这么快的重要原因。

配置文件

在vite项目中，通常涉及到很多项目配置，这些配置文件通常都分为：.js、.ts、.mjs
在实际项目中，一般使用vite.config.ts作为配置文件，初始化vite后的配置文件内容如下：

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
})

上述代码中，plugins默认使用了vue插件，来提供vue项目的编译和更新功能。

下面我们来做一个简单的配置：
将项目启动的入口文件index.html更改为src文件夹下的index.html

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 1、为了避免报错，需要通过 `pnpm i @types/node -D` 安装类型
// 2、tsconfig.node.json中设置`allowSyntheticDefaultImports: true`允许default导入
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  // 手动指定根目录位置-指定到src
  root: path.join(__dirname,'src'),
  plugins: [vue()],
})

配置完成后，在src文件夹下新建index.html，运行项目就可以看到，项目默认的入口更改为src文件夹下的index.html


到这里，我们的第一个项目配置就实现了，当然，vite项目中还有很多配置，这里只是例举一个配置，让你知道项目中的配置大概是怎么样的。

生产环境构建

在开发阶段Vite通过Dev Server实现了不打包特性，而在生产环境中，vite会基于Rollup进行打包，在这个过程中采取了一系列打包优化手段，从项目的package.json中就可以知道：

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

在这里，build就是用来进行生产环境打包的，但是在vite build之前会先执行tsc
tsc作为TypeScript官方编译命令，可以对TypeScript代码进行类型检查，我们可以从项目中的tsconfig.json中注意到这个配置：

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

Vite虽然提供了开箱即用的TS以及JSX的编译能力，但实际上底层并没有实现TS的类型校验系统，因此需要借助tsc来完成类型校验(vue项目中为vue-tsc)，这样做可以在打包前提前暴露出类型相关的问题，保证代码的健壮性。
你可以试着打包一下，并预览打包后的执行结果。
打包命令pnpm run build

此时vite生成了最终的打包产物，运行一下pnpm run preview来预览打包产物的执行结果

在浏览器中打开http://localhost:4173/即可预览结果，你将看到和开发阶段一样的页面内容，证明我们完成第一个Vite项目的生产环境构建。