neo-cmp-cli 1.0.18 → 1.1.0

package/package.json

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

package/src/cmpUtils/getCmpModelRegister.js

@@ -0,0 +1,31 @@
+const fs = require('fs');
+const { resolveToCurrentRoot } = require('../utils/pathUtils');
+
+/**
+ * 获取组件注册文件内容
+ * @param {*} cmpsDir 自定义组件目录
+ * @param {*} cmpName 自定义组件名称
+ * @returns 组件注册文件内容
+ */
+const getCmpModelRegister = (cmpsDir, cmpName) => {
+  const cpmModelDir = resolveToCurrentRoot(`${cmpsDir}/${cmpName}/model`);
+
+  /*
+  if (!fs.existsSync(cpmModelDir)) {
+    console.error(`未找到 ${cmpName} 组件模型文件，请检查 ${cpmModelDir} 是否存在。`);
+
+    // 退出进程
+    process.exit(1);
+  }
+  */
+
+  return `
+// @ts-ignore
+import { registerNeoEditorModel } from 'neo-register';
+import CustomCmpModel from '${cpmModelDir}';
+
+registerNeoEditorModel(CustomCmpModel, '${cmpName}');
+  `;
+};
+
+module.exports = getCmpModelRegister;

package/src/cmpUtils/getCmpPreview.js

@@ -0,0 +1,48 @@
+const fs = require('fs');
+const { resolveToCurrentRoot } = require('../utils/pathUtils');
+
+/**
+ * 获取组件预览代码
+ * @param {*} cmpsDir 自定义组件目录
+ * @param {*} cmpName 自定义组件名称
+ * @returns 组件预览代码
+ */
+const getCmpPreview = (cmpsDir, cmpName) => {
+  const cpmDir = resolveToCurrentRoot(`${cmpsDir}/${cmpName}`);
+  const cpmModelDir = resolveToCurrentRoot(`${cmpsDir}/${cmpName}/model`);
+
+  if (!fs.existsSync(cpmDir)) {
+    console.error(`未找到 ${cmpName} 组件入口文件，请检查 ${cpmDir} 是否存在。`);
+
+    // 退出进程
+    process.exit(1);
+  }
+
+  if (!fs.existsSync(cpmModelDir)) {
+    console.error(`未找到 ${cmpName} 组件模型文件，请检查 ${cpmModelDir} 是否存在。`);
+
+    // 退出进程
+    process.exit(1);
+  }
+
+  return `
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import CustomCmp from '${cpmDir}';
+import CustomCmpModel from '${cpmModelDir}';
+
+// 获取组件模型中的默认属性
+const curDefaultComProps = new CustomCmpModel().defaultComProps;
+
+/* 引入公共的静态资源 */
+import '$public/css/base.css';
+
+// 预览 自定义组件
+ReactDOM.render(
+  <CustomCmp {...curDefaultComProps} />,
+  document.getElementById('root'),
+);
+  `;
+};
+
+module.exports = getCmpPreview;

package/src/cmpUtils/getCmpRegister.js

@@ -0,0 +1,31 @@
+const fs = require('fs');
+const { resolveToCurrentRoot } = require('../utils/pathUtils');
+
+/**
+ * 获取组件注册文件内容
+ * @param {*} cmpsDir 自定义组件目录
+ * @param {*} cmpName 自定义组件名称
+ * @returns 组件注册文件内容
+ */
+const getCmpRegister = (cmpsDir, cmpName) => {
+  const cpmIndexDir = resolveToCurrentRoot(`${cmpsDir}/${cmpName}/index`);
+
+  /*
+  if (!fs.existsSync(cpmIndexDir)) {
+    console.error(`未找到 ${cmpName} 组件入口文件，请检查 ${cpmIndexDir} 是否存在。`);
+
+    // 退出进程
+    process.exit(1);
+  }
+  */
+
+  return `
+// @ts-ignore
+import { registerNeoCmp } from 'neo-register';
+import CustomCmp from '${cpmIndexDir}';
+
+registerNeoCmp(CustomCmp, '${cmpName}');
+  `;
+};
+
+module.exports = getCmpRegister;

package/src/{utils → cmpUtils}/getEntries.js

@@ -1,42 +1,51 @@
 const fs = require('fs');
 const path = require('path');
 const _ = require('lodash');
-const { resolveToCurrentRoot } = require('./pathUtils');
+const { resolveToCurrentRoot } = require('../utils/pathUtils');
 
