无侵入 Vite 接入流程

Vite 的工作原理

• 基于原生 ES 模块，使用 Rollup 打包
• 浏览器支持：支持原生 ES 模块 module import 的浏览器均可使用

无侵入的使用 Vite

历史项目中完全抛弃 webpack 转投 Vite 不太现实

1. Vite 的生态还不够成熟
2. 改造成本太大

故只在开发环境使用 Vite 以提高开发效率（当然还是支持 webpack 开发的，这里只是新增了一种开发工具，不破坏原有项目的架构）

接入流程( Node.js >= 12.0.0 )

• 相关依赖安装

pnpm i vite vite-plugin-vue2 @originjs/vite-plugin-commonjs -D

• 手动创建 vite.config.js

import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
import { resolve } from 'path'
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'

export default defineConfig({
  build: {
    sourcemap: false,
  },
  plugins: [
    createVuePlugin({
      vueTemplateOptions: {},
    }),
    viteCommonjs({
      // 排除需要转换的依赖：例如 lodash
      exclude: ['lodash'],
    }),
  ],
  resolve: {
    extensions: ['.vue', '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
    alias: {
      '@': resolve('src'),
    },
  },
  server: {
    host: '0.0.0.0',
    port: 8080,
    proxy: {},
  },
})

• 根目录创建 index.html

https://vitejs.cn/guide/#index-html-与项目根目录

index.html 与项目根目录

你可能已经注意到，在一个 Vite 项目中，index.html 在项目最外层而不是在 public 文件夹内。这是有意而为之的：在开发期间 Vite 是一个服务器，而 index.html 是该 Vite 项目的入口文件。

Vite 将 index.html 视为源码和模块图的一部分。Vite 解析 <script type="module" src="..."> ，这个标签指向你的 JavaScript 源码。甚至内联引入 JavaScript 的 <script type="module" src="..."> 和引用 CSS 的 <link href> 也能利用 Vite 特有的功能被解析。另外，index.html 中的 URL 将被自动转换，因此不再需要 %PUBLIC_URL% 占位符了。

与静态 HTTP 服务器类似，Vite 也有 “根目录” 的概念，即文件被提供的位置。你会看到它在整个文档中用 <root> 表示。源码中的绝对 URL 路径将以项目的 “根” 作为基础来解析，因此你可以像在普通的静态文件服务器上一样编写代码（并且功能更强大！）。Vite 还能够处理依赖关系，解析处于根目录外的文件位置，这使得它即使在基于 monorepo 的方案中也十分有用。

Vite 也支持多个 .html 作入口点的 多页面应用模式。

• 通过 module import 的方式引入项目入口文件

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

注意在 Vite 目录架构中，.html 中不可出现模板语法

• 自定义脚本命令

/* package.json */
"dev-vite": "vite"

踩坑总结

• Vite 只支持 ES 规范，不支持 CommonJS 规范，故项目中必须使用 module import 模块化语法（@originjs/vite-plugin-commonjs 依赖可实现兼容 CommonJS）
• @originjs/vite-plugin-commonjs 依赖只可实现兼容 CommonJS 模块化语法，但是不能添加 require 类
• 对于 Vue 项目，Vite 不支持基于 Vue render 的 jsx/tsx 语法（可借用 Babel 或将组件改为 .vue ）
• Vite 生态不支持任何 webpack 插件以及插件链式调用的方式