@cnguu/vite-plugin-uni-cdn 2.1.0 → 2.2.0

package/dist/index.cjs

@@ -2,6 +2,7 @@
 
 const fsPromises = require('node:fs/promises');
 const path = require('node:path');
+const compilerSfc = require('@vue/compiler-sfc');
 const vite = require('vite');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
@@ -10,6 +11,7 @@ const fsPromises__default = /*#__PURE__*/_interopDefaultCompat(fsPromises);
 const path__default = /*#__PURE__*/_interopDefaultCompat(path);
 
 const PLUGIN_NAME = "vite-plugin-uni-cdn";
+const POSTCSS_PLUGIN_NAME = "postcss-plugin-uni-cdn";
 const VIRTUAL_MODULE_ID = `virtual:${PLUGIN_NAME}`;
 const RESOLVED_VIRTUAL_MODULE_ID = `\0${VIRTUAL_MODULE_ID}`;
 
@@ -107,7 +109,7 @@ class Context {
     this.options = {
       cdn: "",
       sourceDir: "static/cdn",
-      include: ["**/*.{vue,css,scss,sass,less,styl}"],
+      include: ["**/*.vue"],
       exclude: ["**/node_modules/**", "**/uni_modules/**", "**/dist/**", "**/unpackage/**"],
       deleteOutputFiles: true,
       verbose: true,
@@ -138,6 +140,48 @@ class Context {
     return `${code.trim()}
 `;
   }
+  config() {
+    if (!this.cdnBasePath || !this.options.sourceDir) {
+      return;
+    }
+    const relSourceDir = vite.normalizePath(path__default.normalize(this.options.sourceDir)).replace(/^\/+/, "");
+    const staticSubPath = relSourceDir.startsWith("src/") ? relSourceDir.slice("src/".length) : relSourceDir;
+    const staticDir = `/${staticSubPath.replace(/^\/+/, "")}`;
+    const cdnBasePath = this.cdnBasePath;
+    const urlRegex = /url\(\s*(['"]?)([^'")\s]+)\1\s*\)/g;
+    return {
+      css: {
+        postcss: {
+          plugins: [
+            {
+              postcssPlugin: POSTCSS_PLUGIN_NAME,
+              Declaration: (decl) => {
+                if (!decl.value || !decl.value.startsWith("url(") || decl.value.includes("http") || decl.value.includes("data:")) {
+                  return;
+                }
+                decl.value = decl.value.replace(urlRegex, (match, quote, originalPath) => {
+                  if (originalPath.startsWith(staticDir)) {
+                    let outputFileName = this.replaceUrlCache.get(originalPath);
+                    if (!outputFileName) {
+                      let relativePath = originalPath.slice(staticDir.length);
+                      if (!relativePath.startsWith("/")) {
+                        relativePath = `/${relativePath}`;
+                      }
+                      outputFileName = `${cdnBasePath}${relativePath}`;
+                      this.replaceUrlCache.set(originalPath, outputFileName);
+                      this.logger?.pathReplace?.(originalPath, outputFileName);
+                    }
+                    return `url(${quote}${outputFileName}${quote})`;
+                  }
+                  return match;
+                });
+              }
+            }
+          ]
+        }
+      }
+    };
+  }
   async configResolved(resolvedConfig) {
     this.projectRoot = resolvedConfig.root;
     this.logger = createLogger(this.options.verbose, resolvedConfig.logger);
@@ -194,51 +238,43 @@ class Context {
     if (!this.filter(filepath)) {
       return { code };
     }
-    const transformed = this.replaceStaticToCdn(code);
-    return { code: transformed };
-  }
-  generateBundle(options, bundle) {
-    if (!this.sourceDirAbs || !this.assetDir) {
-      return;
-    }
-    for (const [fileName, chunk] of Object.entries(bundle)) {
-      if (chunk.type === "asset") {
-        if (typeof chunk.source !== "string") {
-          continue;
-        }
-        if (!/\.(?:css|js|mjs|html)$/.test(fileName)) {
-          continue;
-        }
-        const before = chunk.source;
-        chunk.source = this.replaceStaticToCdn(before);
-      } else if (chunk.type === "chunk") {
-        const before = chunk.code;
-        chunk.code = this.replaceStaticToCdn(before);
-      }
+    if (id.endsWith(".vue")) {
+      return this.processVueSfc(code);
     }
+    const transformedCode = this.replaceStaticToCdn(code);
+    return { code: transformedCode };
   }
   async closeBundle() {
     if (!this.sourceDirAbs || !this.assetDir) {
       return;
     }
     await this.uploadAliOSS();
-    this.deleteOutputFiles();
+    await this.deleteOutputFiles();
+  }
+  processVueSfc(code) {
+    let transformedCode = code;
+    try {
+      const sfc = compilerSfc.parse(code);
+      transformedCode = this.processSfcBlock(transformedCode, sfc.descriptor.template);
+      transformedCode = this.processSfcBlock(transformedCode, sfc.descriptor.scriptSetup);
+      transformedCode = this.processSfcBlock(transformedCode, sfc.descriptor.script);
+    } catch (error) {
+      this.logger.error("\u89E3\u6790 Vue SFC \u5931\u8D25", error);
+      transformedCode = this.replaceStaticToCdn(code);
+    }
+    return { code: transformedCode };
+  }
+  processSfcBlock(code, block) {
+    if (!block) {
+      return code;
+    }
+    const { content, loc } = block;
+    const transformedContent = this.replaceStaticToCdn(content);
+    return code.slice(0, loc.start.offset) + transformedContent + code.slice(loc.end.offset);
   }
   replaceStaticToCdn(code) {
-    const escapedStaticPrefix = escapeRegExp(this.assetDir);
-    let transformed = code.replace(new RegExp(
-      `url\\(\\s*(['"]?)(${escapedStaticPrefix}[^'")\\s]+)\\1\\s*\\)`,
-      "g"
-    ), (match, quote, originalPath) => {
-      try {
-        return this.codeReplaceMatch(originalPath, match, quote, true);
-      } catch (error) {
-        this.logger.error(`\u5904\u7406 CSS \u5931\u8D25`, error);
-        return match;
-      }
-    });
-    transformed = transformed.replace(new RegExp(
-      `(['"])(${escapedStaticPrefix}[^'"]*)\\1`,
+    return code.replace(new RegExp(
+      `(['"])(${escapeRegExp(this.assetDir)}[^'"]*)\\1`,
       "g"
     ), (match, quote, originalPath) => {
       try {
@@ -248,9 +284,8 @@ class Context {
         return match;
       }
     });
-    return transformed;
   }
-  codeReplaceMatch(originalPath, match, quote, css = false) {
+  codeReplaceMatch(originalPath, match, quote) {
     let outputFileName = this.replaceUrlCache.get(originalPath) || "";
     if (!outputFileName) {
       if (isInvalidOriginalPath(originalPath)) {
@@ -264,9 +299,6 @@ class Context {
       this.replaceUrlCache.set(originalPath, outputFileName);
       this.logger.pathReplace(originalPath, outputFileName);
     }
-    if (css) {
-      return `url(${quote || ""}${outputFileName}${quote || ""})`;
-    }
     return `${quote}${outputFileName}${quote}`;
   }
   async uploadAliOSS() {
@@ -331,7 +363,7 @@ class Context {
   }
 }
 
-const index = (options) => {
+function VitePluginUniCdn(options) {
   const ctx = new Context(options);
   let plugin = {
     name: PLUGIN_NAME,
@@ -352,6 +384,9 @@ const index = (options) => {
   }
   plugin = {
     ...plugin,
+    config() {
+      return ctx.config();
+    },
     async configResolved(resolvedConfig) {
       await ctx.configResolved(resolvedConfig);
     },
@@ -361,14 +396,11 @@ const index = (options) => {
     transform(code, id) {
       return ctx.transform(code, id);
     },
-    generateBundle(options2, bundle) {
-      ctx.generateBundle(options2, bundle);
-    },
     async closeBundle() {
       await ctx.closeBundle();
     }
   };
   return plugin;
-};
+}
 
-module.exports = index;
+exports.VitePluginUniCdn = VitePluginUniCdn;

package/dist/index.d.cts

@@ -47,7 +47,7 @@ interface VitePluginUniCdnOption {
 }
 type AliOSSModule = typeof AliOSS | null;
 
-declare const _default: (options?: VitePluginUniCdnOption) => Plugin;
+declare function VitePluginUniCdn(options?: VitePluginUniCdnOption): Plugin;
 
-export { _default as default };
+export { VitePluginUniCdn };
 export type { AliOSSModule, AliOSSOption, VitePluginUniCdnOption };

package/dist/index.d.mts

@@ -47,7 +47,7 @@ interface VitePluginUniCdnOption {
 }
 type AliOSSModule = typeof AliOSS | null;
 
-declare const _default: (options?: VitePluginUniCdnOption) => Plugin;
+declare function VitePluginUniCdn(options?: VitePluginUniCdnOption): Plugin;
 
-export { _default as default };
+export { VitePluginUniCdn };
 export type { AliOSSModule, AliOSSOption, VitePluginUniCdnOption };

package/dist/index.d.ts

@@ -47,7 +47,7 @@ interface VitePluginUniCdnOption {
 }
 type AliOSSModule = typeof AliOSS | null;
 
-declare const _default: (options?: VitePluginUniCdnOption) => Plugin;
+declare function VitePluginUniCdn(options?: VitePluginUniCdnOption): Plugin;
 
-export { _default as default };
+export { VitePluginUniCdn };
 export type { AliOSSModule, AliOSSOption, VitePluginUniCdnOption };

package/dist/index.mjs

@@ -1,8 +1,10 @@
 import fsPromises from 'node:fs/promises';
 import path from 'node:path';
+import { parse } from '@vue/compiler-sfc';
 import { createFilter, normalizePath } from 'vite';
 
 const PLUGIN_NAME = "vite-plugin-uni-cdn";
+const POSTCSS_PLUGIN_NAME = "postcss-plugin-uni-cdn";
 const VIRTUAL_MODULE_ID = `virtual:${PLUGIN_NAME}`;
 const RESOLVED_VIRTUAL_MODULE_ID = `\0${VIRTUAL_MODULE_ID}`;
 
@@ -100,7 +102,7 @@ class Context {
     this.options = {
       cdn: "",
       sourceDir: "static/cdn",
-      include: ["**/*.{vue,css,scss,sass,less,styl}"],
+      include: ["**/*.vue"],
       exclude: ["**/node_modules/**", "**/uni_modules/**", "**/dist/**", "**/unpackage/**"],
       deleteOutputFiles: true,
       verbose: true,
@@ -131,6 +133,48 @@ class Context {
     return `${code.trim()}
 `;
   }
+  config() {
+    if (!this.cdnBasePath || !this.options.sourceDir) {
+      return;
+    }
+    const relSourceDir = normalizePath(path.normalize(this.options.sourceDir)).replace(/^\/+/, "");
+    const staticSubPath = relSourceDir.startsWith("src/") ? relSourceDir.slice("src/".length) : relSourceDir;
+    const staticDir = `/${staticSubPath.replace(/^\/+/, "")}`;
+    const cdnBasePath = this.cdnBasePath;
+    const urlRegex = /url\(\s*(['"]?)([^'")\s]+)\1\s*\)/g;
+    return {
+      css: {
+        postcss: {
+          plugins: [
+            {
+              postcssPlugin: POSTCSS_PLUGIN_NAME,
+              Declaration: (decl) => {
+                if (!decl.value || !decl.value.startsWith("url(") || decl.value.includes("http") || decl.value.includes("data:")) {
+                  return;
+                }
+                decl.value = decl.value.replace(urlRegex, (match, quote, originalPath) => {
+                  if (originalPath.startsWith(staticDir)) {
+                    let outputFileName = this.replaceUrlCache.get(originalPath);
+                    if (!outputFileName) {
+                      let relativePath = originalPath.slice(staticDir.length);
+                      if (!relativePath.startsWith("/")) {
+                        relativePath = `/${relativePath}`;
+                      }
+                      outputFileName = `${cdnBasePath}${relativePath}`;
+                      this.replaceUrlCache.set(originalPath, outputFileName);
+                      this.logger?.pathReplace?.(originalPath, outputFileName);
+                    }
+                    return `url(${quote}${outputFileName}${quote})`;
+                  }
+                  return match;
+                });
+              }
+            }
+          ]
+        }
+      }
+    };
+  }
   async configResolved(resolvedConfig) {
     this.projectRoot = resolvedConfig.root;
     this.logger = createLogger(this.options.verbose, resolvedConfig.logger);
@@ -187,51 +231,43 @@ class Context {
     if (!this.filter(filepath)) {
       return { code };
     }
-    const transformed = this.replaceStaticToCdn(code);
-    return { code: transformed };
-  }
-  generateBundle(options, bundle) {
-    if (!this.sourceDirAbs || !this.assetDir) {
-      return;
-    }
-    for (const [fileName, chunk] of Object.entries(bundle)) {
-      if (chunk.type === "asset") {
-        if (typeof chunk.source !== "string") {
-          continue;
-        }
-        if (!/\.(?:css|js|mjs|html)$/.test(fileName)) {
-          continue;
-        }
-        const before = chunk.source;
-        chunk.source = this.replaceStaticToCdn(before);
-      } else if (chunk.type === "chunk") {
-        const before = chunk.code;
-        chunk.code = this.replaceStaticToCdn(before);
-      }
+    if (id.endsWith(".vue")) {
+      return this.processVueSfc(code);
     }
+    const transformedCode = this.replaceStaticToCdn(code);
+    return { code: transformedCode };
   }
   async closeBundle() {
     if (!this.sourceDirAbs || !this.assetDir) {
       return;
     }
     await this.uploadAliOSS();
-    this.deleteOutputFiles();
+    await this.deleteOutputFiles();
+  }
+  processVueSfc(code) {
+    let transformedCode = code;
+    try {
+      const sfc = parse(code);
+      transformedCode = this.processSfcBlock(transformedCode, sfc.descriptor.template);
+      transformedCode = this.processSfcBlock(transformedCode, sfc.descriptor.scriptSetup);
+      transformedCode = this.processSfcBlock(transformedCode, sfc.descriptor.script);
+    } catch (error) {
+      this.logger.error("\u89E3\u6790 Vue SFC \u5931\u8D25", error);
+      transformedCode = this.replaceStaticToCdn(code);
+    }
+    return { code: transformedCode };
+  }
+  processSfcBlock(code, block) {
+    if (!block) {
+      return code;
+    }
+    const { content, loc } = block;
+    const transformedContent = this.replaceStaticToCdn(content);
+    return code.slice(0, loc.start.offset) + transformedContent + code.slice(loc.end.offset);
   }
   replaceStaticToCdn(code) {
-    const escapedStaticPrefix = escapeRegExp(this.assetDir);
-    let transformed = code.replace(new RegExp(
-      `url\\(\\s*(['"]?)(${escapedStaticPrefix}[^'")\\s]+)\\1\\s*\\)`,
-      "g"
-    ), (match, quote, originalPath) => {
-      try {
-        return this.codeReplaceMatch(originalPath, match, quote, true);
-      } catch (error) {
-        this.logger.error(`\u5904\u7406 CSS \u5931\u8D25`, error);
-        return match;
-      }
-    });
-    transformed = transformed.replace(new RegExp(
-      `(['"])(${escapedStaticPrefix}[^'"]*)\\1`,
+    return code.replace(new RegExp(
+      `(['"])(${escapeRegExp(this.assetDir)}[^'"]*)\\1`,
       "g"
     ), (match, quote, originalPath) => {
       try {
@@ -241,9 +277,8 @@ class Context {
         return match;
       }
     });
-    return transformed;
   }
-  codeReplaceMatch(originalPath, match, quote, css = false) {
+  codeReplaceMatch(originalPath, match, quote) {
     let outputFileName = this.replaceUrlCache.get(originalPath) || "";
     if (!outputFileName) {
       if (isInvalidOriginalPath(originalPath)) {
@@ -257,9 +292,6 @@ class Context {
       this.replaceUrlCache.set(originalPath, outputFileName);
       this.logger.pathReplace(originalPath, outputFileName);
     }
-    if (css) {
-      return `url(${quote || ""}${outputFileName}${quote || ""})`;
-    }
     return `${quote}${outputFileName}${quote}`;
   }
   async uploadAliOSS() {
@@ -324,7 +356,7 @@ class Context {
   }
 }
 
-const index = (options) => {
+function VitePluginUniCdn(options) {
   const ctx = new Context(options);
   let plugin = {
     name: PLUGIN_NAME,
@@ -345,6 +377,9 @@ const index = (options) => {
   }
   plugin = {
     ...plugin,
+    config() {
+      return ctx.config();
+    },
     async configResolved(resolvedConfig) {
       await ctx.configResolved(resolvedConfig);
     },
@@ -354,14 +389,11 @@ const index = (options) => {
     transform(code, id) {
       return ctx.transform(code, id);
     },
-    generateBundle(options2, bundle) {
-      ctx.generateBundle(options2, bundle);
-    },
     async closeBundle() {
       await ctx.closeBundle();
     }
   };
   return plugin;
-};
+}
 
-export { index as default };
+export { VitePluginUniCdn };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cnguu/vite-plugin-uni-cdn",
   "type": "module",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Vite 插件，在 uni-app 中替换资源链接为 CDN 链接",
   "license": "MIT",
   "homepage": "https://github.com/cnguu/vite-plugin-uni-cdn",
@@ -54,6 +54,9 @@
       "optional": true
     }
   },
+  "dependencies": {
+    "@vue/compiler-sfc": "3.4.21"
+  },
   "devDependencies": {
     "@types/ali-oss": "6.16.13",
     "ali-oss": "6.23.0",