工具 – Vite

前言

一直想 try Vite, 但一直没有机会。

今天突然 Live Server IP Address 手机连不上...也不知道是 Bug 还是怎么回事儿。

总之 IIS IP Address 没有问题. 那多半是 Live Server 有鬼. 借此机会把它给换了呗。

参考

Docs – Vite

Vite 介绍

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

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

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

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

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

Get Started

安装

npm install vite --global

创建项目

yarn create vite

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

进入项目并安装

yarn install

启动

vite --open

Sass

安装

yarn add sass-embedded --dev

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

PostCSS

参考: 兴杰 – PostCSS

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

yarn add postcss-preset-env --dev
yarn add postcss-nested --dev

如果使用 Yarn PnP 需要安装 PostCSS

yarn add postcss --dev

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

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 就可以了。

yarn add vite-plugin-eslint2 --dev

然后 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 就可以了。

yarn add vite-plugin-stylelint --dev