Vite
vite是vue团队开发的前端工具链。
- dev模式，使用的是
esbuild构建 - build的时候，使用的是
rollup进行打包构建
安装
vite配置文件设置
在vite.config.ts的build中配置target: "modules"，设置为库文件打包模式
编译vue
vite编译vue非常简单，直接安装，引入@vitejs/plugin-vue即可
...
import vue from "@vitejs/plugin-vue";
...
export default defineConfig({
plugins: [vue()]
})
打包scss
配置文件
代码
/// <reference types="vitest" />
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import dts from "vite-plugin-dts";
// https://vitejs.dev/config/
export default defineConfig({
build: {
target: "modules",
//打包文件目录
outDir: "es",
//压缩
minify: false,
lib: {
entry: "src/index.ts",
formats: ["es", "cjs"],
},
rollupOptions: {
input: ["src/index.ts"],
//忽略打包vue文件
external: ["vue"],
output: [
{
format: "es",
//不用打包成.es.js,这里我们想把它打包成.js
entryFileNames: "[name].js",
//让打包目录和我们目录对应
preserveModules: true,
//配置打包根目录
dir: "es",
preserveModulesRoot: "src",
},
{
format: "cjs",
entryFileNames: "[name].js",
//让打包目录和我们目录对应
preserveModules: true,
//配置打包根目录
dir: "lib",
preserveModulesRoot: "src",
},
],
},
},
plugins: [
vue(),
dts({
tsConfigFilePath: "./tsconfig.json",
}),
dts({
outputDir: "lib",
tsConfigFilePath: "./tsconfig.json",
}),
],
test: {
globals: true,
environment: "jsdom",
},
});