build: 公共依赖cdn解耦并增加开关控制

.gitignore

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

packages/design-core/canvas.html

@@ -4,7 +4,6 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link href="%VITE_CDN_DOMAIN%/@opentiny/[email protected]/index.css" rel="stylesheet" />
     <style type="text/css">
       .loading-warp {
         display: flex;

packages/design-core/package.json

@@ -118,9 +118,11 @@
     "rollup-plugin-polyfill-node": "^0.12.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-visualizer": "^5.8.3",
+    "shelljs": "^0.8.5",
     "svg-sprite-loader": "^6.0.11",
     "vite": "^4.3.7",
-    "vite-plugin-monaco-editor": "^1.0.10",
+    "vite-plugin-monaco-editor": "^1.1.0",
+    "vite-plugin-static-copy": "^0.16.0",
     "vite-plugin-svg-icons": "^2.0.1",
     "vue-eslint-parser": "^8.0.1"
   },

packages/design-core/scripts/copyBundleDeps.js

@@ -0,0 +1,172 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import shelljs from 'shelljs'
+import { viteStaticCopy } from 'vite-plugin-static-copy'
+
+export function readJsonFile(filename) {
+  const filepath = path.resolve(filename)
+  const content = fs.readFileSync(filepath, { encoding: 'utf-8' })
+  const json = JSON.parse(content)
+  return json
+}
+export function extraBundleCdnLink(filename, originCdnPrefix) {
+  const result = []
+  const bundle = readJsonFile(filename)
+  bundle.data?.materials?.components?.forEach((component) => {
+    if (component.npm) {
+      const possibleUrl = [component.npm.script, component.npm.css]
+      possibleUrl.forEach((url) => {
+        if (url?.startsWith(originCdnPrefix)) {
+          result.push(url)
+        }
+      })
+    }
+  })
+  return result.reduce((acc, cur) => {
+    if (!acc.includes(cur)) {
+      acc.push(cur)
+    }
+    return acc
+  }, [])
+}
+
+export function replaceBundleCdnLink(bundle, fileMap) {
+  bundle.data?.materials?.components?.forEach((component) => {
+    if (component.npm) {
+      const possibleUrl = ['script', 'css']
+      possibleUrl.forEach((key) => {
+        const matchRule = fileMap.find((rule) => component.npm[key] === rule.originUrl)
+        if (matchRule) {
+          component.npm[key] = matchRule.newUrl
+        }
+      })
+    }
+  })
+}
+
+export function installPackageTemporary(packageNeedToInstall, tempDir, logger = console) {
+  return [
+    {
+      name: 'vite-plugin-install-package-temporary',
+      buildStart() {
+        if (packageNeedToInstall.some((pkg) => !pkg.exist)) {
+          let code = shelljs.mkdir('-p', tempDir).code
+          code ||
+            fs.writeFileSync(
+              path.resolve(tempDir, 'package.json'),
+              JSON.stringify(
+                {
+                  name: 'bundle-deps',
+                  dependencies: packageNeedToInstall.reduce((acc, cur) => {
+                    acc[cur.packageName] = cur.version
+                    return acc
+                  }, {})
+                },
+                null,
+                2
+              ),
+              { encoding: 'utf-8' }
+            )
+          code = code || shelljs.cd(tempDir).code || shelljs.exec(`npm install`).code || shelljs.cd('../').code
+
+          if (code !== 0) {
+            logger.warn(`[vite-plugin-install-package-temporary]: bundle dependencies package install failed`)
+          } else {
+            logger.info(
+              `[vite-plugin-install-package-temporary]: bundle dependencies package install success, total ${packageNeedToInstall.length} package(s)`
+            )
+          }
+        } else {
+          logger.info(`[vite-plugin-install-package-temporary]: bundle dependencies packages exist, skip install `)
+        }
+      }
+    }
+  ]
+}
+
+export function CopyBundleDeps(
+  bundleFile,
+  targetBundleFile,
+  originCdnPrefix,
+  base,
+  dir,
+  bundleTempDir = 'bundle-deps'
+) {
+  const files = extraBundleCdnLink(bundleFile, originCdnPrefix).map((url) => {
+    const relativeUrl = url.replace(new RegExp('^' + originCdnPrefix + '/?'), '')
+    const packageName = relativeUrl.match(/^(.+?)@/)[1]
+    let version = relativeUrl.match(new RegExp('^' + packageName + '@([^/]+)'))[1]
+    const baseSlash = base.endsWith('/') ? '' : '/'
+    const filePathInPackage = `${relativeUrl.replace(new RegExp('^' + packageName + '@' + version), '')}`
+    let src = `node_modules/${packageName}${filePathInPackage}`
+    const sourceExist = fs.existsSync(path.resolve(src))
+    let sourceExistExternal = false
+    if (sourceExist) {
+      const content = readJsonFile(`node_modules/${packageName}/package.json`)
+      version = content.version
+    } else {
+      src = bundleTempDir + '/' + src
+      sourceExistExternal = fs.existsSync(path.resolve(src)) // 安装过的不重新安装
+    }
+    const newRelativeUrl = `${packageName}@${version}${filePathInPackage}`
+    return {
+      originUrl: url,
+      newUrl: `${base}${baseSlash}${dir}/${newRelativeUrl}`,
+      src,
+      dest: `${dir}/${newRelativeUrl}`.replace(/\/([^/]*?)$/, ''),
+      packageName,
+      version,
+      sourceExist,
+      sourceExistExternal,
+      transform: null // 物料的依赖目前暂定是需要mjs，暂不考虑相对链接问题
+    }
+  })
+
+  const packageNeedToInstall = files
+    .filter((item) => !item.sourceExist)
+    .map(({ packageName, version, sourceExistExternal: exist }) => ({ packageName, version, exist }))
+    .reduce((acc, cur) => {
+      if (!acc.some(({ packageName }) => cur.packageName === packageName)) {
+        acc.push(cur)
+      }
+      return acc
+    }, [])
+
+  if (packageNeedToInstall.length) {
+    files.forEach((file) => {
+      const samePackage = packageNeedToInstall.find(({ packageName }) => packageName === file.packageName)
+      if (samePackage) {
+        file.version = samePackage.version
+      }
+    })
+  }
+
+  const plugin = () => {
+    return [
+      ...installPackageTemporary(packageNeedToInstall, bundleTempDir),
+      ...viteStaticCopy({
+        targets: [
+          ...files.map(({ src, dest, transform }) => ({
+            src,
+            dest,
+            transform
+          })),
+          {
+            src: bundleFile,
+            dest: path.dirname(targetBundleFile),
+            transform: (content) => {
+              const json = JSON.parse(content)
+              replaceBundleCdnLink(json, files)
+              return JSON.stringify(json, null, 2)
+            },
+            rename: path.basename(targetBundleFile),
+            overwrite: true // 覆盖public的
+          }
+        ]
+      })
+    ]
+  }
+  return {
+    plugin
+  }
+}

