@bams-app/configs 0.1.3 → 0.1.4

package/config-utils.js

@@ -0,0 +1,105 @@
+const { resolveComponent } = require("./resolve-component");
+const globalComponentDefaults = require("./component-defaults.js");
+
+/**
+ * 简单的深度合并对象
+ * @param {Object} target 目标对象
+ * @param {...Object} sources 源对象
+ * @returns {Object} 合并后的对象
+ */
+function merge(target, ...sources) {
+    if (!sources.length) return target;
+    const source = sources.shift();
+
+    if (source !== undefined && source !== null) {
+        Object.keys(source).forEach(key => {
+            const targetValue = target[key];
+            const sourceValue = source[key];
+
+            if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
+                target[key] = targetValue.concat(sourceValue);
+            } else if (typeof targetValue === 'object' && targetValue !== null &&
+                typeof sourceValue === 'object' && sourceValue !== null &&
+                !Array.isArray(sourceValue)) {
+                target[key] = merge({ ...targetValue }, sourceValue);
+            } else {
+                target[key] = sourceValue;
+            }
+        });
+    }
+
+    return merge(target, ...sources);
+}
+
+/**
+ * 将环境变量名转换为可配置插槽名
+ * @param {string} envKey 环境变量名
+ * @returns {string} 插槽名，如 login、home-card
+ */
+function normalizeConfigurableSlotName(envKey) {
+    return envKey
+        .replace(/^(VUE_APP_COMPONENT_|COMPONENT_)/, "")
+        .toLowerCase()
+        .replace(/_/g, "-");
+}
+
+/**
+ * 根据环境变量和默认值生成可配置组件 alias
+ * @param {Object} options 配置项
+ * @param {Object} options.env 环境变量对象
+ * @param {string} options.rootDir 项目根目录
+ * @param {Object} options.packageJson 根 package.json
+ * @param {Object} [options.defaults] 额外默认插槽组件映射，会覆盖全局默认值
+ * @returns {Object} webpack alias 对象
+ */
+function getConfigurableComponentAliases({ env, rootDir, packageJson, defaults = {} }) {
+    const slotToComponent = { ...globalComponentDefaults, ...defaults };
+
+    Object.entries(env).forEach(([key, value]) => {
+        if (!/^(VUE_APP_COMPONENT_|COMPONENT_).+$/.test(key) || !value) {
+            return;
+        }
+
+        slotToComponent[normalizeConfigurableSlotName(key)] = value;
+    });
+
+    return Object.entries(slotToComponent).reduce((aliases, [slotName, componentName]) => {
+        aliases[`@configurable/${slotName}`] = resolveComponent(componentName, rootDir, packageJson);
+        return aliases;
+    }, {});
+}
+
+/**
+ * 生成通用的 webpack alias 片段，包含所有可配置组件插槽
+ * @param {Object} [options]
+ * @param {string} options.rootDir 项目根目录
+ * @param {Object} [options.env=process.env] 环境变量对象
+ * @param {Object} options.packageJson 根 package.json
+ * @param {Object} [options.defaults] 额外默认插槽组件映射
+ * @returns {{rootDir: string, packageJson: object, aliases: Object}}
+ */
+function applyCommonConfig(options = {}) {
+    const { rootDir, env = process.env, packageJson, defaults } = options;
+
+    if (!rootDir || !packageJson) {
+        throw new Error("applyCommonConfig requires rootDir and packageJson");
+    }
+
+    const configurableAliases = getConfigurableComponentAliases({
+        env,
+        rootDir,
+        packageJson,
+        defaults
+    });
+
+    return {
+        rootDir,
+        packageJson,
+        aliases: configurableAliases
+    };
+}
+
+module.exports = {
+    merge,
+    applyCommonConfig
+};

package/empty-entry.js

@@ -0,0 +1 @@
+export { };

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@bams-app/configs",
   "private": false,
-  "version": "0.1.3",
+  "version": "0.1.4",
   "main": "index.js",
   "files": [
     "index.js",
     "component-defaults.js",
-    "app-config.json"
+    "app-config.json",
+    "resolve-component.js",
+    "config-utils.js",
+    "vue.config.app-base.js",
+    "empty-entry.js"
   ],
