无侵入 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 项目的入口文件。

Viteindex.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 renderjsx/tsx 语法(可借用 Babel 或将组件改为 .vue
  • Vite 生态不支持任何 webpack 插件以及插件链式调用的方式
上一篇:iOS 新特性分列式 之 iOS 5.x - 主要内容:自动引用计数、故事板、控件自定义呈现、容器视图控制器


下一篇:vite概念和设计思想