@yangyongtao/gaea 1.1.29 → 1.1.31

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [1.1.31] - 2026-09-09
+
+### Added
+- Vite 插件 `transformIndexHtml` 自动给外部跨域 `<script src="http(s)://...">` 补 `crossorigin="anonymous"`：解决跨域隔离（COEP: require-corp）下第三方脚本因缺少 CORP 响应头被拦截（`NotSameOriginAfterDefaultedToSameOriginByCoep`）并阻塞页面加载的问题（如 `live.dcyun.com` 的 DcVideo.js 视频库）
+- 注入前置脚本 hook `Node.prototype.appendChild/insertBefore`：第三方脚本内部 `document.createElement('script')` 动态加载的跨域子脚本自动补 `crossorigin`（DcVideo.js 内部的 jquery / DCHls / EasyWasmPlayer / ezuikit 等均可正常加载）
+- 新增 `gaeaVitePlugin({ skipExternalScripts: [...] })` 配置：构建期移除匹配的外部脚本（字符串子串或正则），用于跳过跨域隔离下无法正常工作且当前未使用的第三方脚本
+
+## [1.1.30] - 2026-09-09
+
+### Added
+- Vite 插件生产构建支持：新增 `closeBundle` 钩子，`vite build` 时自动把引擎静态资源（`Gaea.js` / `Gaea.wasm` / `Gaea.pck` / `Gaea.worker.js` / `static/` / `math/` / `image/` / `font/` / `icon/` 等）从包内 `public` 复制到输出目录（默认 `dist`，遵循 `build.outDir`）。修复此前生产包访问 `/Gaea.js` 返回 404 的问题。`configResolved` 记录输出目录；拷贝时跳过输出目录中已存在的文件，保证消费者自身 `public/` 下的资源优先。
+
 ## [1.1.29] - 2026-09-04
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yangyongtao/gaea",
-  "version": "1.1.29",
+  "version": "1.1.31",
   "description": "Gaea 3D visualization component library - Vue 3 components based on Godot WASM engine. Includes WMTS layer loading, camera view control, Vite plugin auto-injection, etc.",
   "type": "module",
   "main": "src/index.cjs",

package/src/vite-plugin.js

@@ -6,6 +6,7 @@
  * 2. 提供 /Gaea.js /Gaea.wasm /Gaea.pck 等静态文件
  * 3. 设置 COEP/COOP 头（SharedArrayBuffer 必需）
  * 4. 检测跨域隔离状态并自动刷新
+ * 5. 生产构建时把引擎静态资源复制到输出目录（closeBundle）
  *
  * 消费者用法（vite.config.js）：
  *   import { gaeaVitePlugin } from '@yangyongtao/gaea/plugin';
@@ -19,6 +20,24 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const pkgPublic = path.resolve(__dirname, '..', 'public');
 
