fix: localImportMap not works (#1242)

Author: chilingling

.gitignore

@@ -6,6 +6,7 @@ yarn.lock
 pnpm-lock.yaml
 lerna-debug.log
 packages/design-core/bundle-deps
+designer-demo/bundle-deps
 
 # local env files
 .env.local

designer-demo/env/.env.alpha

@@ -1,12 +1,9 @@
 # alpha mode, used by the "build:alpha" script
 
 NODE_ENV=production
-# VITE_CDN_DOMAIN=https://unpkg.com
 VITE_CDN_DOMAIN=https://registry.npmmirror.com
 # 使用npmmirror的cdn 时，需要声明 VITE_CDN_TYPE=npmmirror
 VITE_CDN_TYPE=npmmirror
-VITE_LOCAL_IMPORT_MAPS=false
-VITE_LOCAL_BUNDLE_DEPS=false
 # VITE_ORIGIN=
 
 # 错误监控上报 url

designer-demo/env/.env.development

@@ -1,11 +1,8 @@
 # development mode, used by the "vite" command
 
 NODE_ENV=development
-# VITE_CDN_DOMAIN=https://unpkg.com
 VITE_CDN_DOMAIN=https://registry.npmmirror.com
 # 使用npmmirror的cdn 时，需要声明 VITE_CDN_TYPE=npmmirror
 VITE_CDN_TYPE=npmmirror
-VITE_LOCAL_IMPORT_MAPS=false
-VITE_LOCAL_BUNDLE_DEPS=false
 # request data via alpha service
 # VITE_ORIGIN=

designer-demo/env/.env.localCDN.example

@@ -0,0 +1,10 @@
+# CDN 本地化配置示例
+
+# 将画布、页面预览需要的 vue、vue-i18n 等等依赖复制到构建产物中
+VITE_LOCAL_IMPORT_MAPS=true
+
+# 将本地物料 bundle.json 的 script 和 css 复制到构建产物中
+VITE_LOCAL_BUNDLE_DEPS=true
+
+# 将 VITE_LOCAL_BUNDLE_DEPS 复制到构建产物中的目录名称，默认为 local-cdn-static
+VITE_LOCAL_IMPORT_PATH=local-cdn-static

designer-demo/env/.env.production

@@ -5,6 +5,4 @@ NODE_ENV=production
 VITE_CDN_DOMAIN=https://registry.npmmirror.com
 # 使用npmmirror的cdn 时，需要声明 VITE_CDN_TYPE=npmmirror
 VITE_CDN_TYPE=npmmirror
-VITE_LOCAL_IMPORT_MAPS=false
-VITE_LOCAL_BUNDLE_DEPS=false
 #VITE_ORIGIN=

designer-demo/package.json

@@ -5,8 +5,10 @@
   "type": "module",
   "scripts": {
     "dev": "cross-env vite",
-    "build:alpha": "cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build --mode alpha",
-    "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build"
+    "build:alpha": "cross-env NODE_OPTIONS=--max-old-space-size=10240 vite build --mode alpha",
+    "build": "cross-env NODE_OPTIONS=--max-old-space-size=10240 vite build",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@opentiny/tiny-engine": "workspace:^",
@@ -25,6 +27,7 @@
     "@opentiny/tiny-engine-vite-config": "workspace:^",
     "@vitejs/plugin-vue": "^5.1.2",
     "cross-env": "^7.0.3",
-    "vite": "^5.4.2"
+    "vite": "^5.4.2",
+    "vitest": "3.0.9"
   }
 }

designer-demo/public/mock/bundle.json

@@ -10166,7 +10166,8 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "TinyGridColumn"
+            "exportName": "TinyGridColumn",
+            "destructuring": true
           },
           "group": "component",
           "priority": 2,

designer-demo/tests/localCdnBasic.test.js

