vite

假装没昵称
58 阅读7分钟

前言

年前为公司升级了新的monorepo项目架构，近来不用加班，在家得闲。便想再搭个monorepo项目，随便记录一下。
用到以下pnpm + vite3 + vue3 + ESLint + Stylelint + TypeScriptmonorepe实战记录，此篇为其中一个的简单介绍。

vite是什么

vite是基于原生ES-Module的前端构建工具。 开发阶段：基于浏览器ESM加载模块，服务启动快。热更新快，只需让浏览器加载修改的模块。
生产打包：使用rollup进行打包

相较于webpack

先简单介绍下webapck
webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。它通过loader使之可以处理除JavaScript外的其他资源，并通过plugin系统扩展能力（包括压缩、资源分包等）。
它会从入口文件开始递归分析依赖并构建依赖关系图（对应着项目使用的模块），然后将这些的模块进行打包（一个包或多个包）。
webpack支持打包几乎所有的模块类型，比如ESModule、commonjs、AMD等。正因Webpack的功能大而全，它需要分析所有的模块然后打包，但这必然是消耗性能的（耗时），启动服务和热更新也都需要重新编译。当项目越来越大，消耗的时间也越长，每次启动项目和热更新都需要等待。

Vite是基于ESM加载模块，由浏览器接管部分打包程序的工作，只需要在浏览器请求源码时进行转换并提供源码。并使用由GO编写的esbuild（比JavaScipt打包预构建依赖快10-100倍）进行预购预构建。并且在热更新时，只需要让浏览器加载修改的文件而不用进行全量编译。简单来说，vite比webpack启动快，热更新快。

虽然Vite比webpack有更好的发现体验，但不得不说webpack仍旧是一个非常强大的工具，webpack还有着成熟的生态环境。和其他打包工具一样（比如再之前Rollup），它们为我们提供良好的开发体验。它们有各自的优劣，我们要做的就是多了解它们，在不同的情况使用对应的工具，来为我们开发提供最大的便利。

文档使用的pnpm：快速的，节省磁盘空间的包管理工具。如不熟悉的推荐了解下。

尝鲜

初始化项目

创建一个项目文件夹(vite-test01)并初始化package.json文件

mkdir vite-test01 && cd vite-test01 && pnpm init

安装vite

pnpm add vite

按以下目录结构创建文件
image.png

index.html就是个简单的html文件，以type="module"形式导入src/index.js
image.png src/index.js只是简单打印了下hello vite!
image.png

启动服务

执行npx vite启动开发服务。也可将命令写入package.json scripts下，开发一般就是这样做的

"scripts": {
    "dev": "vite"
    ...
}

然后执行pnpm run dev
image.png

很快项目便启动了，浏览器打开http://127.0.0.1:5173/
image.png

与webpack不同的，vite默认会在项目根目录查找vite.config.js做为配置文件（可通过--config指定配置文件，例如：vite --config my-config.js），没有对应配置文件则以默认配置启动服务。

vite在开发阶段会基于项目根目录开启一个服务，此时vite相当于一个服务器。验证一下，在根目录新增test.html image.png image.png

看起来vite就像个静态服务器，但vite功能更加强大。比如vite会将index.html作为源码与模块图的一部分，并解析type="module"的script源码和 CSS<link href>资源，...等
Vite通过解析并对请求做了特殊处理，比如将 ts 转译成 js (vite天然支持引入ts)。
测试下对ts的支持。src下新建test.ts文件，并在index.js中引入

// src/test.ts
console.log('use ts');
export const a: number = 111;

// src/index.js
import { a } from './test';
console.log('hello vite!');
console.log('test.a',a);

image.png

尝试直接使用vue

  • 安装vuepnpm add vue
  • src新建App.vue 
    <template>
  <div>
    Hello Vue!
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped></style>
  • 修改src/index.js 
    import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount("#app");

当尝试直接使用其他类型的文件，编译报错。 image.png 和webpack类似，需安装对应的依赖并通过相应的配置使其支持更多文件类型。

配置选项

