mx52jing

Appearance

Return to top
On this page

初体验

Introduction

  • Vite是一个开箱即用(out of box)的构建工具，不需要使用额外配置就可以帮助我们处理构建工作。

  • Vite在开发阶段基于浏览器原生ESM的支持实现了no-bundle服务，进行模块的按需加载，开发环境使用esbuild打包，提高构建速度

  • Vite在生产环境中使用Rollup进行打包，并采取一系列的打包优化手段

创建项目并启动

创建一个空项目initial_experience，使用pnpm init初始化项目，然后下载Vite

shell
mkdir initial_experience
cd initial_experience
pnpm init
pnpm install vite
  • 目录结构
shell
initial_experience
├── index.html
├── package.json
├── pnpm-lock.yaml
└── src
    ├── count.js
    └── main.js
  • index.html
html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>initial experience</title>
</head>
<body>
<div>initial experience</div>
<script src="./src/main.js" type="module"></script>
</body>
</html>
  • main.js
javascript
import { num } from "./count";

console.log('main.js', num)
  • count.js
javascript
export const num = 100;
  • 在package.json中添加命令
json
"scripts": {
  "dev": "vite",
  "build": "vite build",
  "test": "echo \"Error: no test specified\" && exit 1"
},
  • 启动项目
shell
pnpm dev --host
  • 启动后可以在控制台看到打印出main.js 100

TIP

  • index.html需要在项目根目录中

  • 在index.html中，要声明一个type="module"的script标签

修改入口路径

  • 在Vite中，默认的入口文件是项目根目录下的index.html文件，关于入口文件和index.html的说明点击这里查看；

  • 该index.html中声明了一个type="module"的script标签，并且该script标签的src指向./src/main.js，此时访问http://ip:port，相当于请求http://ip:port/src/main.js这个资源；

  • Vite的Dev Server接受到这个请求，然后读取请求资源文件的内容，并对其进行一定的处理，然后将处理的结果返回给浏览器；

html
<script src="./src/main.js" type="module"></script>

如果想要修改项目入口文件路径，可以通过配置root配置项目根目录的位置来实现

vite.config.js

javascript
import path from "node:path";
/**
 * @type {import('vite').UserConfig}
 */

const config = {
    root: path.resolve(__dirname, 'src'),
}

export default config

引入第三方模块

shell
pnpm install lodash-es
  • main.js
javascript
import { num } from "./count.js"

console.log('main.js', num)
  • count.js
javascript
import _ from 'lodash-es'
export const num = 100

console.log('count.js')

  • 先中止运行的本地服务，直接双击index.html，在浏览器中打开

  • 如果先去除掉lodash-es的引入，控制台是会正常打印，如下

javascript
count.js
main.js 100
  • 如果放开lodash-es的引入，然后刷新页面，发现报错如下:
javascript
Uncaught TypeError: Failed to resolve module specifier "lodash-es". 
Relative references must start with either "/", "./", or "../".

  • 可以看到，浏览器原生esmodule只支持/, ./, 或者../开头的路径

  • 此时运行pnpm dev --host重新启动Vite开发服务

  • 可以在count.js中看到引入的lodash-es路径被替换了，这个操作是Vite来做的，这是Vite的依赖预构建功能

vite.config.js语法提示

  • 我们想要在vite.config.js中写配置的时候有相应的API提示，可通过以下两种方法
  1. 使用vite自带的defineConfig方法
js
import { defineConfig } from "vite";

export default defineConfig({
  optimizeDeps: {
    exclude: ['lodash-es'] // 指定数组中的依赖不进行构建
  }
})
  1. 引入类型标注
javascript
/**
 * @type {import('vite').UserConfig}
 */

const config = {
    optimizeDeps: {
        exclude: ['lodash-es']
    }
}

export default config
  • 效果如下

vite.config.js中为什么可以用esmodule语法

  • vite读取vite.config.js的时候，会先解析语法，如果是esmodule语法，会先转换成commonjs语法

其他

相关代码可查看initial_experience