工具 – Vite

Vite 介绍

简单说，Vite 可以用来替代 Webpack。

对比 Webpack. Vite 的优点是，超级快 (因为它底层是 esbuild)， 配置简单。

因为目前我只用 Vite 来做 development 阶段开发，production 依然用 Webpack，

所以我也不清楚 Vite 的局限，但就 dev 开发而论 Vite 秒杀 Webpack 就是了。

拿 Vite 比 Webpack 其实不太公平，它俩不是同辈，Vite 应该要和未来的 Turbopack 比才合理，希望 Turbopack 找点可以替代 Webpack 吧。

 

Get Started

创建项目

pnpm create vite

有各种模板, 我是单侧所以选的是 Vanilla, TypeScript

进入项目并安装

pnpm install

启动

pmpm vite --open

 

Sass

安装

pnpm add sass-embedded -D

只要安装 sass-embedded 就够了. 不需要任何 config. 直接把 .css 换成 .scss 就可以跑了.

 

PostCSS

参考：兴杰 – PostCSS

安装插件即可，不需要装 PostCSS CLI 哦

pnpm add postcss-preset-env -D
pnpm add postcss-nested -D

如果使用 Yarn PnP 需要安装 PostCSS

pnpm add postcss -D

postcss.config.js

import postcssPresetEnv from 'postcss-preset-env';
import nested from 'postcss-nested';

export default {
  plugins: [postcssPresetEnv({ stage: 1 }), nested()],
};

注：这里用的是 ES Module (.mjs) 不是 CommonJS 哦 (.cjs)

setup browserlist (在 package.json)

{
  "browserslist": [
    "since 2021 and not ios < 15"
  ]
}

完成，我们不需要任何 Vite config。它会自动去读 postcss.config.js 和 browserlist。

 

IP Address & HTTPS

创建 vite.config.ts

注：要支持 .ts 需要额外安装 yarn add @types/node --dev

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    host: '192.168.0.152',
    port: 4200,
    open: '/src/home/home.html',
    https: {
      cert: 'C:\\self-signed-certificate\\192.168.0.152.crt',
      key: 'C:\\self-signed-certificate\\192.168.0.152.key',
    },
  },
});

https config 和 Live Server 是一样的。

注：open 可以指定开启的路径，这样就不需要 command --open 了，直接 vite 就够了。

 

Build Production

pnpm tsc && vite build

看样子它是先跑一轮 TypeScript compile 然后跑 vite build，就不知道 TypeScript compile 会不会有问题 (我印象中这个不加工直接跑很烂的)，但目前测试是 ok 的。

 

Multiple Entry Points

for development 不需要额外配置，你的 .html 都可以直接访问到。

for build 才需要 config。

import { defineConfig } from 'vite';
import pathHelper from "path";
import { fileURLToPath } from "url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = pathHelper.dirname(__filename);

export default defineConfig({
  build: {
    rollupOptions: {
      input: [
        pathHelper.resolve(__dirname, './src/home/home.html'),
        pathHelper.resolve(__dirname, './src/about/about.html'),
        pathHelper.resolve(__dirname, './src/**/*.html') // 也支持 glob 表达式
      ],
    },
  },
});

注：记得要装 yarn add @types/node --dev 哦。

Vite build production 时底层使用的是 rollup，multiple entry points 是通过底层 rollup config 实现的。

直接把路径连到 .html 就可以了

HTML 内会引入 .ts 这样就串起来了。

 

搭配 ESLint

要在 build 的时候搭配 ESLint，装一个 plugin 就可以了。

pnpm add vite-plugin-eslint2 -D

然后 vite.config.ts

import { defineConfig } from 'vite';
import eslint from 'vite-plugin-eslint2';

export default defineConfig({
  plugins: [eslint()],
});

注：还有一个正版 vite-plugin-eslint，不过好像已经没有维护了。

 

搭配 Stylelint

要在 build 的时候搭配 Stylelint，装一个 plugin 就可以了。

pnpm add vite-plugin-stylelint -D

然后 vite.config.ts

import { defineConfig } from 'vite';
import stylelint from "vite-plugin-stylelint";

export default defineConfig({
  plugins: [stylelint()],
});

 

不小心掉坑 の base64 cause svg not show

<script lang="ts">
  import iconSvg from '../../src/icons/svg-icon-sprite/symbol/svg/sprite.symbol.svg';
</script>

<svg class="icon" viewBox="0 0 36 36">
  <use xlink:href="{ iconSvg }#solid-angle-down" />
</svg>

如果 sprite.symbol.svg 内容太少，它会被 vite 自动转换成 base64 string data:image，这样 svg 就坏掉了，不会显示出来。

解决方法是不让 vite 自动转换

export default defineConfig({
  build: {
    assetsInlineLimit: 0, 
  },
});

当然，sprite.symbol.svg 的内容通常不可能会那么小啦。

 

ECMA target

Vite 在 build TypeScript 时，是不看 tsconfig 的 target 的哦！

在 vite.config.ts 可以设置 target

export default defineConfig({
  build: {
    target: 'es2023'
  },
});

如果没有设置，它的默认叫 baseline-widely-available

这个 baseline 是一个大家认可的基准，代表覆盖率还挺好的浏览器版本。

它的官网：WebDX Community Group

依照这个版本，tsconfig 的 target 可以设置成 es2023。

如果用超过 es2023 就需要 polyfill 了

 

TODO

目前只用到上面几个功能, 以后有其它的再补上呗.