rollup负责模块化打包
gulp负责任务调度和自动化
1mkdir build
2
3pnpm init
4
5pnpm install -D @vitejs/plugin-vue @rollup/plugin-node-resolve rollup-plugin-esbuild @rollup/plugin-commonjsUMD#
1const outputPkgDir = "suit-ui";
2
3import { fileURLToPath } from "node:url";
4import { resolve, dirname } from "node:path";
5export const filePath = fileURLToPath(import.meta.url);
6export const dirName = dirname(filePath);
7export const rootDir = resolve(dirName, "..", "..");
8export const pkgRoot = resolve(rootDir, "packages");
9export const outputDir = resolve(rootDir, outputPkgDir);
10export const outputEsm = resolve(rootDir, outputPkgDir, "es");
11export const outputCjs = resolve(rootDir, outputPkgDir, "lib");
12export const outputUmd = resolve(rootDir, outputPkgDir, "dist");1import { rollup } from "rollup";
2import { nodeResolve } from "@rollup/plugin-node-resolve";
3import vue from "@vitejs/plugin-vue";
4import esbuild from "rollup-plugin-esbuild";
5import {resolve} from "node:path";
6import { pkgRoot, outputUmd } from "./common.js";
7// umd打包
8const umdBuildEntry = async () => {
9 const writeBundles = await rollup({
10 input: resolve(pkgRoot, "index.ts"),
11 plugins: [vue(), nodeResolve({
12 extensions: [".ts"]
13 }), esbuild()],
14 external: ["vue"],
15 });
16 writeBundles.write({
17 format: "umd",
18 file: resolve(outputUmd, "index.full.js"),
19 name: "SuitUI",
20 globals: {
21 vue: "Vue"
22 }
23 });
24};
25umdBuildEntry()1node ./build/src/umdBuild.js:::
测试UMD打包文件#
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Document</title>
7 <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.4.15/vue.global.js"></script>
8 <script src="../suit-ui/dist/index.full.js"></script>
9 </head>
10 <body>
11 <div id="app">
12 <suit-button type="primary">{{message}}</suit-button>
13 </div>
14 <script>
15 const { createApp, ref } = Vue;
16 const App = {
17 setup() {
18 const message = ref("浏览器引用组件库包");
19 return {
20 message,
21 };
22 },
23 };
24 const app = createApp(App);
25 app.use(SuitUI);
26 app.mount("#app");
27 </script>
28 </body>
29</html>ESM、CJS模块化打包#
1pnpm install -D fast-glob rollup-plugin-postcss
2
3node ./build/src/moduleBuild.js1import glob from "fast-glob";
2import { nodeResolve } from "@rollup/plugin-node-resolve";
3import postcss from "rollup-plugin-postcss"
4import { rollup } from "rollup";
5import vue from "@vitejs/plugin-vue";
6import esbuild from "rollup-plugin-esbuild";
7
8import { outputPkgDir, pkgRoot, outputEsm, outputCjs } from "./common.js";
9
10const compileStyleEntry = () => {
11 const themeEntryPrefix = `@suit-ui/theme/src/`;
12 return {
13 name: "compile-style-entry",
14 resolveId(id) {
15 if (!id.startsWith(themeEntryPrefix)) return;
16 return {
17 id: id.replaceAll(themeEntryPrefix, `${outputPkgDir}/theme/src/`),
18 external: "absolute",
19 };
20 },
21 };
22};
23
24export const moduleBuildEntry = async () => {
25 const input = await glob("**/*.{js,ts,vue}", {
26 cwd: pkgRoot,
27 absolute: true,
28 onlyFiles: true,
29 });
30 const writeBundles = await rollup({
31 input,
32 plugins: [
33 compileStyleEntry(),
34 vue(),
35 nodeResolve({
36 extensions: [".ts"],
37 }),
38 esbuild(),
39 postcss({
40 pextract: true,
41 }),
42 ],
43 external: ["vue", "@vue/shared", "async-validator"],
44 });
45
46 // 多种输出格式
47 writeBundles.write({
48 format: "esm",
49 dir: outputEsm,
50 preserveModules: true,
51 entryFileNames: "[name].mjs",
52 sourcemap: true
53 })
54 writeBundles.write({
55 format: "cjs",
56 dir: outputCjs,
57 preserveModules: true,
58 entryFileNames: "[name].cjs",
59 sourcemap: true
60 })
61};
62moduleBuildEntry()目录