@@ -0,0 +1,74 @@
+/**
+ * localCDN 功能测试
+ * 这个测试文件用于验证 localCDN 本地化功能是否正常工作
+ */
+import { describe, it, expect, beforeAll, afterAll } from 'vitest'
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { execSync } from 'node:child_process'
+import { ensureEnvVarEnabled, backupEnvFile, restoreEnvFile } from './utils/envHelpers.js'
+
+// 获取当前文件目录
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const projectRoot = path.resolve(__dirname, '..')
+const distDir = path.resolve(projectRoot, 'dist')
+const localCdnDir = path.resolve(distDir, 'local-cdn-static')
+const envAlphaPath = path.resolve(projectRoot, 'env', '.env.alpha')
+
+describe('localCDN 功能测试', () => {
+  beforeAll(() => {
+    // 备份环境变量文件
+    backupEnvFile(envAlphaPath)
+    
+    // 确保环境变量正确设置
+    let envContent = fs.readFileSync(envAlphaPath, 'utf-8')
+    
+    // 确保关键环境变量已启用
+    envContent = ensureEnvVarEnabled(envContent, 'VITE_LOCAL_IMPORT_MAPS')
+    envContent = ensureEnvVarEnabled(envContent, 'VITE_LOCAL_BUNDLE_DEPS')
+    envContent = ensureEnvVarEnabled(envContent, 'VITE_LOCAL_IMPORT_PATH', 'local-cdn-static')
+    
+    // 写回更新后的环境变量
+    fs.writeFileSync(envAlphaPath, envContent)
+    
+    // 执行构建
+    execSync('pnpm run build:alpha', { 
+      cwd: projectRoot, 
+      stdio: 'inherit'
+    })
+  })
+  
+  // 测试结束后恢复原始环境变量
+  afterAll(() => {
+    restoreEnvFile(envAlphaPath)
+  })
+  
+  it('应该在构建后生成 local-cdn-static 目录', () => {
+    expect(fs.existsSync(localCdnDir)).toBe(true)
+  })
+  
+  it('应该正确复制 @vue/devtools-api 依赖', () => {
+    // 寻找 @vue/devtools-api 文件夹
+    const devToolsDirs = fs.readdirSync(path.resolve(localCdnDir, '@vue'))
+      .find(dir => dir.startsWith('devtools-api@'))
+    
+    expect(devToolsDirs).toBeDefined()
+    
+    // 检查 index.js 是否存在
+    const indexJsExists = fs.existsSync(path.resolve(localCdnDir, '@vue', devToolsDirs, 'lib/esm/index.js'))
+    
+    expect(indexJsExists).toBe(true)
+  })
+  
+  it('应该正确复制 vue 依赖', () => {
+    // 寻找 vue 文件夹
+    const runtimeDirs = fs.readdirSync(localCdnDir).find(dir => dir.startsWith('vue@'))
+
+    expect(runtimeDirs).toBeDefined()
+    
+    const vueProdDist = path.resolve(localCdnDir, runtimeDirs, 'dist/vue.runtime.esm-browser.js')
+    
+    expect(fs.existsSync(vueProdDist)).toBe(true)
+  })
+}) 

designer-demo/tests/localCdnBundleDeps.test.js