packages/design-core/scripts/copyExternal.js

@@ -0,0 +1,77 @@
+import path from 'node:path'
+import fg from 'fast-glob'
+import { normalizePath } from 'vite'
+import { viteStaticCopy } from 'vite-plugin-static-copy'
+import { babelReplaceImportPathWithCertainFIleName } from './replaceImportPath.mjs'
+
+export const useLocalImportMap = (flag, publicPath = '', dir = 'import-map-static') => {
+  if (!flag) {
+    return {
+      cdnPrefix: null,
+      distDir: null,
+      versionPlaceholder: null,
+      copyImportMapFilePlugin: (_) => null
+    }
+  }
+  const cdnPrefix = publicPath + (!publicPath || publicPath.endsWith('/') ? '' : '/') + dir
+  const versionPlaceholder = 'workspace'
+  const copyImportMapFilePlugin = (imports, packageCopy) => {
+    const files = Object.entries(imports).map(([libKey, libPath]) => {
+      const reg = new RegExp('^' + cdnPrefix + '/' + '(.*?)' + '@' + versionPlaceholder + '(.*?)$')
+      const packageName = libPath.match(reg)[1]
+      if (packageCopy.includes(libKey)) {
+        const srcPath = `node_modules/${packageName}`
+        const distFullPath = `${dir}/${packageName}@${versionPlaceholder}`
+        const distPath = path.dirname(distFullPath)
+        const packageDirName = path.basename(distFullPath)
+        const rename = (_filename, _fileExtension, fullPath) => {
+          return packageDirName + '/' + fullPath.replace(srcPath, '')
+        }
+        const transform = (content, filename) => {
+          if (filename.endsWith('.js')) {
+            const result = babelReplaceImportPathWithCertainFIleName(content, filename, console)
+            return result.code || content
+          }
+          return content
+        }
+        const onlyFiles = (globString) =>
+          fg.sync(globString + '/**/*', { onlyFiles: true }).map((p) => normalizePath(p)) // viteStaticCopy 自带的glob匹配无法过滤目录， 手动过滤目录作为数组传入
+        return [libKey, libPath, onlyFiles(srcPath), distPath, rename, transform]
+      }
+      const pathnameInPackage = libPath.match(reg)[2]
+      const srcPath = `node_modules/${packageName}${pathnameInPackage}`.replace(/\/$/, '')
+      const distPath = path.dirname(
+        `${dir}/${packageName}@${versionPlaceholder}${pathnameInPackage}`.replace(/\/$/, '')
+      )
+      return [libKey, libPath, srcPath, distPath, null, null]
+    })
+    const copyFiles = files
+      .map(([_libKey, _libPath, srcPath, distPath, rename, transform]) => ({
+        src: srcPath,
+        dest: distPath,
+        rename,
+        transform
+      }))
+      .reduce((acc, cur) => {
+        //去重
+        if (!acc.some((item) => item.src === cur.src && item.dest === cur.dest)) {
+          acc.push(cur)
+        }
+        return acc
+      }, [])
+    return viteStaticCopy({
+      targets: copyFiles
+    })
+  }
+  return {
+    cdnPrefix, // 替换VITE_CDN_DOMAIN
+    distDir: dir,
+    versionPlaceholder, //替换@version中的version
+    copyImportMapFilePlugin
+  }
+}
+
+export const getBaseUrlFromCli = (fallback = '') => {
+  const index = process.argv?.indexOf('--base')
+  return index > -1 ? process.argv[index + 1] || fallback : fallback
+}

