# viteDAA

**Repository Path**: coderzjd/vite-daa

## Basic Information

- **Project Name**: viteDAA
- **Description**: 111111111111111111111111111111111
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-06-16
- **Last Updated**: 2024-06-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## vite基本使用和多页面配置分享

### 一、vite基本使用
+ 安装vite `npm i vite -D`
+ 在根目录新建`index.html`，`index.js`
+ 在`index.html`新增`<script type="module" src="./src/index.js"></script>`
+ package.json 新增脚本 `"npm start": "vite"`
+  使用`npm run start`vite开启的开发服务器进行预览
+ 在根目录新增`vite.config.js`可以对vite进行详细配置

### 二、vite原理分享
+ 根目录和路径解析
  - Vite 将项目的根目录视为服务文件的位置，并解析源码中的绝对 URL 路径，以项目的“根”作为基础
+ 入口文件解析：
  -  index.html 视为项目的入口文件，它解析 HTML 文件中的    `<script type="module">` 标签，这些标签指向 JavaScript 源码
+ 模块路径重写：
  - Vite 使用 es-module-lexer 扫描 import 语法，并使用 magic-string 重写模块的引入路径，以适应浏览器的模块加载机制
+ 模块化处理
  - Vite 利用原生 ES 模块（ESM）的特性，将入口文件中的模块请求转换为浏览器可识别的格式
+ 依赖预构建
  - Vite 会将依赖中的 CommonJS、UMD 等模块化规范转换为 ESM，以便在浏览器中使用。这一步骤使用 esbuild 来优化依赖，减少模块请求次数
+ 热模块替换（HMR）
+ 缓存优化
  
### 三、多入口打包配置实现
+ 在`vite.config.js`内进行配置
```js
import vue from '@vitejs/plugin-vue'
import path from "path";
import { defineConfig } from "vite";

const page = process.env.npm_config_page
const resolvePath = (relativePath) => path.resolve(__dirname, relativePath)
export default defineConfig({
    root: page ? resolvePath(`./page/${page}`) : process.cwd(),
    publicDir: resolvePath('./public'),
    resolve: {
        alias: {
            "@": resolvePath('./src'),
        }
    },
    plugins: [
        vue(),
    ],
    build: {
        rollupOptions: {
            input: [
                resolvePath('./page/aaa/index.html'),
                resolvePath('./page/bbb/index.html')
            ]
        }
    }
})  
```
+ 启动时使用npm参数进行启动
  - `npm run start --page=aaa`会以page/aaa文件夹启动服务器
+ 打包时会根据`rollupOptions.input`数组将多入口分别打包

### 待优化
+ 多页面打包会造成输出路径嵌套
+ 需要维护多个html入口文件
  - 将需要注入的资源放在public文件夹下
  - 使用vite插件API对多个脚本进行注入
```js
export default () => {
    return {
        name: 'html-transform',
        transformIndexHtml(html, ctx) {
            return {
                html,
                tags: [
                    {
                        tag: 'link',
                        attrs: {
                            src: './inject.js'
                        },
                        injectTo: 'head'
                    },
                    {
                        tag: 'link',
                        attrs: {
                            rel: 'stylesheet',
                            href: './index.css'
                        },
                        injectTo: 'head'
                    }
                ]
            }
        }
    }
}
```