✨ webpack oss上传

baizeteam · Aug 1, 2024 · 952652f · 952652f
1 parent 18ad478
commit 952652f
Show file tree

Hide file tree

Showing 5 changed files with 1,290 additions and 1,722 deletions.
diff --git a/packages/vite-add-cdn-script/lib/main.ts b/packages/vite-add-cdn-script/lib/main.ts
@@ -65,7 +65,7 @@ function viteAddCdnScript(opt: IOptions): PluginOption {
       // 获取打包结果中的本地的js名字
       const inHtmlJsName = html.match(/(?<=<script.*src=(["|']))(?=[./])(.*?)\1/g);
       if (inHtmlJsName) {
-        mainJsNames = inHtmlJsName.map((item) => item.slice(0, -1));
+        mainJsNames.push(...inHtmlJsName.map((item) => item.slice(0, -1)));
       }
       // 打印控制器
       const external = _config.build?.rollupOptions?.external;

diff --git a/packages/webpack-add-cdn-script/lib/index.ts b/packages/webpack-add-cdn-script/lib/index.ts
@@ -2,8 +2,11 @@ import path from "path";
 import { Compilation, Compiler, sources } from "webpack";
 import { IOptions } from "./types";
 import { libName } from "./config";
-import { getExternalScript } from "cdn-script-core";
+import { getExternalScript, normalizePath } from "cdn-script-core";
+import * as glob from "glob";
+import fs from "node:fs";
 
+let mainJsNames: string[] = [];
 class WebpackAddCdnScript {
   constructor(private options: IOptions) {}
 
@@ -28,11 +31,17 @@ class WebpackAddCdnScript {
               callback();
               return;
             }
+
             for (const assetName in assets) {
               if (path.extname(assetName) === ".html") {
                 let source = assets[assetName].source().toString();
+                // 获取打包结果中的本地的js名字
+                const inHtmlJsName = source.match(/(?<=<script.*src=(["|']))(?=[./])(.*?)\1/g);
+                if (inHtmlJsName) {
+                  mainJsNames.push(...inHtmlJsName.map((item) => item.slice(0, -1)));
+                }
                 source = source.replace("</head>", `${script}</head>`);
-                assets[assetName] = new sources.RawSource(source);
+                assets[assetName] = new sources.RawSource(source, true);
               }
             }
 
@@ -44,6 +53,36 @@ class WebpackAddCdnScript {
         },
       );
     });
+
+    compiler.hooks.afterEmit.tapPromise(`${libName} upload`, async (compilation) => {
+      if (!compiler.options.output.path) return;
+      const outDirPath = path.resolve(normalizePath(compiler.options.output.path));
+      const files = glob.sync(outDirPath + "/**/*", {
+        nodir: true,
+        dot: true,
+        ignore: "**/*.html",
+      });
+      const upLoadRes = await Promise.all(
+        files.map(async (file) => ({
+          ossPath: await this.options.uploadFiles!(file, {}),
+          fileName: file.slice(outDirPath.length + 1),
+        })),
+      );
+      // 替换本地文件名
+      const htmlFilePath = glob.sync(outDirPath + "**/*.html", {
+        nodir: true,
+        dot: true,
+      });
+      if (htmlFilePath.length === 0) return;
+      const htmlFile = htmlFilePath[0];
+      let html = fs.readFileSync(htmlFile, "utf-8");
+      for (const mainJsName of mainJsNames) {
+        const find = upLoadRes.find((item) => mainJsName.includes(item.fileName));
+        if (!find) continue;
+        html = html.replace(mainJsName, find.ossPath);
+      }
+      fs.writeFileSync(htmlFile, html);
+    });
   }
 }
 

diff --git a/packages/webpack-add-cdn-script/lib/types.ts b/packages/webpack-add-cdn-script/lib/types.ts
@@ -18,4 +18,5 @@ export interface IOptions {
   defaultCdns?: PropertyCdn[];
 
   external: string[];
+  uploadFiles?: (filePath: string, info: {}) => string | Promise<string>;
 }
diff --git a/packages/webpack-add-cdn-script/package.json b/packages/webpack-add-cdn-script/package.json
@@ -36,6 +36,7 @@
   "devDependencies": {
     "@jest/globals": "^29.7.0",
     "@rspack/cli": "^0.7.5",
+    "@rspack/core": "^0.7.5",
     "@types/node": "^20.14.2",
     "@types/node-fetch": "2",
     "@types/react": "^18.3.2",
@@ -55,15 +56,17 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.4.5",
     "vite": "^5.2.11",
-    "@rspack/core": "^0.7.5",
     "vite-plugin-dts": "^3.9.1",
     "webpack-sources": "^3.2.3"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "cdn-script-core": "workspace:*"
+    "@types/webpack": "^5.28.5",
+    "cdn-script-core": "workspace:*",
+    "glob": "^11.0.0",
+    "webpack": "^5.93.0"
   },
   "peerDependencies": {
     "webpack": ">=5.0.0"