packages/design-core/scripts/replaceImportPath.mjs

@@ -0,0 +1,88 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { parse } from '@babel/core'
+import traversePkg from '@babel/traverse'
+import generatePkg from '@babel/generator'
+const traverse = traversePkg.default
+const generate = generatePkg.default
+
+export function relativePathPattern(relativePath) {
+  return './' + (path.sep === '/' ? relativePath : relativePath.replace(/\\/g, '/'))
+}
+
+export function resolvePath(importPath, currentFilePath) {
+  if (['js', 'mjs'].some(suffix =>importPath.endsWith(suffix))) { // 文件名已经带有.js，.mjs后缀
+    return importPath
+  }
+  const parentPath = path.resolve(currentFilePath, '../')
+  const filePrefix = path.resolve(parentPath, importPath)
+
+  if (fs.existsSync(filePrefix)) {
+    const stat = fs.statSync(filePrefix)
+    if (stat.isDirectory()) {
+      let mainFileName = 'index.js'
+
+      const packageFile = path.resolve(filePrefix, 'package.json')
+
+      if (fs.existsSync(packageFile)) {
+        const packageFileContent = fs.readFileSync(packageFile, { encoding: 'utf-8' })
+        const packageJson = JSON.parse(packageFileContent)
+        mainFileName = packageJson.module || packageJson.main || mainFileName
+      }
+
+      const mainFile = path.resolve(filePrefix, mainFileName)
+      if (fs.existsSync(mainFile)) {
+        return relativePathPattern(path.relative(parentPath, mainFile))
+      }
+      return null
+    }
+    return importPath
+  }
+  const possibleSuffix = ['.js', '.mjs']
+  const suffix = possibleSuffix.find(suf => fs.existsSync(filePrefix + suf))
+  if (suffix) {
+    return relativePathPattern(path.relative(path.resolve(currentFilePath, '../'), filePrefix + suffix))
+  }
+  return null
+}
+
+export function babelReplaceImportPathWithCertainFIleName(content, currentFilePath, logger) {
+  let fileChangedMark = false
+  let result = {
+    code: null,
+    success: [],
+    error: []
+  }
+  const ast = parse(content, { sourceType: 'module' })
+  traverse(ast, {
+    ImportOrExportDeclaration: (astPath) => {
+      const node = astPath.node
+      if (!node.source) {
+        return
+      }
+      const importPath = node.source.value
+      if(importPath.startsWith('.')) {
+        const certainPath = resolvePath(importPath, currentFilePath)
+        if(!certainPath) {
+          logger.warn(`File not found: ${importPath} used in ${currentFilePath}`)
+          result.error.push(importPath)
+        }
+        if(certainPath !== importPath) {
+          node.source.value = certainPath
+          fileChangedMark = true
+          result.success.push({before: importPath, after: certainPath})
+        }
+      }
+    }
+  })
+  if (fileChangedMark) {
+    const { code } = generate(ast, {
+      jsescOption: {
+        quotes: 'single'
+      }
+    })
+    result.code = code
+  }
+  return result
+}
+