-  "description": "BAMS-Work 公共配置（应用配置、可配置组件插槽默认值）"
+  "description": "BAMS-Work 公共配置（应用配置、可配置组件插槽默认值、宿主应用 vue-cli 基础配置与组件别名解析）"
 }

package/resolve-component.js

@@ -0,0 +1,220 @@
+const path = require('path');
+const fs = require('fs');
+
+/**
+ * 判断目标路径是否为目录
+ * @param {string} targetPath - 目标路径
+ * @returns {boolean} 是否为目录
+ */
+function isDirectory(targetPath) {
+    return fs.existsSync(targetPath) && fs.statSync(targetPath).isDirectory();
+}
+
+/**
+ * 标准化路径用于显示（统一使用 / 分隔符）
+ * @param {string} targetPath - 目标路径
+ * @returns {string} 标准化后的路径
+ */
+function normalizePathForDisplay(targetPath) {
+    return targetPath.split(path.sep).join('/');
+}
+
+/**
+ * 将目录名添加到 scope 映射中
+ * @param {Object} scopes - scope 到目录的映射
+ * @param {string} dirName - 目录名
+ */
+function addScopeDir(scopes, dirName) {
+    // 排除不是 ui 相关的目录
+    if (['work', 'bams-components', 'bams-ui'].includes(dirName)) {
+        if (!scopes['bams-app']) scopes['bams-app'] = [];
+        if (!scopes['bams-app'].includes(dirName)) {
+            scopes['bams-app'].push(dirName);
+        }
+    } else {
+        // 其他目录用目录名作为 scope
+        if (!scopes[dirName]) scopes[dirName] = [];
+        if (!scopes[dirName].includes(dirName)) {
+            scopes[dirName].push(dirName);
+        }
+    }
+}
+
+/**
+ * 从项目根目录查找 -ui 结尾的目录并补充到 scope 映射
+ * @param {Object} scopes - scope 到目录的映射
+ * @param {string} rootDir - 项目根目录
+ */
+function appendUiDirsFromRoot(scopes, rootDir) {
+    if (!rootDir || !isDirectory(rootDir)) {
+        return;
+    }
+
+    const dirEntries = fs.readdirSync(rootDir, { withFileTypes: true });
+    dirEntries.forEach((entry) => {
+        if (!entry.isDirectory() || !entry.name.endsWith('-ui')) {
+            return;
+        }
+
+        addScopeDir(scopes, entry.name);
+    });
+}
+
+/**
+ * 从 workspaces 配置中解析出 scope 和目录映射
+ * @param {Object} packageJson - package.json 对象
+ * @param {string} rootDir - 项目根目录
+ * @returns {Object} scope 到目录的映射
+ */
+function parseScopesFromWorkspaces(packageJson, rootDir) {
+    const workspaces = packageJson.workspaces || [];
+    const scopes = {};
+
+    workspaces.forEach(pattern => {
+        // 跳过排除项
+        if (pattern.startsWith('!')) return;
+
+        // 处理类似 "pds-ui/*" 或 "pds-ui" 这样的模式
+        const match = pattern.match(/^([^/*]+)(\/\*)?$/);
+        if (match) {
+            addScopeDir(scopes, match[1]);
+        }
+    });
+
+    appendUiDirsFromRoot(scopes, rootDir);
+
+    // 默认总是包含 bams-app 的 fallback
+    if (!scopes['bams-app']) scopes['bams-app'] = [];
+    if (!scopes['bams-app'].includes('work/packages')) {
+        scopes['bams-app'].push('work/packages');
+    }
+
+    return scopes;
+}
+
+/**
+ * 获取所有 workspace 条目
+ * @param {Object} packageJson - package.json 对象
+ * @param {string} rootDir - 项目根目录
+ * @returns {Array<{scope: string, dir: string}>} workspace 条目列表
+ */
+function getWorkspaceEntries(packageJson, rootDir) {
+    const scopes = parseScopesFromWorkspaces(packageJson, rootDir);
+    const entries = [];
+
+    for (const [scope, dirs] of Object.entries(scopes)) {
+        for (const dir of dirs) {
+            entries.push({ scope, dir });
+        }
+    }
+
+    return entries;
+}
+
+/**
+ * 创建组件候选对象
+ * @param {string} scope - scope 名称
+ * @param {string} dir - 目录路径
+ * @param {string} componentDirName - 组件目录名
+ * @param {string} componentPath - 组件完整路径
+ * @param {string} requestedName - 用户请求的原始组件名
+ * @returns {Object} 组件候选对象
+ */
+function createCandidate(scope, dir, componentDirName, componentPath, requestedName) {
+    return {
+        scope,
+        dir,
+        requestedName,
+        componentDirName,
+        componentPath,
+        packageName: `@${scope}/${componentDirName}`,
+        displayPath: normalizePathForDisplay(path.join(dir, componentDirName))
+    };
+}
+
+/**
+ * 根据组件名在所有 workspaces 中查找候选组件
+ * @param {string} componentName - 组件名
+ * @param {string} rootDir - 项目根目录
+ * @param {Object} packageJson - package.json 对象
+ * @returns {Array<Object>} 组件候选列表
+ */
+function findComponentCandidates(componentName, rootDir, packageJson) {
+    const candidates = [];
+    const seen = new Set();
+    const searchNames = [componentName];
+
+    // 如果没有前缀，自动尝试添加 ui- 和 page- 前缀
+    if (!componentName.startsWith('ui-') && !componentName.startsWith('page-')) {
+        searchNames.push(`ui-${componentName}`, `page-${componentName}`);
+    }
+
+    for (const { scope, dir } of getWorkspaceEntries(packageJson, rootDir)) {
+        for (const searchName of searchNames) {
+            const componentPath = path.resolve(rootDir, dir, searchName);
+
+            // 跳过不存在或不是目录的路径
+            if (!isDirectory(componentPath)) {
+                continue;
+            }
+
+            const packageName = `@${scope}/${searchName}`;
+            // 跳过重复的 packageName
+            if (seen.has(packageName)) {
+                continue;
+            }
+
+            seen.add(packageName);
+            candidates.push(createCandidate(scope, dir, searchName, componentPath, componentName));
+        }
+    }
+
+    return candidates;
+}
+
+/**
+ * 根据 componentName 自动识别作用域
+ * @param {string} componentName - 组件名
+ * @param {string} rootDir - 根目录路径
+ * @param {Object} packageJson - package.json 对象
+ * @returns {string} 完整的包名
+ */
+function getComponentScope(componentName, rootDir, packageJson) {
+    const candidates = findComponentCandidates(componentName, rootDir, packageJson);
+
+    if (candidates.length > 0) {
+        return candidates[0].packageName;
+    }
+
+    // 默认回退到 bams-app
+    return `@bams-app/${componentName}`;
+}
+
+/**
+ * 解析组件名，返回完整的包名或路径
+ * @param {string} componentName - 组件名
+ * @param {string} rootDir - 根目录路径
+ * @param {Object} packageJson - package.json 对象
+ * @returns {string} 完整的包名或路径
+ */
+function resolveComponent(componentName, rootDir, packageJson) {
+    // 优先识别完整包名（以 @ 开头）
+    if (componentName.startsWith('@')) {
+        return componentName;
+    }
+    // 再识别路径（包含 / 但不是包名）
+    if (componentName.includes('/')) {
+        return path.resolve(rootDir, componentName);
+    }
+    // 最后尝试自动识别 scope
+    return getComponentScope(componentName, rootDir, packageJson);
+}
+
+module.exports = {
+    parseScopesFromWorkspaces,
+    getWorkspaceEntries,
+    createCandidate,
+    findComponentCandidates,
+    getComponentScope,
+    resolveComponent
+};

package/vue.config.app-base.js

@@ -0,0 +1,100 @@
+const fs = require('fs');
+const path = require('path');
+const { merge, applyCommonConfig } = require('./config-utils');
+
+/** 内置默认开发代理前缀，可被项目根 vue.config.dev.js 覆盖 */
+const BUILTIN_PROXY_PREFIXES = ['/bams-assets', '/bams-ui-umd', '/bams-app', '/admin-api', '/preview'];
+
+/**
+ * 解析项目根开发代理配置
+ * 优先读取项目根 vue.config.dev.js，其声明的代理键序优先（精确 path 置前），
+ * 内置默认前缀仅补充未声明项。
+ * @param {string} projectRoot 项目根目录
+ * @returns {Object} devServer 配置
+ */
+function resolveDevServer(projectRoot) {
+    const devConfigPath = path.join(projectRoot, 'vue.config.dev.js');
+    let devServer = {};
+
+    if (fs.existsSync(devConfigPath)) {
+        devServer = require(devConfigPath);
+    } else if (process.env.NODE_ENV === 'development') {
+        console.error('\x1b[31m%s\x1b[0m', '错误: 必须配置 vue.config.dev.js 文件以启动开发服务器。');
+        console.error('\x1b[33m%s\x1b[0m', '请按以下步骤操作:');
+        console.error('\x1b[33m%s\x1b[0m', '1. 复制模板生成配置: cp vue.config.dev_template.js vue.config.dev.js');
+        console.error('\x1b[33m%s\x1b[0m', '2. 按需修改 vue.config.dev.js 中的代理 target,或在 .envs/.env.* 中配置 PROXY_TARGET');
+        console.error('\x1b[33m%s\x1b[0m', '3. 修改后需重启开发服务才生效');
+        process.exit(1);
+    }
+
+    const builtinProxy = Object.fromEntries(
+        BUILTIN_PROXY_PREFIXES.map((prefix) => [prefix, { target: process.env.PROXY_TARGET }])
+    );
+    const devProxy = devServer.proxy || {};
+    const mergedProxy = Object.fromEntries([
+        ...Object.entries(devProxy),
+        ...Object.entries(builtinProxy).filter(([key]) => !(key in devProxy))
+    ]);
+
+    return merge({}, devServer, { proxy: mergedProxy });
+}
+
+/**
+ * 生成宿主应用（vue-cli）通用基础配置
+ *
+ * 该配置与仓库根 vue.config.js 同源，供仓库根配置与 work/apps/* 共同复用：
+ * - 仓库内：projectRoot 指向仓库根，行为与原根配置一致
+ * - 用户项目：projectRoot 指向用户项目根（由 CLI 通过 WORK_PROJECT_ROOT 注入），
+ *   使应用安装到 node_modules 后仍可独立构建，不再 require 仓库根文件
+ *
+ * @param {Object} [options]
+ * @param {string} [options.projectRoot] 项目根目录，缺省取 WORK_PROJECT_ROOT 或 cwd
+ * @returns {Object} vue-cli 基础配置（含 devServer）
+ */
+function getAppBaseConfig(options = {}) {
+    const projectRoot = options.projectRoot || process.env.WORK_PROJECT_ROOT || process.cwd();
+    const packageJson = require(path.join(projectRoot, 'package.json'));
+
+    // 动态检测组件入口文件，实现“无感”加载的基础配置
+    const componentsEntryPath = path.resolve(projectRoot, 'build-components-entry.js');
+    const hasComponentsEntry = fs.existsSync(componentsEntryPath);
+
+    const commonContext = applyCommonConfig({ rootDir: projectRoot, packageJson });
+
+    const baseConfig = {
+        transpileDependencies: true,
+        publicPath: process.env.BASE_URL || '/',
+        configureWebpack: {
+            externals: {
+                vue: 'Vue',
+                'vue-router': 'VueRouter',
+                pinia: 'Pinia'
+                // 'devextreme-vue': 'DevExtremeVue',
+                // 'devextreme': 'DevExtreme',
+            },
+            module: {
+                rules: [
+                    {
+                        test: /\.md$/,
+                        use: 'raw-loader'
+                    }
+                ]
+            },
+            resolve: {
+                alias: {
+                    // 设置别名，如果文件不存在则指向空文件，保证编译不报错
+                    '@components-entry': hasComponentsEntry ? componentsEntryPath : require.resolve('./empty-entry.js'),
+                    ...commonContext.aliases
+                }
+            }
+        },
+        devServer: {}
+    };
+
+    return merge({}, baseConfig, { devServer: resolveDevServer(projectRoot) });
+}
+
+module.exports = {
+    getAppBaseConfig,
+    resolveDevServer
+};