实践 Vue3 组件库-如何实现样式打包与按需引入(打包篇二)

// packages/vlib-ui/scripts/build/task/build-style.ts
import { dest, src } from "gulp";
import path from "path";
import dartSass from "sass";
import gulpSass from "gulp-sass";
import autoprefixer from "gulp-autoprefixer";
import cleanCSS from "gulp-clean-css";
import { rollup } from "rollup";
import esbuild from "rollup-plugin-esbuild";
import glob from "fast-glob";
import { compRoot, output, outputEsm, outputCjs } from "../utils/paths";
import { generatePaths } from "../utils/rollup";

export const buildStyle = async () => {
  await Promise.all([]);
};

// packages/vlib-ui/scripts/build/index.ts
import { series, parallel } from "gulp";
import { clean, buildModules, buildFull, buildStyle, generateTypes } from "./task";

export default series(clean, parallel(buildModules, buildFull, buildStyle, generateTypes));

// packages/vlib-ui/scripts/build/task/build-style.ts
/**
 * [src/*.scss] to [es/*.scss, lib/*.scss]
 */
const buildScssCopy = async () => {
  await new Promise((resolve) => {
    src(`${compRoot}/**/*.scss`)
      .pipe(dest(outputEsm)) // es
      .pipe(dest(outputCjs)) // lib
      .on("end", resolve); // 监听流完成
  });
};

// packages/vlib-ui/scripts/build/task/build-style.ts
export const buildStyle = async () => {
  await Promise.all([buildScssCopy()]);
};

// packages/vlib-ui/scripts/build/task/build-style.ts
/**
 * [src/**\/style/*.scss] to [es/**\/style/*.css, lib/**\/style/*.css]
 */
const buildScssModules = async () => {
  const sass = gulpSass(dartSass);
  await new Promise((resolve) => {
    src(`${compRoot}/**/style/*.scss`)
      .pipe(sass.sync()) // 编译
      .pipe(autoprefixer({ cascade: false })) // 兼容
      .pipe(cleanCSS()) // 压缩
      .pipe(dest(outputEsm)) // es
      .pipe(dest(outputCjs)) // lib
      .on("end", resolve); // 监听流完成
  });
};

// packages/vlib-ui/scripts/build/task/build-style.ts
/**
 * [src/*.scss] to [dist/*.css]
 */
const buildScssFull = async () => {
  const sass = gulpSass(dartSass);
  await new Promise((resolve) => {
    src(`${compRoot}/*.scss`)
      .pipe(sass.sync()) // 编译
      .pipe(autoprefixer({ cascade: false })) // 兼容
      .pipe(cleanCSS()) // 压缩
      .pipe(dest(output)) // dist
      .on("end", resolve); // 监听流完成
  });
};

// packages/vlib-ui/src/back-top/style/index.ts
import "./index.css";
import "vant/es/button/style/index";

// packages/vlib-ui/src/back-top/style/scss.ts
import "./index.scss";
import "vant/es/button/style/index";

// packages/vlib-ui/scripts/build/task/build-style.ts
/**
 * [src/**\/style/*.ts] to [es/**\/style/*.js, lib/**\/style/*.js]
 */
const buildStyleModules = async () => {
  const input = [
    // style
    ...(await glob(`${compRoot}/**/style/*.ts`)),
  ];

  const bundle = await rollup({
    input,
    plugins: [
      esbuild({
        sourceMap: true,
      }),
    ],
    external: [/./],
    treeshake: false,
  });

  await Promise.all([
    bundle.write({
      format: "esm",
      dir: outputEsm,
      exports: undefined,
      preserveModules: true,
      preserveModulesRoot: "src",
      sourcemap: true,
      entryFileNames: `[name].mjs`,
    }),
    bundle.write({
      format: "cjs",
      dir: outputCjs,
      exports: "named",
      preserveModules: true,
      preserveModulesRoot: "src",
      sourcemap: true,
      entryFileNames: `[name].js`,
      paths: generatePaths(),
    }),
  ]);
};

import type { ComponentResolver, SideEffectsInfo } from "unplugin-vue-components/types";
import { kebabCase } from "unplugin-vue-components";

// 判断是不是服务端渲染
const isSSR = Boolean(
  process.env.SSR || process.env.SSG || process.env.VITE_SSR || process.env.VITE_SSG
);

// 服务端渲染使用 cjs 模块，反之使用 esm 模块
const moduleType = isSSR ? "lib" : "es";

// 解析器的参数配置
export interface VlibResolverOptions {
  // 执行加载 css 还是 scss，默认加载 css
  importStyle?: boolean | "css" | "scss";
}

// 获取到副作用
function getSideEffects(
  dirName: string,
  options: VlibResolverOptions
): SideEffectsInfo | undefined {
  // 是否加载
  const { importStyle = true } = options;
  if (!importStyle || isSSR) return;

  // 获取到副作用的路径
  if (importStyle === "scss") {
    return `@bfehub/vlib-ui/${moduleType}/${dirName}/style/scss`;
  } else {
    return `@bfehub/vlib-ui/${moduleType}/${dirName}/style/index`;
  }
}

export function VlibResolver(options: VlibResolverOptions = {}): ComponentResolver {
  return {
    type: "component", // 组件类型
    resolve: (name: string) => {
      // 判断解析的组件名称是不是当前组件库的
      if (name.startsWith("Vlib")) {
        // 获取到组件名称
        const partialName = name.slice(4);
        return {
          // 组件名称
          name: partialName,
          // 从哪个路径导入，es/lib
          from: `@bfehub/vlib-ui/${moduleType}`,
          // 根据组件名称获取到对应的 css 导入路径。BackTop => es/back-top/style/index
          sideEffects: getSideEffects(kebabCase(partialName), options),
        };
      }
    },
  };
}

// packages/vlib-ui/scripts/build/task/build-style.ts
const buildStyleModules = async () => {
  const input = [
    // style
    ...(await glob(`${compRoot}/**/style/*.ts`)),
    // resolver
    path.resolve(compRoot, "resolver.ts"),
  ];
};

// examples/vite.config.ts
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import { VantResolver } from "unplugin-vue-components/resolvers";
import { VlibResolver } from "@bfehub/vlib-ui/lib/resolver";

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        // vant
        VantResolver(),
        // vlib
        VlibResolver(),
      ],
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

// examples/src/main.ts
import { createApp } from "vue";

// 全部引入测试
// import VantUI from 'vant'
// import VlibUI from '@bfehub/vlib-ui'
// import App from './App.vue'
// import 'vant/lib/index.css'
// import '@bfehub/vlib-ui/dist/index.css'
// const app = createApp(App)
// app.use(VantUI)
// app.use(VlibUI)
// app.mount('#app')

// 自动按需引入测试
import App from "./App.vue";
const app = createApp(App);
app.mount("#app");