+/**
+ * 从指定目录获取组件入口文件
+ * @param {*} buildType 构建类型
+ * @param {*} defaultComponentsDir 默认组件目录
+ * @returns 组件入口文件
+ */
 module.exports = (buildType = 'build2lib', defaultComponentsDir = './src/components') => {
   const widgetEntries = {};
   const linkDebugEntries = {
     index: []
   };
-  const componentsDir = resolveToCurrentRoot(defaultComponentsDir);
-  if (!fs.existsSync(componentsDir)) {
+  const componentsBaseDir = resolveToCurrentRoot(defaultComponentsDir);
+  if (!fs.existsSync(componentsBaseDir)) {
     console.error(`未找到组件目录，请检查 ${defaultComponentsDir} 目录是否存在`);
-    return widgetEntries;
+
+    // 退出进程
+    process.exit(1);
   }
 
   try {
     // 读取指定目录下的所有文件
-    const widgetDirs = fs.readdirSync(componentsDir);
+    const widgetDirs = fs.readdirSync(componentsBaseDir);
 
     // 遍历所有目录
     widgetDirs.forEach((dir) => {
-      const filePath = path.join(componentsDir, dir);
+      const filePath = path.join(componentsBaseDir, dir);
       // 获取文件状态
       const stat = fs.statSync(filePath);
       // 如果文件是目录，则递归处理子目录
       if (stat.isDirectory() && !dir.startsWith('.') && dir !== 'node_modules') {
-        const widgetPath = path.join(defaultComponentsDir, dir);
-        const curWidgetName = _.camelCase(dir);
+        const curCmpPath = path.join(componentsBaseDir, dir);
+        const curCmpName = dir; // _.camelCase(dir);
 
-        fs.readdirSync(widgetPath)
+        fs.readdirSync(curCmpPath)
           .filter((file) => file.match(/[register|model]\.[tj]sx?$/))
-          .map((file) => path.join(widgetPath, file))
+          .map((file) => path.join(defaultComponentsDir, curCmpName, file))
           .forEach((filePath) => {
+            console.log(filePath);
             const curPath = `./${filePath}`;
             if (filePath.match(/register\.[tj]sx?$/)) {
-              widgetEntries[curWidgetName] = curPath;
+              widgetEntries[curCmpName] = curPath;
             } else if (filePath.match(/model\.[tj]sx?$/)) {
-              widgetEntries[`${curWidgetName}Model`] = curPath;
+              widgetEntries[`${curCmpName}Model`] = curPath;
             }
             linkDebugEntries.index.push(curPath);
           });
@@ -47,7 +56,10 @@ module.exports = (buildType = 'build2lib', defaultComponentsDir = './src/compone
       return linkDebugEntries;
     }
   } catch (error) {
-    console.error('replaceInFiles 运行失败:', error);
+    console.error('获取自定义组件入口文件失败（getEntries）:', error);
+
+    // 退出进程
+    process.exit(1);
   }
 
   return widgetEntries;

package/src/cmpUtils/getEntriesWithAutoRegister.js

@@ -0,0 +1,95 @@
+const fs = require('fs');
+const path = require('path');
+const _ = require('lodash');
+const { resolveToCurrentRoot } = require('../utils/pathUtils');
+const getCmpRegister = require('./getCmpRegister');
+const getCmpModelRegister = require('./getCmpModelRegister');
+/**
+ * 从指定目录获取组件入口文件，并自动创建对应的注册文件
+ * @param {*} buildType 构建类型
+ * @param {*} defaultComponentsDir 默认组件目录
+ * @returns 组件入口文件
+ */
+module.exports = (buildType = 'build2lib', defaultComponentsDir = './src/components') => {
+  const widgetEntries = {};
+  const linkDebugEntries = {
+    index: []
+  };
+  const componentsBaseDir = resolveToCurrentRoot(defaultComponentsDir);
+  if (!fs.existsSync(componentsBaseDir)) {
+    console.error(`未找到组件目录，请检查 ${defaultComponentsDir} 目录是否存在`);
+
+    // 退出进程
+    process.exit(1);
+  }
+
+  // 创建存放 cli 的临时目录
+  const cliTempDir = resolveToCurrentRoot('./.neo-cli');
+  if (!fs.existsSync(cliTempDir)) {
+    fs.mkdirSync(cliTempDir);
+  }
+
+  try {
+    // 读取指定目录下的所有文件
+    const widgetDirs = fs.readdirSync(componentsBaseDir);
+
+    // 遍历所有目录
+    widgetDirs.forEach((dir) => {
+      const filePath = path.join(componentsBaseDir, dir);
+      // 获取文件状态
+      const stat = fs.statSync(filePath);
+      // 如果文件是目录，则递归处理子目录
+      if (stat.isDirectory() && !dir.startsWith('.') && dir !== 'node_modules') {
+        // 当前自定义组件目录
+        const widgetPath = path.join(componentsBaseDir, dir);
+
+        // 当前自定义组件名称
+        const curCmpName = dir; // _.camelCase(dir);
+
+        // 当前自定义组件临时目录
+        const cmpTempDir = `${cliTempDir}/${curCmpName}`;
+        if (!fs.existsSync(cmpTempDir)) {
+          fs.mkdirSync(cmpTempDir);
+        }
+
+        fs.readdirSync(widgetPath)
+          .filter((file) => file.match(/[index|model]\.[tj]sx?$/))
+          .map((file) => path.join(defaultComponentsDir, curCmpName, file))
+          .forEach((filePath) => {
+            if (filePath.match(/index\.[tj]sx?$/)) {
+              // 自动创建对应的注册文件
+              const registerContent = getCmpRegister(componentsBaseDir, curCmpName);
+              const registerDir = `${cmpTempDir}/register.js`;
+
+              // 写入注册文件
+              fs.writeFileSync(registerDir, registerContent);
+
+              widgetEntries[curCmpName] = registerDir;
+              linkDebugEntries.index.push(registerDir);
+            } else if (filePath.match(/model\.[tj]sx?$/)) {
+              // 自动创建对应的模型注册文件
+              const modelRegisterContent = getCmpModelRegister(componentsBaseDir, curCmpName);
+              const modelRegisterDir = `${cmpTempDir}/model.js`;
+
+              // 写入模型注册文件
+              fs.writeFileSync(modelRegisterDir, modelRegisterContent);
+
+              widgetEntries[`${curCmpName}Model`] = modelRegisterDir;
+              linkDebugEntries.index.push(modelRegisterDir);
+            }
+          });
+      }
+    });
+
+    if (buildType === 'linkDebug') {
+      return linkDebugEntries;
+    }
+  } catch (error) {
+    console.error('获取自定义组件入口文件失败（getEntriesWithAutoRegister）:', error);
+
+    // 退出进程
+    process.exit(1);
+  }
+
+  return widgetEntries;
+};

package/src/initData/neo.config.js

@@ -12,7 +12,7 @@ module.exports = {
     enableESLint: true, // 调试模式是否开启ESLint，默认开启ESLint检测代码格式
     enableESLintFix: true, // 是否自动修正代码格式，默认不自动修正
     enableStyleLint: false, // 是否开启StyleLint，默认开启ESLint检测代码格式
-    enableStyleLintFix: false, // 是否需要StyleLint自动修正代码格式
+    enableStyleLintFix: false // 是否需要StyleLint自动修正代码格式
   },
   webpack: {
     target: ['web', 'es5'], // 指定目标环境为 web 和 es5，确保兼容性
@@ -22,30 +22,30 @@ module.exports = {
       alias: {
         '@': resolve('src'),
         $assets: resolve('src/assets'),
-        $public: resolve('public'),
-      },
+        $public: resolve('public')
+      }
     },
     // sassResources中的sass文件会自动注入每一个sass文件中
     sassResources: [
       resolve('./src/assets/css/common.scss'),
-      resolve('./src/assets/css/mixin.scss'),
+      resolve('./src/assets/css/mixin.scss')
     ],
     // createDeclaration: true, // 打包时是否创建ts声明文件
     ignoreNodeModules: false, // 打包时是否忽略 node_modules
     allowList: [], // ignoreNodeModules为true时生效
-    projectDir: ['src'],
+    projectDir: ['src']
     // template: resolve('./public/template.html'), // 自定义html模板
-    plugins: [],
-    babelPlugins: [],
+    // plugins: [],
+    // babelPlugins: [],
   },
   preview: {
     // 用于开启本地预览模式的相关配置信息
-    entry: {
-      // 本地预览自定义组件内容
-      index: './src/preview.tsx',
-    },
     /*
     【特别说明】以下配置项都自带默认值，非必填。如需自定义请自行配置。
+    entry: { // 根据 src/components 目录下的文件自动生成 entry 相关配置
+      // 本地预览自定义组件内容
+      index: './src/preview.jsx',
+    },
     NODE_ENV: 'development',
     port: 80, // 设置基础端口，如果被占用则自动寻找可用端口
     assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
@@ -64,7 +64,7 @@ module.exports = {
     // 用于开启本地调试模式的相关配置信息
     /*
     【特别说明】以下配置项都自带默认值，非必填。如需自定义请自行配置。
-    entry: { // entry 会根据 src/components 目录下的文件自动生成
+    entry: { // 根据 src/components 目录下的文件自动生成 entry 相关配置
       // 外链调试（在线上页面设计器端预览自定义组件）
       index: [
         './src/components/info-card/register.ts',
@@ -90,7 +90,7 @@ module.exports = {
     /*
     【特别说明】以下配置项都自带默认值，非必填。如需自定义请自行配置。
     NODE_ENV: 'production',
-    entry: { // entry 未配置时，cli 会根据 src/components 目录下的文件自动生成对应的 entry
+    entry: { // 根据 src/components 目录下的文件自动生成 entry 相关配置
       InfoCardModel: './src/components/info-card/model.ts',
       infoCard: './src/components/info-card/register.ts'
     },
@@ -104,5 +104,5 @@ module.exports = {
     },
     assetsRoot: resolve('dist') // 上传指定目录下的脚本文件
     */
-  },
+  }
 };

package/src/module/index.js

@@ -150,12 +150,14 @@ yargs
       if (argv.cmpType) {
         mainAction.previewCmp(argv.cmpType);
       } else {
-        const questions = [{
-          name: 'cmpType',
-          type: 'input',
-          message: '请输入要预览的自定义组件名称（默认 info-card）:',
-          default: 'info-card'
-        }];
+        const questions = [
+          {
+            name: 'cmpType',
+            type: 'input',
+            message: '请输入要预览的自定义组件名称（默认 info-card）:',
+            default: 'info-card'
+          }
+        ];
         inquirer.prompt(questions).then((ans) => {
           mainAction.previewCmp(ans.cmpType);
         });

package/src/module/main.js

@@ -7,7 +7,8 @@ const neoConfigInit = require('../utils/neoConfigInit.js');
 const { consoleTag } = require('../utils/neoParams');
 const curConfig = require('../config/index'); // 获取当前项目根目录下的配置文件
 const publish2oss = require('../oss/publish2oss');
-const getEntries = require('../utils/getEntries');
+const getEntries = require('../cmpUtils/getEntries');
+const getEntriesWithAutoRegister = require('../cmpUtils/getEntriesWithAutoRegister');
 const previewCmp = require('./previewCmp');
 // const { MFPlugins } = require('../utils/webpack.mf');
 
@@ -64,12 +65,25 @@ module.exports = {
 
     if (!curEntry || Object.keys(curEntry).length === 0) {
       // 如果未配置 entry，则自动生成 entry
-      const entries = getEntries('linkDebug', curConfig.componentsDir);
+      let entries = {};
+      if (curConfig.linkDebug.disableAutoRegister) {
+        // disableAutoRegister 为 true 时，仅自动生成入口文件（不自动注册）
+        entries = getEntries('linkDebug', curConfig.componentsDir);
+      } else {
+        // 自动生成入口文件（并自动创建对应的注册文件）
+        entries = getEntriesWithAutoRegister('linkDebug', curConfig.componentsDir);
+      }
+
+      // 注入 webpack/entry
       if (entries && Object.keys(entries).length > 0) {
         curConfig.dev.entry = entries;
         console.info('已自动生成 entry 入口配置：', entries);
       } else {
-        console.error('未找到自定义组件，请检查 neo.config.js 中的 linkDebug / entry 配置。');
+        console.error(
+          `未识别到自定义组件，请检查 ${
+            curConfig.componentsDir || './src/components'
+          } 目录下是否存在自定义组件。`
+        );
         process.exit(1);
       }
     }
@@ -78,7 +92,7 @@ module.exports = {
     // 说明：自定义组件和平台模块联邦使用异常，所以暂时注释掉
     // 添加模块联邦插件
     if (curConfig.dev.enableMF) {
-       curConfig.webpack.plugins.push(...MFPlugins);
+      curConfig.webpack.plugins.push(...MFPlugins);
     }
     */
 
@@ -90,12 +104,25 @@ module.exports = {
 
     if (!curEntry || Object.keys(curEntry).length === 0) {
       // 如果未配置 entry，则自动生成 entry
-      const entries = getEntries('build2lib', curConfig.componentsDir);
+      let entries = {};
+      if (curConfig.build2lib.disableAutoRegister) {
+        // disableAutoRegister 为 true 时，仅自动生成入口文件（不自动注册）
+        entries = getEntries('build2lib', curConfig.componentsDir);
+      } else {
+        // 自动生成入口文件（并自动创建对应的注册文件）
+        entries = getEntriesWithAutoRegister('build2lib', curConfig.componentsDir);
+      }
+
+      // 注入 webpack/entry
       if (entries && Object.keys(entries).length > 0) {
         curConfig.build2lib.entry = entries;
         console.info('已自动生成 entry 入口配置：', entries);
       } else {
-        console.error('未找到自定义组件，请检查 neo.config.js 中的 build2lib / entry 配置。');
+        console.error(
+          `未识别到自定义组件，请检查 ${
+            curConfig.componentsDir || './src/components'
+          } 目录下是否存在自定义组件。`
+        );
         process.exit(1);
       }
     }
@@ -119,12 +146,25 @@ module.exports = {
 
     if (!curEntry || Object.keys(curEntry).length === 0) {
       // 如果未配置 entry，则自动生成 entry
-      const entries = getEntries('build2lib', curConfig.componentsDir);
+      let entries = {};
+      if (curConfig.build2lib.disableAutoRegister) {
+        // disableAutoRegister 为 true 时，仅自动生成入口文件（不自动注册）
+        entries = getEntries('build2lib', curConfig.componentsDir);
+      } else {
+        // 自动生成入口文件（并自动创建对应的注册文件）
+        entries = getEntriesWithAutoRegister('build2lib', curConfig.componentsDir);
+      }
+
+      // 注入 webpack/entry
       if (entries && Object.keys(entries).length > 0) {
         curConfig.build2lib.entry = entries;
         console.info('已自动生成 entry 入口配置：', entries);
       } else {
-        console.error('未找到自定义组件，请检查 neo.config.js 中的 publish2oss / entry 配置。');
+        console.error(
+          `未识别到自定义组件，请检查 ${
+            curConfig.componentsDir || './src/components'
+          } 目录下是否存在自定义组件。`
+        );
         process.exit(1);
       }
     }

package/src/module/neoInit.js

@@ -23,6 +23,11 @@ const templateList = {
   */
 };
 
+/**
+ * 通过 git clone 从 github 拉取并创建自定义组件
+ * @param {*} type 自定义组件类型
+ * @param {*} projectName 自定义组件项目名称
+ */
 const neoInit = function (type, projectName) {
   const currentTemplate = templateList[type || 'react'];
   const currentTemplateUrl = currentTemplate.url;

package/src/module/neoInitByCopy.js

@@ -18,6 +18,11 @@ const templateList = {
   }
 };
 
+/**
+ * 通过拷贝模板创建自定义组件
+ * @param {*} type 自定义组件类型
+ * @param {*} projectName 自定义组件项目名称
+ */
 const neoInitByCopy = function (type, projectName) {
   const currentTemplate = templateList[type || 'react'];
   const currentTemplateDir = currentTemplate.dir;

package/src/module/previewCmp.js

@@ -1,17 +1,11 @@
-const path = require('path');
 const fs = require('fs');
 const akfun = require('akfun');
 const { consoleTag } = require('../utils/neoParams'); // 输出标记
-const { resolveToCurrentRoot, catchCurPackageJson } = require('../utils/pathUtils');
-const getConfigObj = require('../utils/getConfigObj');
-const getCmpPreview = require('../utils/getCmpPreview');
-
-// 获取当前项目的package文件
-const currentPackageJsonDir = catchCurPackageJson();
-const currentPackageJson = getConfigObj(currentPackageJsonDir);
+const { resolveToCurrentRoot } = require('../utils/pathUtils');
+const getCmpPreview = require('../cmpUtils/getCmpPreview');
 
 /**
- * 用于预览指定自定义组件
+ * 用于预览指定自定义组件的脚本
  */
 module.exports = (config, cmpName, defaultComponentsDir = './src/components') => {
   const cmpsDir = config.componentsDir || defaultComponentsDir;
@@ -29,31 +23,32 @@ module.exports = (config, cmpName, defaultComponentsDir = './src/components') =>
     process.exit(1);
   }
 
-  // 创建存放预览文件的临时目录
-  const tempDir = resolveToCurrentRoot('./.neo-cli');
-  
-  if (!fs.existsSync(tempDir)) {
-    fs.mkdirSync(tempDir);
+  // 创建 cli 的临时目录
+  const cliTempDir = resolveToCurrentRoot('./.neo-cli');
+  if (!fs.existsSync(cliTempDir)) {
+    fs.mkdirSync(cliTempDir);
   }
-  const tempCmpDir = `${tempDir}/${currentPackageJson.name}`;
-  if (!fs.existsSync(tempCmpDir)) {
-    fs.mkdirSync(tempCmpDir);
+
+  // 当前自定义组件临时目录
+  const cmpTempDir = `${cliTempDir}/${cmpName}`;
+  if (!fs.existsSync(cmpTempDir)) {
+    fs.mkdirSync(cmpTempDir);
   }
 
   const cmpPreviewContent = getCmpPreview(cmpsDir, cmpName);
-  fs.writeFileSync(`${tempCmpDir}/preview.jsx`, cmpPreviewContent);
+  fs.writeFileSync(`${cmpTempDir}/preview.jsx`, cmpPreviewContent);
 
   // 将临时预览文件添加到预览配置中
   if (!config.dev.entry) {
     config.dev.entry = {};
   }
   // 添加预览入口文件
-  config.dev.entry.index = `${tempCmpDir}/preview.jsx`;
+  config.dev.entry.index = `${cmpTempDir}/preview.jsx`;
 
   if (config.webpack.projectDir) {
-    config.webpack.projectDir.push(tempCmpDir);
+    config.webpack.projectDir.push(cmpTempDir);
   } else {
-    config.webpack.projectDir = [tempCmpDir];
+    config.webpack.projectDir = [cmpTempDir];
   }
 
   akfun.dev(config, consoleTag);

package/src/oss/publish2oss.js

@@ -196,7 +196,11 @@ const getResultFilesByWidgetName = (files) => {
 };
 
 // 文件名中添加当前项目版本号
-function addVersionToFilename(filename, version = currentPackageJson.version, projectName = currentPackageJson.name) {
+function addVersionToFilename(
+  filename,
+  version = currentPackageJson.version,
+  projectName = currentPackageJson.name
+) {
   // 找到最后一个点的位置，用于分离文件名和扩展名
   let lastDotIndex = filename.lastIndexOf('.umd');
   if (lastDotIndex === -1) {

package/src/template/react-custom-cmp-template/README.md

@@ -2,13 +2,12 @@
 - src: 自定义组件源码；
 - src/assets: 存放组件静态资源，比如 css、img等；
 - src/components: 存放自定义组件代码，每个自定义组件以自身名称（cmpType 数值）作为目录进行存放；
-- src/components/info-card/index.jsx: 信息卡片自定义组件代码；
-- src/components/info-card/register.js: 用于注册一个 neo 自定义组件，注册成功后编辑器画布区中才会正常展示自定义组件内容；
-- src/components/info-card/model.js: 用于注册一个 neo-editor 自定义组件模型，注册成功后编辑器左侧组件面板中会展示；
+- src/components/info-card/index.jsx: 自定义组件的内容文件；
+- src/components/info-card/model.js: 自定义组件的模型文件，用于对接页面设计器；
 - neo.config.js: neo-cmp-cli 配置文件。
 
 ### 组件开发规范
-- 存放在 src/components 目录下的自定义组件，默认 index 为自定义组件源码入口文件，register.[tj]s 为注册 Neo 组件的脚本文件，model.[tj]s 为自定义组件的描述文件（和页面设计器对接需要）；
+- 存放在 src/components 目录下的自定义组件，默认 index 为自定义组件源码入口文件，register.[tj]s 为注册 自定义组件的脚本文件，model.[tj]s 为自定义组件的模型文件（对接页面设计器需要）；
 - 当 neo.config.js 中的 entry 为空或者不存在时，cli 将根据 src/components 目录下的自定义组件结构生成对应的 entry 配置（可在命令控制台查看生成的 entry 配置）；
 - 自定义组件中可用的配置项类型 请见 [当前可用表单项](https://github.com/wibetter/neo-register/blob/master/docs/FormItemType.md)；
 - 自定义组件最外层请设置一个唯一的 ClassName（比如 xx-cmpType-container），所有内容样式请放在该 ClassName 中，避免自定义组件样式相互干扰；
@@ -17,6 +16,7 @@
 
 ### 自定义组件注册器使用说明
 - [neo-register 使用说明](https://www.npmjs.com/package/neo-register?activeTab=readme)
+备注：预览、调试（linkDebug）和构建发布时 cli 会自动创建对应的注册文件（含 neo-register 的使用），用户无需关注 neo-register。
 
 ### 开发说明
 

package/src/template/react-custom-cmp-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-custom-cmp-template",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "neo自定义组件模板（react技术栈）",
   "keywords": [
     "自定义组件模板",
@@ -10,7 +10,7 @@
   "author": "wibetter",
   "license": "MIT",
   "scripts": {
-    "preview": "neo preview",
+    "preview": "neo preview --cmpType=info-card",
     "linkDebug": "neo linkDebug",
     "publish2oss": "neo publish2oss",
     "format": "prettier --write \"src/**/**/*.{js,jsx,ts,tsx,vue,scss,json}\""
@@ -44,7 +44,7 @@
   "devDependencies": {
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^9.1.1",
-    "neo-cmp-cli": "^1.0.15",
+    "neo-cmp-cli": "^1.1.0",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",
     "prettier": "^2.0.5"

package/src/template/react-custom-cmp-template/src/components/info-card/model.js

@@ -1,12 +1,12 @@
 /**
  * @file 自定义组件对接编辑器的描述文件
  */
-// @ts-ignore
-import { registerNeoEditorModel } from 'neo-register';
-
 export class InfoCardModel {
-  // 自定义组件名称，用于标识组件的唯一性
-  cmpType = 'info-card';
+  /**
+   * cmpType 为自定义组件名称，用于标识组件的唯一性
+   * 在构建时根据当前组件目录名称自动生成
+   */
+  // cmpType: string = 'info-card';
 
   // 组件名称，用于设置在编辑器左侧组件面板中展示的名称
   label = '信息卡片';
@@ -76,6 +76,4 @@ export class InfoCardModel {
   */
 }
 
-registerNeoEditorModel(InfoCardModel);
-
 export default InfoCardModel;

package/src/template/react-ts-custom-cmp-template/README.md

@@ -1,14 +1,13 @@
 ### 目录说明
 - src: 自定义组件源码；
 - src/assets: 存放组件静态资源，比如 css、img等；
-- src/components: 存放自定义组件代码，每个自定义组件以自身名称作为目录进行存放；
-- src/components/info-card/index.tsx: 信息卡片自定义组件代码；
-- src/components/info-card/register.ts: 用于注册一个 neo 自定义组件，注册成功后编辑器画布区中才会正常展示自定义组件内容；
-- src/components/info-card/model.ts: 用于注册一个 neo-editor 自定义组件模型，注册成功后编辑器左侧组件面板中会展示；
+- src/components: 存放自定义组件代码，每个自定义组件以自身名称（cmpType 数值）作为目录进行存放；
+- src/components/info-card/index.tsx: 自定义组件的内容文件；
+- src/components/info-card/model.ts: 自定义组件的模型文件，用于对接页面设计器；
 - neo.config.js: neo-cmp-cli 配置文件。
 
 ### 组件开发规范
-- 存放在 src/components 目录下的自定义组件，默认 index 为自定义组件源码入口文件，register.[tj]s 为注册 Neo 组件的脚本文件，model.[tj]s 为自定义组件的描述文件（和页面设计器对接需要）；
+- 存放在 src/components 目录下的自定义组件，默认 index 为自定义组件源码入口文件，register.[tj]s 为注册 自定义组件的脚本文件，model.[tj]s 为自定义组件的模型文件（对接页面设计器需要）；
 - 当 neo.config.js 中的 entry 为空或者不存在时，cli 将根据 src/components 目录下的自定义组件结构生成对应的 entry 配置（可在命令控制台查看生成的 entry 配置）；
 - 自定义组件中可用的配置项类型 请见 [当前可用表单项](https://github.com/wibetter/neo-register/blob/master/docs/FormItemType.md)；
 - 自定义组件最外层请设置一个唯一的 ClassName（比如 xx-cmpType-container），所有内容样式请放在该 ClassName 中，避免自定义组件样式相互干扰；
@@ -17,6 +16,7 @@
 
 ### 自定义组件注册器使用说明
 - [neo-register 使用说明](https://www.npmjs.com/package/neo-register?activeTab=readme)
+备注：预览、调试（linkDebug）和构建发布时 cli 会自动创建对应的注册文件（含 neo-register 的使用），用户无需关注 neo-register。
 
 ### 开发说明
 

package/src/template/react-ts-custom-cmp-template/neo.config.js

@@ -36,12 +36,16 @@ module.exports = {
     projectDir: ['src'],
     // template: resolve('./public/template.html'), // 自定义html模板
     // plugins: [],
-    babelPlugins: [],
+    // babelPlugins: [],
   },
   preview: {
     // 用于开启本地预览模式的相关配置信息
     /*
     【特别说明】以下配置项都自带默认值，非必填。如需自定义请自行配置。
+    entry: { // 根据 src/components 目录下的文件自动生成 entry 相关配置
+      // 本地预览自定义组件内容
+      index: './src/preview.jsx',
+    },
     NODE_ENV: 'development',
     port: 80, // 设置基础端口，如果被占用则自动寻找可用端口
     assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
@@ -60,7 +64,7 @@ module.exports = {
     // 用于开启本地调试模式的相关配置信息
     /*
     【特别说明】以下配置项都自带默认值，非必填。如需自定义请自行配置。
-    entry: { // entry 会根据 src/components 目录下的文件自动生成
+    entry: { // 根据 src/components 目录下的文件自动生成 entry 相关配置
       // 外链调试（在线上页面设计器端预览自定义组件）
       index: [
         './src/components/info-card/register.ts',
@@ -86,7 +90,7 @@ module.exports = {
     /*
     【特别说明】以下配置项都自带默认值，非必填。如需自定义请自行配置。
     NODE_ENV: 'production',
-    entry: { // entry 未配置时，cli 会根据 src/components 目录下的文件自动生成对应的 entry
+    entry: { // 根据 src/components 目录下的文件自动生成 entry 相关配置
       InfoCardModel: './src/components/info-card/model.ts',
       infoCard: './src/components/info-card/register.ts'
     },

package/src/template/react-ts-custom-cmp-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ts-custom-cmp-template",
-  "version": "1.0.24",
+  "version": "1.1.0",
   "description": "neo自定义组件模板（react&ts技术栈）",
   "keywords": [
     "自定义组件模板",
@@ -10,7 +10,7 @@
   "author": "wibetter",
   "license": "MIT",
   "scripts": {
-    "preview": "neo preview",
+    "preview": "neo preview --cmpType=info-card",
     "linkDebug": "neo linkDebug",
     "publish2oss": "neo publish2oss",
     "format": "prettier --write \"src/**/**/*.{js,jsx,ts,tsx,vue,scss,json}\""
@@ -47,7 +47,7 @@
     "@commitlint/config-conventional": "^9.1.1",
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.9.15",
-    "neo-cmp-cli": "^1.0.15",
+    "neo-cmp-cli": "^1.1.0",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",
     "prettier": "^2.0.5"

package/src/template/react-ts-custom-cmp-template/src/components/info-card/model.ts

@@ -1,12 +1,12 @@
 /**
  * @file 自定义组件对接编辑器的描述文件
  */
-// @ts-ignore
-import { registerNeoEditorModel } from 'neo-register';
-
 export class InfoCardModel {
-  // 自定义组件名称，用于标识组件的唯一性
-  cmpType: string = 'info-card';
+  /**
+   * cmpType 为自定义组件名称，用于标识组件的唯一性
+   * 在构建时根据当前组件目录名称自动生成
+   */
+  // cmpType: string = 'info-card';
 
   // 组件名称，用于设置在编辑器左侧组件面板中展示的名称
   label: string = '信息卡片';
@@ -75,6 +75,4 @@ export class InfoCardModel {
   */
 }
 
-registerNeoEditorModel(InfoCardModel);
-
 export default InfoCardModel;

package/src/template/react-ts-custom-cmp-template/src/components/list-widget/model.ts

@@ -1,12 +1,12 @@
 /**
  * @file 列表组件对接编辑器的描述文件
  */
-// @ts-ignore
-import { registerNeoEditorModel } from 'neo-register';
-
 export class ListWidgetModel {
-  // 自定义组件名称，用于标识组件的唯一性
-  cmpType: string = 'list-widget';
+  /**
+   * cmpType 为自定义组件名称，用于标识组件的唯一性
+   * 在构建时根据当前组件目录名称自动生成
+   */
+  // cmpType: string = 'list-widget';
 
   // 组件名称，用于设置在编辑器左侧组件面板中展示的名称
   label: string = '列表组件';
@@ -87,6 +87,4 @@ export class ListWidgetModel {
   */
 }
 
-registerNeoEditorModel(ListWidgetModel);
-
 export default ListWidgetModel;

package/src/template/vue2-custom-cmp-template/README.md

@@ -1,10 +1,9 @@
 ### 目录说明
 - src: 自定义组件源码；
 - src/assets: 存放组件静态资源，比如 css、img等；
-- src/components: 存放自定义组件代码，每个自定义组件以自身名称作为目录进行存放；
-- src/components/info-card/index.vue: 信息卡片自定义组件代码；
-- src/components/info-card/register.js: 用于注册一个 neo 自定义组件，注册成功后编辑器画布区中才会正常展示自定义组件内容；
-- src/components/info-card/model.js: 用于注册一个 neo-editor 自定义组件模型，注册成功后编辑器左侧组件面板中会展示；
+- src/components: 存放自定义组件代码，每个自定义组件以自身名称（cmpType 数值）作为目录进行存放；
+- src/components/info-card/index.vue: 自定义组件的内容文件；
+- src/components/info-card/model.js: 自定义组件的模型文件，用于对接页面设计器；
 - neo.config.js: neo-cmp-cli 配置文件。
 
 ### 组件开发规范
@@ -17,6 +16,7 @@
 
 ### 自定义组件注册器使用说明
 - [neo-register 使用说明](https://www.npmjs.com/package/neo-register?activeTab=readme)
+备注：预览、调试（linkDebug）和构建发布时 cli 会自动创建对应的注册文件（含 neo-register 的使用），用户无需关注 neo-register。
 
 ### 开发说明
 

package/src/template/vue2-custom-cmp-template/neo.config.js

@@ -73,8 +73,8 @@ module.exports = {
     entry: { // entry 未配置时，cli 会根据 src/components 目录下的文件自动生成对应的 entry
       // 外链调试（在线上页面设计器端预览自定义组件）
       index: [
-        './src/components/info-card/register.js',
-        './src/components/info-card/model.js',
+        './src/components/vue-info-card/register.js',
+        './src/components/vue-info-card/model.js',
       ],
     },
     NODE_ENV: 'development',
@@ -100,8 +100,8 @@ module.exports = {
     【特别说明】以下配置项都自带默认值，非必填。如需自定义请自行配置。
     NODE_ENV: 'production',
     entry: { // entry 会根据 src/components 目录下的文件自动生成
-      InfoCardModel: './src/components/info-card/model.ts',
-      infoCard: './src/components/info-card/register.ts'
+      InfoCardModel: './src/components/vue-info-card/model.ts',
+      infoCard: './src/components/vue-info-card/register.ts'
     },
     cssExtract: false, // 不额外提取css文件
     ossType: 'ali', // oss类型：ali、baidu

package/src/template/vue2-custom-cmp-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-custom-cmp-template",
-  "version": "1.1.2",
+  "version": "1.0.1",
   "description": "neo自定义组件模板（vue2.0技术栈）",
   "keywords": [
     "自定义组件模板",
@@ -10,7 +10,7 @@
   "author": "wibetter",
   "license": "MIT",
   "scripts": {
-    "preview": "neo preview",
+    "preview": "neo preview --cmpType=info-card",
     "linkDebug": "neo linkDebug",
     "publish2oss": "neo publish2oss",
     "format": "prettier --write \"src/**/**/*.{js,jsx,ts,tsx,vue,scss,json}\""
@@ -44,13 +44,12 @@
   "devDependencies": {
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^9.1.1",
-    "neo-cmp-cli": "^1.0.15",
+    "neo-cmp-cli": "^1.1.0",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",
     "prettier": "^2.0.5",
     "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "babel-plugin-component": "^1.1.1"
+    "react-dom": "^16.9.0"
   },
   "engines": {
     "node": ">= 10.13.0",

package/src/template/vue2-custom-cmp-template/src/{widgets/info-card → components/vue-info-card}/model.js

@@ -1,12 +1,12 @@
 /**
  * @file 自定义组件对接编辑器的描述文件
  */
-// @ts-ignore
-import { registerNeoEditorModel } from 'neo-register';
-
 export class InfoCardModel {
-  // 自定义组件名称，用于标识组件的唯一性
-  cmpType = 'vue-info-card';
+  /**
+   * cmpType 为自定义组件名称，用于标识组件的唯一性
+   * 在构建时根据当前组件目录名称自动生成
+   */
+  // cmpType: string = 'vue-info-card';
 
   // 组件名称，用于设置在编辑器左侧组件面板中展示的名称
   label = 'vue 信息卡片';
@@ -76,6 +76,4 @@ export class InfoCardModel {
   */
 }
 
-registerNeoEditorModel(InfoCardModel);
-
 export default InfoCardModel;

package/src/utils/webpack.mf.js

@@ -51,7 +51,7 @@ const MFPlugins = [
       neoreact: 'neoreact@[window.neoEntrys.neoreact]'
     }
   }),
-  new ExternalTemplateRemotesPlugin(),
+  new ExternalTemplateRemotesPlugin()
 ];
 
 module.exports = {

package/test/demo.js

@@ -1,5 +1,10 @@
-const {neoInit, neoConfigInit, inspect, preview, debug, build2lib, build2esm, neoInitByCopy, previewCmp} = require('../src/module/main');
+const {neoInit, neoConfigInit, inspect, preview, debug, build2lib, build2esm, neoInitByCopy, previewCmp, } = require('../src/module/main');
+const getEntries = require('../src/cmpUtils/getEntries');
+const getEntriesWithAutoRegister = require('../src/cmpUtils/getEntriesWithAutoRegister');
 // inspect('dev');
 // neoInitByCopy('react-ts', 'test123');
 
-// previewCmp('info-card');
+// previewCmp('info-card');
+
+// const entries = getEntriesWithAutoRegister('linkDebug');
+// console.log(entries);

package/src/template/react-custom-cmp-template/src/components/info-card/register.js

@@ -1,4 +0,0 @@
-import InfoCard from './index';
-import { registerNeoCmp } from 'neo-register';
-
-registerNeoCmp(InfoCard, 'info-card');

package/src/template/react-ts-custom-cmp-template/src/components/info-card/register.ts

@@ -1,5 +0,0 @@
-// @ts-ignore
-import { registerNeoCmp } from 'neo-register';
-import InfoCard from './index';
-
-registerNeoCmp(InfoCard, 'info-card');

package/src/template/react-ts-custom-cmp-template/src/components/list-widget/register.ts

@@ -1,5 +0,0 @@
-// @ts-ignore
-import { registerNeoCmp } from 'neo-register';
-import ListWidget from './index';
-
-registerNeoCmp(ListWidget, 'list-widget');

package/src/template/vue2-custom-cmp-template/src/widgets/info-card/register.js

@@ -1,8 +0,0 @@
-import InfoCard from './index';
-// @ts-ignore
-import { registerNeoCmp } from 'neo-register';
-
-/* 引入公共的静态资源 */
-// import '$public/css/base.css'; // 备注: 全局样式要注意不要干扰平台和编辑器端的正常展示
-
-registerNeoCmp(InfoCard, 'vue-info-card');

package/src/utils/getCmpPreview.js

@@ -1,26 +0,0 @@
-const { resolveToCurrentRoot } = require('./pathUtils');
-
-const getCmpPreview = (cmpsDir,cmpName) => {
-  const cpmDir = resolveToCurrentRoot(`${cmpsDir}/${cmpName}`);
-  const cpmModelDir = resolveToCurrentRoot(`${cmpsDir}/${cmpName}/model`);
-  return `
-import * as React from 'react';
-import ReactDOM from 'react-dom';
-import CustomCmp from '${cpmDir}';
-import CustomCmpModel from '${cpmModelDir}';
-
-// 获取组件模型中的默认属性
-const curDefaultComProps = new CustomCmpModel().defaultComProps;
-
-/* 引入公共的静态资源 */
-import '$public/css/base.css';
-
-// 预览 自定义组件
-ReactDOM.render(
-  <CustomCmp {...curDefaultComProps} />,
-  document.getElementById('root'),
-);
-  `;
-}
-
-module.exports = getCmpPreview;