默认的配置对其他类型文件支持还是有限的，需要通过配置来增强其能力。
前面提到vite默认以项目根目录的vite.config.js做为配置文件(也可通过vite --config 配置文件来指定) ，那么接下来创建个配置文件。

项目根目录下创建vite.config.js

import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
    // ...
})

需要注意的是

  • vite的配置文件支持使用ESM语法，这样因为vite在配置文件加载前对其进行预处理。
  • defineConfig是一个工具函数，为我们提供智能提示。也可以通过 IDE 和 jsdoc 的配合来实现智能提示，如下 
    /** @type {import('vite').UserConfig} */ 
export default {
    // ...
}

插件plugins

Vite可以使用插件来扩展能力。

配置插件

接下来通过插件使vite支持.vue文件。
安装pnpm add @vitejs/plugin-vue -D

前面vue尝鲜demo使用了scss，如写了样式，还需安装sasspnpm add sass -D，不用额外配置。

加入配置plugins中

import { defineConfig } from "vite";
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue()
  ]
})

然后需重新启动项目，后浏览器打开。
image.png
🆗，这样就支持.vue文件了。

插件执行顺序

在某些时刻，我们需要调整插件执行顺序。
比如调整image插件的执行时机

import image from '@rollup/plugin-image';
import { defineConfig } from 'vite';
export default defineConfig({ 
  plugins: [ 
    { 
      ...image(), 
      enforce: 'pre', 
    }, 
  ], 
})

enforce有以下选项。

  • pre：在 Vite 核心插件之前调用该插件
  • 默认：在 Vite 核心插件之后调用该插件
  • post：在 Vite 构建插件之后调用该插件

更多插件知识查看官方文档-使用插件，查询可以插件请查看官方文档-插件

开发选项 server

export default defineConfig({
  // ...
  server: {
    open: true, // 是否自动打开浏览器，默认false
    host: '0.0.0.0', // 监听ip，默认localhsot
    port: 8081, // 指定服务器端口号，如被占用会尝试下一个可用端口号
    proxy: {  // 配置代理
      '/api': { // 将 /api 开头的请求转发到 target 地址
        target: 'http://www.xxx.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api, ''), // 重写地址
      }
      // ...
    }
  }
})

项目中这些是使用比较多的，更多的开发选项请查看官方文档-服务器选项

生产构建选项 build

export default defineConfig({
  // ...
  build: {
    outDir: 'dist', // 相对于 项目根目录，指定输出路径，默认dist
    assetsDir: 'assets', // 相对于 outDir，指定静态资源存放路径
    ssr: false, // 是否服务端渲染，默认false
  }
})

生产构建选项很多情况都不需要配置，使用默认值就行。更多的生产构建选项请查看官方文档-构建选项

预览选项 preview

从构建目录(/dist)启动web服务器，主要就是为了预览构建结果。配置选项很多和开发选项一致，可自行查看官方文档

未完待续

--------------------分割，上面内容未写完，下面内容待定--------------------

使用内置模板创建Vite项目

vite提供了一些内置模板，方便我们快速创建包含基本代码的vite项目。下面介绍通过npm、yarn、pnpm创建vite项目

  • npm：npm init vite 项目名 [--template 模板预设]
    等价于 npx create-vite 项目名 [--template 模板预设]

  • yarn：yarn create vite 项目名 [--template 模板预设]
    等价于将以下两步
    1，全局安装create-vite，或将已有的create-vite包更新到最新版本
    2，使用create-vite指令构建项目: create-vite 项目名 [--template 模板预设]

  • pnpm：pnpm create vite 项目名 [--template 模板预设]
    和npm init类似，相当于 使用create-vite创建vite项目

vite目前支持以下模板预设

JavaScriptTypeScript
vanillavanilla-ts
vuevue-ts
reactreact-ts
preactpreact-ts
litlit-ts
sveltesvelte-ts

使用vite创建一个 vue + ts 项目

pnpm create vite vite-vue3ts-demo --template vue-ts

image.png 跟着提示先把项目跑起来

1. cd vite-vue3ts-demo
2. pnpm install
3. pnpm run dev

目录结构如下，包含最基本的vue + ts的相关代码。
image.png

avatar
文章
阅读
粉丝