@@ -0,0 +1,140 @@
+/**
+ * localCDN bundle依赖本地化测试
+ * 测试物料需要的CDN资源本地化功能
+ */
+import { describe, it, expect, beforeAll, afterAll } from 'vitest'
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { execSync } from 'node:child_process'
+import { ensureEnvVarEnabled, updateCdnDomain, backupEnvFile, restoreEnvFile } from './utils/envHelpers.js'
+
+// 获取当前文件目录
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const projectRoot = path.resolve(__dirname, '..')
+const publicDir = path.resolve(projectRoot, 'public')
+const bundleJsonDir = path.resolve(publicDir, 'mock')
+const envAlphaPath = path.resolve(projectRoot, 'env', '.env.alpha')
+const distDir = path.resolve(projectRoot, 'dist')
+const bundleJsonPath = path.resolve(bundleJsonDir, 'bundle.json')
+
+// 准备测试用的 bundle.json 文件
+const testBundleJson = {
+  data: {
+    materials: {
+      packages: [
+        {
+          "name": "TinyVue组件库",
+          "package": "@opentiny/vue",
+          "version": "3.20.0",
+          "script": "https://unpkg.com/@opentiny/[email protected]/dist3/tiny-vue-pc.mjs",
+          "css": "https://unpkg.com/@opentiny/[email protected]/index.css"
+        },
+        {
+          "name": "element-plus组件库",
+          "package": "element-plus",
+          "version": "2.4.2",
+          "script": "https://registry.npmmirror.com/element-plus/2.4.2/files/dist/index.full.mjs",
+          "css": "https://registry.npmmirror.com/element-plus/2.4.2/files/dist/index.css"
+        }
+      ]
+    }
+  }
+}
+
+describe('localCDN bundle依赖本地化测试', () => {
+  let originalBundleJson = null
+
+  beforeAll(() => {
+    // 备份环境变量
+    backupEnvFile(envAlphaPath)
+    
+    // 确保目录存在
+    if (!fs.existsSync(bundleJsonDir)) {
+      fs.mkdirSync(bundleJsonDir, { recursive: true })
+    }
+    
+    // 备份原始的 bundle.json 文件（如果存在）
+    if (fs.existsSync(bundleJsonPath)) {
+      originalBundleJson = fs.readFileSync(bundleJsonPath, 'utf-8')
+    }
+    
+    // 创建测试用的 bundle.json
+    fs.writeFileSync(bundleJsonPath, JSON.stringify(testBundleJson, null, 2))
+    
+    // 设置环境变量
+    let envContent = fs.readFileSync(envAlphaPath, 'utf-8')
+    
+    // 更新CDN域名
+    envContent = updateCdnDomain(envContent, 'https://unpkg.com')
+    
+    // 确保启用了 bundle 依赖本地化
+    envContent = ensureEnvVarEnabled(envContent, 'VITE_LOCAL_BUNDLE_DEPS')
+    
+    fs.writeFileSync(envAlphaPath, envContent)
+    
+    // 执行构建
+    execSync('pnpm run build:alpha', { 
+      cwd: projectRoot, 
+      stdio: 'inherit'
+    })
+  })
+  
+  // 测试完成后清理测试文件并恢复环境变量
+  afterAll(() => {
+    // 恢复原始的 bundle.json 文件
+    if (originalBundleJson) {
+      fs.writeFileSync(bundleJsonPath, originalBundleJson)
+    } else if (fs.existsSync(bundleJsonPath)) {
+      // 如果原始文件不存在，则删除测试创建的文件
+      fs.unlinkSync(bundleJsonPath)
+    }
+    
+    // 恢复环境变量
+    restoreEnvFile(envAlphaPath)
+  })
+  
+  it('应该将物料CDN依赖本地化', () => {
+    const distBundleJsonPath = path.resolve(distDir, 'mock', 'bundle.json')
+    
+    // 检查构建后的 bundle.json 是否存在
+    expect(fs.existsSync(distBundleJsonPath)).toBe(true)
+    
+    // 检查构建后的 bundle.json 中是否已将远程URL替换为本地路径
+    const packages = JSON.parse(fs.readFileSync(distBundleJsonPath, 'utf-8')).data.materials.packages
+    
+    // 检查 vue 的路径是否已本地化
+    expect(packages[0].script).not.toContain('https://unpkg.com')
+    expect(packages[0].script).toContain('./material-static/')
+    
+    // 检查 element-plus 的路径是否已本地化
+    expect(packages[1].script).toContain('https://registry.npmmirror.com')
+    expect(packages[1].script).not.toContain('./material-static/')
+    expect(packages[1].css).toContain('https://registry.npmmirror.com')
+    expect(packages[1].css).not.toContain('./material-static/')
+  })
+  
+  it('应该将物料依赖包复制到产物CDN目录', () => {
+    const localCdnDir = path.resolve(distDir, 'material-static/@opentiny')
+    
+    // 检查 vue 是否已复制
+    const tinyVueDir = fs.readdirSync(localCdnDir)
+      .find(dir => dir.startsWith('vue-runtime@'))
+    const tinyVueThemeDir = fs.readdirSync(localCdnDir)
+      .find(dir => dir.startsWith('vue-theme@'))
+    expect(tinyVueDir).toBeDefined()
+    
+    // 检查 tiny-vue-pc.mjs 是否存在
+    const tinyVueJsPath = path.resolve(localCdnDir, tinyVueDir, 'dist3', 'tiny-vue-pc.mjs')
+    const tinyVueCssPath = path.resolve(localCdnDir, tinyVueThemeDir, 'index.css')
+
+    expect(fs.existsSync(tinyVueJsPath)).toBe(true)
+    expect(fs.existsSync(tinyVueCssPath)).toBe(true)
+    
+    // 检查 element-plus 是否已复制
+    const elementDir = fs.readdirSync(localCdnDir)
+      .find(dir => dir.startsWith('element-plus@'))
+
+    expect(elementDir).not.toBeDefined()
+  })
+})