工具 – 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 --dev

只要安装 sass 就够了. 不需要任何 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.1.152',
    port: 4200,
    open: '/src/home/home.html',
    https: {
      cert: 'C:\\self-signed-certificate\\192.168.1.152.crt',
      key: 'C:\\self-signed-certificate\\192.168.1.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 这样就串起来了。

TODO

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