neo-cmp-cli 1.5.0-beta.3 → 1.5.0-beta.6

package/README.md

@@ -1,14 +1,14 @@
 ## Neo 自定义组件开发工具
-neo-cmp-cli 是 Neo 自定义组件开发工具，基于 [AKFun](https://github.com/wibetter/akfun) 的工程能力，提供 初始化、编译构建、预览调试、热更新、多技术栈支持和一键发布等功能。
+neo-cmp-cli 是 Neo 自定义组件开发工具，基于 [AKFun](https://github.com/wibetter/akfun) 的工程能力，提供 初始化、编译构建、预览调试、热更新、多技术栈支持和发布等功能。
 
 ### 主要特性
 - **零配置**: 内置默认配置，开箱可用；
 - **多技术栈**: 支持 Vue2、React、React+TypeScript 自定义组件的调试、构建与发布；
-- **多构建场景**: 本地预览（含热更新/代理）、外链调试、库构建（UMD/ESM）；
+- **多构建场景**: 本地预览（含热更新/代理）、外链调试、库构建（UMD/ESM）、部署&发布；
 - **灵活可配**: 支持 构建入口、别名、代理、SASS 注入、ESLint/StyleLint、Babel/Loader/Plugin 扩展等配置；
 - **样式与规范**: 内置 Autoprefixer、Sass、PostCSS、ESLint、StyleLint；
-- **参数替换**: 支持基于 [params-replace-loader](https://www.npmjs.com/package/params-replace-loader) 的环境变量批量替换；
-- **一键发布**: 内置发布到 OSS 的能力，并支持自定义对象存储配置。
+- **发布至 CDN**: 内置发布到对象存储（OSS）的能力，支持自定义对象存储配置；
+- **发布至 NeoCRM 平台**: 支持一键发布到NeoCRM 平台的能力，需自行补充授权配置；
 
 ### 内置的自定义组件模板
 创建自定义组件时（执行初始化命令 neo init）可选用。
@@ -40,8 +40,8 @@ neo preview
 # 外链调试（在平台线上预览与调试）
 neo linkDebug
 
-# 构建并发布到 OSS（确保 package.json 的 name 唯一、version 不重复）
-neo publish2oss
+# 构建并发布到 NeoCRM（需自行添加授权配置，并确保 package.json 的 name 唯一、version 不重复）
+neo pushCmp
 ```
 
 ### 方法二：在现有业务项目中使用自定义组件开发工具
@@ -58,7 +58,7 @@ npm i neo-cmp-cli --save-dev
 ```bash
 "preview": "neo preview",
 "linkDebug": "neo linkDebug",
-"publish2oss": "neo publish2oss"
+"pushCmp": "neo pushCmp"
 ```
 ##### 3) 初始化配置文件
 ```bash
@@ -76,10 +76,11 @@ npm run publish2oss
 - **neo preview**: 本地预览自定义组件内容，默认支持热更新与接口代理。
 - **neo linkDebug**: 外链调试模式，在平台端页面设计器中调试自定义组件。
 - **neo publish2oss**: 构建并上传到对象存储（可自定义配置对象存储）。
+- **neo pushCmp**: 构建并发布到NeoCRM平台（需自行添加授权配置）。
 
 ## 开发须知
 #### 1）默认自动识别自定义组件
-- **自动生成入口配置**: 当 `entry` 未配置时，自动从 `src/components` 目录下扫描并识别自定义组件，`src/components` 下的子目录名称作为自定义组件的 cmpType，并以其目录下的 `index.ts/.tsx/.js/.jsx` 文件作为组件内容文件，model.[tj]s 作为模型内容文件；
+- **自动生成入口配置**: 当 `entry` 未配置时，自动从 `src/components` 目录下扫描并识别自定义组件，`src/components` 下的子目录名称作为自定义组件的名称，并以其目录下的 `index.ts/.tsx/.js/.jsx` 文件作为组件内容文件，model.[tj]s 作为模型内容文件；
 - **自动注册自定义组件**: 当 `entry` 未配置时，自动生成自定义组件注册文件和模型注册文件，并注入到构建脚本中，无需用户手动编写注册文件（[neo-register](https://www.npmjs.com/package/neo-register)）。
 
 #### 2）设置自定义组件属性配置项
@@ -128,16 +129,49 @@ neo linkDebug
 ##### 3. 页面设计器开启 debug 模式后，左侧会展示 外部链接 管理面板
 将第 1 步生成的「外链脚本地址」添加进来，即可在此页面设计器 / 组件物料面板中看到对应自定义组件。
 
-#### 6）发布自定义组件
-执行 `neo publish2oss` 即可构建对应自定义组件，并自动将构建后资源上传到对象存储（OSS）中。  
+#### 6）发布自定义组件至 NeoCRM
+执行 `neo pushCmp` 即可构建并发布自定义组件至 NeoCRM 平台，其构建后资源也会上传到 NeoCRM 平台端提供的 CDN 中。  
 
 ##### 发布前请确保
 - **package.json 的 name 唯一**
 - **version 不重复**
-- 已按需配置对象存储参数（支持自定义）
+
+##### 需自行添加授权配置
+```javascript
+module.exports = {
+  pushCmp: {
+    neoBaseURL: 'https://crm-cd.xiaoshouyi.com', // 平台根地址（默认：https://crm.xiaoshouyi.com）
+    tokenAPI: 'https://login-cd.xiaoshouyi.com/auc/oauth2/token', // Token 获取接口地址（默认：https://login.xiaoshouyi.com/auc/oauth2/token）
+    // NeoCRM 授权配置
+    authConfig: {
+      /**
+       * 客户端 ID 和 客户端秘钥 需通过 创建连接器 获取，
+       * 详细见：https://doc.xiaoshouyi.com / 创建连接器。
+       */
+      client_id: 'xx', // 客户端 ID，从创建连接器的客户端信息中获取（Client_Id）
+      client_secret: 'xxx', // 客户端秘钥，从创建连接器的客户端信息中获取（Client_Secret）
+      username: 'xx', // 用户在销售易系统中的用户名
+      /**
+       * password 为 用户在销售易系统中的账号密码加上 8 位安全令牌。
+       * 例如，用户密码为 123456，安全令牌为 ABCDEFGH，则 password 的值应为 123456ABCDEFGH。
+       * 如何获取 安全令牌请见：https://doc.xiaoshouyi.com / OAuth安全认证 / 密码模式 / 获取令牌。
+       */
+      password: 'xx xx' // 用户账户密码 + 8 位安全令牌
+    },
+  },
+}
+```
 
 ##### 支持发布指定自定义组件
-执行 `neo publish2oss --cmpType=xxCmp`
+执行 `neo pushCmp --name=xxCmp`
+
+#### 7）发布自定义组件至CDN
+执行 `neo publish2oss` 即可构建对应自定义组件，并自动将构建后资源上传到对象存储（OSS）中。  
+
+##### 发布前请确保
+- **package.json 的 name 唯一**
+- **version 不重复**
+- 可按需配置对象存储参数（支持自定义），默认使用内置对象存储配置。
 
 ##### 支持自定义对象存储配置
 ```javascript
@@ -159,6 +193,9 @@ module.exports = {
 }
 ```
 
+##### 支持发布指定自定义组件
+执行 `neo publish2oss --name=xxCmp`
+
 ## 项目工程配置说明（neo.config.js）
 neo-cmp-cli 默认提供完整配置； 
 如需自定义，使用 `neo config init` 生成 `neo.config.js` 并按需修改。
@@ -327,8 +364,8 @@ module.exports = {
 ```javascript
 module.exports = {
   neoCommonModule: {
-    remotes: ['neo-custom-cmpA'], // 远程自定义组件，表示当前自定义组件 B 会用到的自定义组件
-    neoExternals: ['xxModule_A'], // 自定义组件中需要剔除的模块（远程自定义组件中分享出来的模块），仅支持数组写法，需要和 remotes 配合使用
+    remoteDeps: ['neo-custom-cmpA'], // 远程自定义组件，表示当前自定义组件 B 会用到的自定义组件
+    neoExternals: ['xxModule_A'], // 自定义组件中需要剔除的模块（远程自定义组件中分享出来的模块），仅支持数组写法，需要和 remoteDeps 配合使用
   },
 }
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neo-cmp-cli",
-  "version": "1.5.0-beta.3",
+  "version": "1.5.0-beta.6",
   "description": "前端脚手架：自定义组件开发工具，支持react 和 vue2.0技术栈。",
   "keywords": [
     "neo-cli",

package/src/cmpUtils/createCmpByTemplate.js

@@ -0,0 +1,50 @@
+const fs = require('fs-extra');
+const path = require('path');
+const _ = require('lodash');
+const { consoleTag } = require('../utils/neoParams'); // 输出标记
+const replaceInFilesByMap = require('../utils/replaceInFilesByMap');
+const hasCmpTypeByDir = require('./hasCmpTypeByDir');
+
+// 自定义组件内容模板信息
+const curCmpTemplate = {
+  // 需要替换掉的字段信息（模板中的字段）
+  widgetInfo: {
+    cmpName: 'CustomCmp',
+    modelName: 'CustomCmpModel',
+    cmpClassName: 'custom-cmp-container',
+    cmpType: 'xx-custom-cmp',
+    cmpLabel: 'xx组件',
+  },
+  dir: path.resolve(__dirname, '../template/empty-cmp')
+};
+
+/**
+ * 创建自定义组件
+ * @param {*} cmpName 自定义组件名称
+ */
+module.exports = function (cmpName) {
+  const currentTemplateDir = curCmpTemplate.dir;
+  const finalCmpName = cmpName || 'neoCustomCmp';
+  const finalCmpPath = path.resolve(process.cwd(), finalCmpName);
+
+  if (hasCmpTypeByDir(cmpType)) {
+    console.error(`${consoleTag}创建自定义组件失败，当前已经存在${cmpType}自定义组件。`);
+    process.exit(1);
+  }
+
+  fs.copy(currentTemplateDir, finalCmpPath)
+    .then(() => {
+      const curCmpName = _.camelCase(cmpName);
+      const cmpType = _.kebabCase(cmpName);
+      replaceInFilesByMap(finalCmpPath, {
+        [curCmpTemplate.widgetInfo.cmpName]: curCmpName,
+        [curCmpTemplate.widgetInfo.modelName]: `${curCmpName}Model`,
+        [curCmpTemplate.widgetInfo.cmpClassName]: `${cmpType}-container`,
+        [curCmpTemplate.widgetInfo.cmpType]: cmpType,
+        [curCmpTemplate.widgetInfo.cmpLabel]: `${cmpType}组件`,
+      });
+
+      console.log(`${consoleTag}已创建自定义组件（${finalCmpName}）!`);
+    })
+    .catch((err) => console.error(`${consoleTag}自定义组件创建失败（${finalCmpName}）：`, err));
+};;

package/src/cmpUtils/createCommonModulesCode.js

@@ -9,15 +9,15 @@ const { isPlainObject } = require('lodash');
  * @returns 组件预览代码
  */
 const createCommonModulesCode = (neoCommonModule, cmpTypes) => {
-  const {neoExports, remotes} = neoCommonModule;
+  const {neoExports, remoteDeps} = neoCommonModule;
 
-  if (!neoExports && !remotes) {
+  if (!neoExports && !remoteDeps) {
     return '';
   }
   // 记录当前自定义组件共享出去的模块
   const CustomCmpCommonModules = {};
-  // 记录当前自定义组件需要的远程组件
-  const CustomCmpRemotes = {};
+  // 记录当前自定义组件需要的远程依赖组件
+  const CustomCmpRemoteDeps = {};
 
   // 根据 neoExports 获取共享的依赖模块
   if (Array.isArray(neoExports) && neoExports.length > 0) {
@@ -35,10 +35,10 @@ const createCommonModulesCode = (neoCommonModule, cmpTypes) => {
     process.exit(1);
   }
 
-  // 根据 cmpTypes 和 remotes 设置远程组件信息
-  if (Array.isArray(remotes) && remotes.length > 0) {
+  // 根据 cmpTypes 和 remoteDeps 设置远程依赖组件信息
+  if (Array.isArray(remoteDeps) && remoteDeps.length > 0) {
     cmpTypes.forEach((cmpType) => {
-      CustomCmpRemotes[cmpType] = remotes;
+      CustomCmpRemoteDeps[cmpType] = remoteDeps;
     });
   }
 
@@ -58,7 +58,7 @@ const createCommonModulesCode = (neoCommonModule, cmpTypes) => {
  */
 import { isPlainObject } from 'lodash';
 const CustomCmpCommonModules = ${customCmpCommonModulesCode};
-const CustomCmpRemotes = ${JSON.stringify(CustomCmpRemotes)};
+const CustomCmpRemoteDeps = ${JSON.stringify(CustomCmpRemoteDeps)};
 
 // 用于添加共享的依赖模块
 const addNeoCommonModules = (modules) => {
@@ -88,21 +88,21 @@ const addNeoCommonModules = (modules) => {
   }
 }
 
-// 用于添加自定义组件的远程组件（关联使用）
-const addNeoRemotes = (remotes) => {
+// 用于添加自定义组件的远程依赖组件（关联使用）
+const addNeoRemoteDeps = (remoteDeps) => {
   if (!window.__NeoCommonModules) {
     window.__NeoCommonModules = {}
   }
-  if (!window.__NeoCommonModules.__neoRemotes) {
-    window.__NeoCommonModules.__neoRemotes = {}
+  if (!window.__NeoCommonModules.__neoRemoteDeps) {
+    window.__NeoCommonModules.__neoRemoteDeps = {}
   }
-  if (isPlainObject(remotes)) {
-    window.__NeoCommonModules.__neoRemotes = Object.assign(window.__NeoCommonModules.__neoRemotes, remotes)
+  if (isPlainObject(remoteDeps)) {
+    window.__NeoCommonModules.__neoRemoteDeps = Object.assign(window.__NeoCommonModules.__neoRemoteDeps, remoteDeps)
   }
 }
 
 addNeoCommonModules(CustomCmpCommonModules);
-addNeoRemotes(CustomCmpRemotes);
+addNeoRemoteDeps(CustomCmpRemoteDeps);
   `;
 
   // 创建存放 cli 的临时目录

package/src/cmpUtils/{getCmpModelRegister.js → getCmpModelRegisterCode.js}

@@ -7,7 +7,7 @@ const { resolveToCurrentRoot } = require('../utils/pathUtils');
  * @param {*} cmpName 自定义组件名称
  * @returns 组件注册文件内容
  */
-const getCmpModelRegister = (cmpsDir, cmpName) => {
+const getCmpModelRegisterCode = (cmpsDir, cmpName) => {
   const cpmModelDir = resolveToCurrentRoot(`${cmpsDir}/${cmpName}/model`);
 
   /*
@@ -28,4 +28,4 @@ registerNeoEditorModel(CustomCmpModel, '${cmpName}');
   `;
 };
 
-module.exports = getCmpModelRegister;
+module.exports = getCmpModelRegisterCode;

package/src/cmpUtils/{getCmpPreview.js → getCmpPreviewCode.js}

@@ -7,7 +7,7 @@ const { resolveToCurrentRoot } = require('../utils/pathUtils');
  * @param {*} cmpName 自定义组件名称
  * @returns 组件预览代码
  */
-const getCmpPreview = (cmpsDir, cmpName) => {
+const getCmpPreviewCode = (cmpsDir, cmpName) => {
   const cpmDir = resolveToCurrentRoot(`${cmpsDir}/${cmpName}`);
   const cpmModelDir = resolveToCurrentRoot(`${cmpsDir}/${cmpName}/model`);
 
@@ -37,4 +37,4 @@ ReactDOM.render(
   `;
 };
 
-module.exports = getCmpPreview;
+module.exports = getCmpPreviewCode;

package/src/cmpUtils/{getCmpRegister.js → getCmpRegisterCode.js}

@@ -7,7 +7,7 @@ const { resolveToCurrentRoot } = require('../utils/pathUtils');
  * @param {*} cmpName 自定义组件名称
  * @returns 组件注册文件内容
  */
-const getCmpRegister = (cmpsDir, cmpName) => {
+const getCmpRegisterCode = (cmpsDir, cmpName) => {
   const cpmIndexDir = resolveToCurrentRoot(`${cmpsDir}/${cmpName}/index`);
 
   /*
@@ -28,4 +28,4 @@ registerNeoCmp(CustomCmp, '${cmpName}');
   `;
 };
 
-module.exports = getCmpRegister;
+module.exports = getCmpRegisterCode;

package/src/cmpUtils/getCmpTypeByDir.js

@@ -0,0 +1,41 @@
+const fs = require('fs');
+const path = require('path');
+const { resolveToCurrentRoot } = require('../utils/pathUtils');
+/**
+ * 根据当前组件目录，获取所有组件类型
+ * @param {*} componentsBaseDir 自定义组件目录
+ * @returns 组件类型列表
+ */
+const getCmpTypeByDir = (componentsBaseDir = './src/components') => {
+  const componentsDir = resolveToCurrentRoot(componentsBaseDir);
+  if (!fs.existsSync(componentsDir)) {
+    console.error(`未找到自定义组件目录，请检查 ${componentsDir} 目录是否存在。`);
+    // 退出进程
+    process.exit(1);
+  }
+
+  try {
+    // 读取组件目录下的所有子目录
+    const dirs = fs.readdirSync(componentsDir);
+    const cmpTypes = [];
+
+    // 遍历所有目录，过滤出有效的组件类型
+    dirs.forEach((dir) => {
+      const dirPath = path.join(componentsDir, dir);
+      const stat = fs.statSync(dirPath);
+      
+      // 只处理目录，过滤掉隐藏目录和 node_modules
+      if (stat.isDirectory() && !dir.startsWith('.') && dir !== 'node_modules') {
+        cmpTypes.push(dir);
+      }
+    });
+
+    return cmpTypes;
+  } catch (error) {
+    console.error('获取组件类型失败（getCmpTypeByDir）:', error);
+    // 退出进程
+    process.exit(1);
+  }
+};
+
+module.exports = getCmpTypeByDir;

package/src/cmpUtils/hasCmpTypeByDir.js

@@ -0,0 +1,11 @@
+const getCmpTypeByDir = require('./getCmpTypeByDir');
+/**
+ * 判断当前组件目录是否已经存在该组件类型
+ * @param {*} componentsBaseDir 自定义组件目录
+ * @param {*} cmpType 组件类型
+ * @returns Boolean
+ */
+module.exports = (cmpType) => {
+  const cmpTypes = getCmpTypeByDir();
+  return cmpTypes.includes(cmpType);
+};;

package/src/{module → cmpUtils}/previewCmp.js

@@ -2,7 +2,7 @@ const fs = require('fs');
 const akfun = require('akfun');
 const { consoleTag } = require('../utils/neoParams'); // 输出标记
 const { resolveToCurrentRoot } = require('../utils/pathUtils');
-const getCmpPreview = require('../cmpUtils/getCmpPreview');
+const getCmpPreviewCode = require('../cmpUtils/getCmpPreviewCode'); // 获取自定义组件预览代码
 
 /**
  * 用于预览指定自定义组件的脚本
@@ -35,7 +35,7 @@ module.exports = (config, cmpName, defaultComponentsDir = './src/components') =>
     fs.mkdirSync(cmpTempDir);
   }
 
-  const cmpPreviewContent = getCmpPreview(cmpsDir, cmpName);
+  const cmpPreviewContent = getCmpPreviewCode(cmpsDir, cmpName);
   fs.writeFileSync(`${cmpTempDir}/preview.jsx`, cmpPreviewContent);
 
   // 将临时预览文件添加到预览配置中

package/src/cmpUtils/publishCmp.js

@@ -99,8 +99,6 @@ const buildComponentData = async (assetsRoot, cmpInfo) => {
   }
   const widgetName = _.camelCase(cmpType);
   const modelFile = path.join(assetsRoot, `${widgetName}Model.js`);
-  
-  let CatchCustomCmpModelClass = null;
 
   // 为 Node.js 环境设置全局 window 对象（模型文件可能需要）
   // 使用 globalThis 以确保在 Node.js 和浏览器环境中都能工作
@@ -109,6 +107,7 @@ const buildComponentData = async (assetsRoot, cmpInfo) => {
     globalThis.window = {
       console: console,
       neoRequire: () => {},
+      postMessage: () => {},
       // 可以添加其他常用的 window 属性
     };
   }
@@ -124,35 +123,38 @@ const buildComponentData = async (assetsRoot, cmpInfo) => {
       console.error(`未找到自定义组件模型文件，请检查以下路径是否存在：`, modelFile);
       return null;
     }
-
-    if (!CatchCustomCmpModelClass || typeof CatchCustomCmpModelClass !== 'function') {
+    if (!window.NEOEditorCustomModels) {
       console.error(`模型文件未导出有效模型方法（CatchCustomCmpModelClass），模型文件地址： ${modelFile} `);
       return null;
     }
 
-    // 先获取对应的模型类
-    const ModelClass = new CatchCustomCmpModelClass(cmpType);
+    const ModelClass = window.NEOEditorCustomModels[cmpType];
+    if (!ModelClass) {
+      console.error(`未找到自定义组件模型类（${cmpType}），模型文件地址： ${modelFile} `);
+      return null;
+    }
     // 实例化模型类
     const modelInstance = new ModelClass();
 
     if (!modelInstance) {
-      console.error(`模型文件未导出有效模型实例（${cmpType}），模型文件地址： ${modelFile} `);
+      console.error(`未找到自定义组件模型信息（${cmpType}），模型文件地址： ${modelFile} `);
       return null;
     }
 
     // 构建组件数据，合并模型实例的信息
     const curCmpInfo = {
       ...cmpInfo,
+      plugin: cmpInfo.modelAsset,
       version: currentPackageJson.version || '1.0.0',
       framework: currentPackageJson.framework ? getFramework(currentPackageJson.framework) : '0', // 0: React, 1: vue2, 2: jQuery, 3: vue3
       // 从模型实例中提取并设置组件信息
       label: modelInstance.label || cmpType,
       description: modelInstance.description || '',
-      componentCategory: modelInstance.tags || [],
+      componentCategory: (modelInstance.tags || []).join(','),
       icon: modelInstance.iconSrc,
-      defaultProps: modelInstance.defaultComProps || {},
-      previewProps: modelInstance.previewComProps || {},
-      propsSchema: modelInstance.propsSchema || [],
+      defaultProps: JSON.stringify(modelInstance.defaultComProps || {}),
+      previewProps: JSON.stringify(modelInstance.previewComProps || {}),
+      propsSchema: JSON.stringify(modelInstance.propsSchema || []),
       events: modelInstance.events || [],
       actions: modelInstance.actions || [],
       // 如果模型实例中有其他属性，也可以添加
@@ -161,7 +163,7 @@ const buildComponentData = async (assetsRoot, cmpInfo) => {
       enableDuplicate: modelInstance.enableDuplicate !== undefined ? modelInstance.enableDuplicate : true
     };
 
-    console.log('自定义组件模型信息（${cmpType}）:', curCmpInfo);
+    console.log(`自定义组件模型信息（${cmpType}）:`, curCmpInfo);
     return curCmpInfo;
   } catch (error) {
     console.error(`自定义组件模型文件解析失败 (${modelFile || '未知路径'}):`, error.message);
@@ -182,13 +184,13 @@ const buildComponentData = async (assetsRoot, cmpInfo) => {
  * @param {object} config 配置信息
  * @param {string} assetsRoot 构建产物的目录
  */
-const publishCmp = async (config, cmpType) => {
+const pushCmp = async (config, cmpType) => {
   const {
-    authorization: credentials
+    authConfig: credentials
   } = config;
 
   if (!credentials) {
-    console.error('未找到 NeoCRM 平台授权配置（neo.config.js / publishCmpConfig / credentials）。');
+    console.error('未找到 NeoCRM 平台授权配置（neo.config.js / pushCmp / authConfig）。');
     return;
   }
 
@@ -227,4 +229,4 @@ const publishCmp = async (config, cmpType) => {
   }
 };
 
-module.exports = publishCmp;
+module.exports = pushCmp;

package/src/config/default.config.js

@@ -133,7 +133,7 @@ const defaultNEOConfig = {
     },
     assetsRoot: resolve('dist') // 上传指定目录下的脚本文件
   },
-  publishCmp: {
+  pushCmp: {
     output: {
       filename: '[name].js',
       library: {