工具 – Vite
前言
一直想 try Vite, 但一直没有机会。
今天突然 Live Server IP Address 手机连不上...也不知道是 Bug 还是怎么回事儿。
总之 IIS IP Address 没有问题. 那多半是 Live Server 有鬼. 借此机会把它给换了呗。
参考
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
目前只用到上面几个功能, 以后有其它的再补上呗.