+// 生产构建需复制的引擎静态资源：
+// - 顶层引擎文件（与注入的 <script src="/Gaea.js"> 位置保持一致，位于站点根路径）
+// - 子目录（serveLocal 指向 /static/，引擎还会访问 math/ image/ font/ icon/）
+const BUILD_TOP_FILES = [
+  'Gaea.js',
+  'Gaea.wasm',
+  'Gaea.pck',
+  'Gaea.worker.js',
+  'Gaea.audio.worklet.js',
+  'GaeaApp.html',
+  'GaeaModule.html',
+  'index.js',
+  'constants.js',
+  'jsencrypt.min.js',
+  'web-control.min.js',
+];
+const BUILD_COPY_DIRS = ['static/', 'math/', 'image/', 'font/', 'icon/'];
+
 const MIME = {
   '.wasm': 'application/wasm',
   '.pck': 'application/octet-stream',
@@ -36,11 +55,53 @@ const COEP_HEADERS = {
   'Cross-Origin-Embedder-Policy': 'require-corp',
 };
 
-export default function gaeaVitePlugin() {
+/**
+ * 给外部跨域 <script src="http(s)://..."> 自动补 crossorigin="anonymous"。
+ *
+ * 背景：Gaea 引擎要求跨域隔离（COEP: require-corp）。在 COEP 下，普通 no-cors
+ * 跨域脚本因缺少 Cross-Origin-Resource-Policy 响应头会被浏览器拦截（
+ * NotSameOriginAfterDefaultedToSameOriginByCoep），且同步脚本会挂起阻塞页面加载。
+ * 补上 crossorigin 后改为 CORS 模式加载，只要服务器返回 Access-Control-Allow-Origin
+ * 即可通过 COEP 检查。
+ */
+function addCrossOriginToExternalScripts(html) {
+  return html.replace(/<script\b([^>]*?)>/g, (match, attrs) => {
+    if (!/\bsrc="https?:\/\//.test(attrs)) return match;
+    if (/\bcrossorigin(=|[\s>])/i.test(attrs)) return match;
+    return match.replace(/^<script/, '<script crossorigin="anonymous"');
+  });
+}
+
+/**
+ * 移除 HTML 中匹配的外部 <script src="http(s)://..."> 标签。
+ * 用于跳过某些在跨域隔离（COEP）下无法正常工作、且当前项目并未使用的第三方脚本
+ * （如第三方视频播放库），避免它们拖慢首屏、产生无意义报错。
+ * @param {string} html
+ * @param {Array<string|RegExp>} rules 匹配规则：字符串按子串匹配 src，正则直接 test
+ */
+function skipExternalScriptTags(html, rules) {
+  if (!rules?.length) return html;
+  return html.replace(/<script\b([^>]*?src="(https?:\/\/[^"]+)"[^>]*)>[\s\S]*?<\/script>/g, (match, attrs, src) => {
+    const hit = rules.some((rule) => (rule instanceof RegExp ? rule.test(src) : String(src).includes(rule)));
+    return hit ? '' : match;
+  });
+}
+
+export default function gaeaVitePlugin(options = {}) {
+  const skipScripts = options.skipExternalScripts || [];
+  let resolvedOutDir = '';
+
   return {
     name: 'vite-plugin-gaea',
     enforce: 'pre',
 
+    // 记录生产构建的输出目录（closeBundle 时用于定位拷贝目标）
+    configResolved(config) {
+      resolvedOutDir = config.build?.outDir
+        ? path.resolve(config.root || process.cwd(), config.build.outDir)
+        : '';
+    },
+
     configureServer(server) {
       // COEP/COOP 头只对非 WebSocket 请求设置，避免破坏 Vite HMR
       server.middlewares.stack.unshift({
@@ -97,7 +158,53 @@ export default function gaeaVitePlugin() {
       });
     },
 
+    // 生产构建：把引擎静态资源复制到输出目录。
+    // configureServer 只在 dev 模式生效，vite build 不会运行，因此这里需自行拷贝。
+    closeBundle() {
+      const outRoot = resolvedOutDir || path.resolve(process.cwd(), 'dist');
+      if (!fs.existsSync(pkgPublic)) {
+        console.warn('[gaea] 未找到 gaea public 目录，跳过引擎资源复制:', pkgPublic);
+        return;
+      }
+
+      // 不覆盖输出目录中已存在的文件（消费者 public/ 下的资源优先）
+      const copyFile = (src, dest) => {
+        if (fs.existsSync(dest)) return;
+        fs.copyFileSync(src, dest);
+      };
+      const copyDir = (src, dest) => {
+        if (!fs.existsSync(src)) return;
+        for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
+          const s = path.join(src, entry.name);
+          const d = path.join(dest, entry.name);
+          if (entry.isDirectory()) {
+            copyDir(s, d);
+          } else if (!fs.existsSync(d)) {
+            fs.mkdirSync(path.dirname(d), { recursive: true });
+            fs.copyFileSync(s, d);
+          }
+        }
+      };
+
+      fs.mkdirSync(outRoot, { recursive: true });
+      for (const name of BUILD_TOP_FILES) {
+        const src = path.join(pkgPublic, name);
+        if (fs.existsSync(src)) copyFile(src, path.join(outRoot, name));
+      }
+      for (const dir of BUILD_COPY_DIRS) {
+        const src = path.join(pkgPublic, dir);
+        if (fs.existsSync(src)) copyDir(src, path.join(outRoot, dir));
+      }
+      console.log('[gaea] 引擎资源已复制到输出目录:', outRoot);
+    },
+
     transformIndexHtml(html) {
+      // 跳过配置中匹配的外部脚本（如项目未使用的第三方视频库）
+      html = skipExternalScriptTags(html, skipScripts);
+
+      // 外部跨域脚本自动补 crossorigin（绕过 COEP 拦截，避免阻塞页面）
+      html = addCrossOriginToExternalScripts(html);
+
       // 自动注入 Gaea.js（消费者无需在 HTML 中手动写 <script src="/Gaea.js">）
       if (!html.includes('/Gaea.js')) {
         html = html.replace(
@@ -106,10 +213,31 @@ export default function gaeaVitePlugin() {
         );
       }
 
-      // 跨域隔离检测
+      // 跨域隔离检测 + 动态跨域脚本自动补 crossorigin（必须在 body 脚本执行前注入到 head）
       html = html.replace(
         '</head>',
         `<script>
+          // 动态创建的跨域 <script> 自动补 crossorigin="anonymous"：
+          // 跨域隔离（COEP）下，第三方脚本内部 document.createElement('script') 动态加载的子脚本
+          // 若不带 crossorigin 会被拦截（NotSameOriginAfterDefaultedToSameOriginByCoep）并阻塞页面。
+          (function () {
+            if (!window.crossOriginIsolated) return;
+            function fix(el) {
+              if (el && el.tagName === 'SCRIPT' && el.src && !el.crossOrigin) {
+                try {
+                  if (new URL(el.src, location.href).origin !== location.origin) {
+                    el.crossOrigin = 'anonymous';
+                  }
+                } catch (e) {}
+              }
+            }
+            var oa = Node.prototype.appendChild;
+            var oi = Node.prototype.insertBefore;
+            Node.prototype.appendChild = function (el) { fix(el); return oa.call(this, el); };
+            Node.prototype.insertBefore = function (el, ref) { fix(el); return oi.call(this, el, ref); };
+          })();
+        </script>
+        <script>
           if (!window.crossOriginIsolated) {
             if (!location.search.includes('gaea_isolated=1')) {
               location.replace(location.href.split('?')[0] + '?gaea_isolated=1');