526互联

Vite Get Started

发布时间 2023-06-30 00:31:55作者: 兴杰

前言

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

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

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

 

参考 

Docs – Vite

 

Vite 介绍

简单说, Vite 可以用来替代 Webpack.

对比 Webpack. Vite 的优点是, 超级快. 配置简单.

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

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

拿 Vite 比 Webpack 其实不公平. 不是同辈. 期待未来 Turbopack 可以和 Vite 一较高下

 

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

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

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

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

 

IP Address & HTTPS

创建 vite.config.js

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    host: '192.168.1.152',
    port: 4200,
    open: '/src/home/home.html',
    https: {
      enable: true,
      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 就够了.

 

Multiple Entry Points

import path from 'path';
import { defineConfig } from 'vite';

export default defineConfig({
  worker: {
    rollupOptions: {
      input: [
        path.resolve(__dirname, './src/home/home.ts'),
        path.resolve(__dirname, './src/about/about.ts'),
      ],
    },
  },
});

Vite 底层是 rollup, multiple entry points 是通过底层 rollup config 实现的.

 

TODO

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