neo-cmp-cli 1.0.0

package/src/module/index.js

@@ -0,0 +1,244 @@
+const figlet = require('figlet'); // 用于输出图形文字
+const yargs = require('yargs'); // 命令行工具
+const chalk = require('chalk'); // 带样式的log输出
+const inquirer = require('inquirer'); // 问答式交互
+
+const neoInit = require('./neoInit.js');
+const neoInitByCopy = require('./neoInitByCopy.js');
+const inspect = require('./inspect.js'); // 输出当前项目配置文件
+const neoConfigInit = require('../utils/neoConfigInit.js');
+const { validateProjectName } = require('../utils/projectNameValidator.js');
+const mainAction = require('./main.js'); // 入口文件
+
+// neo 的 package 文件
+const neoPackage = require('../../package.json');
+
+const titleTip = function (msg) {
+  return chalk.green(chalk.bold(msg));
+};
+
+const bigTip = figlet.textSync('neo', {
+  font: 'Lean'
+});
+
+console.log(chalk.green(bigTip));
+console.log(chalk.green(`当前版本：v${neoPackage.version}.\n`));
+
+yargs
+  .command(
+    'init [options]',
+    '创建一个自定义组件',
+    (yargs) => {
+      yargs
+        .reset()
+        .usage(titleTip('Usage') + ': $0 init [options]')
+        .option('type', {
+          alias: 't',
+          describe: '自定义组件类型（react ts 技术栈/ vue2.0 技术栈/ react 技术栈)'
+        })
+        .option('name', {
+          alias: 'n',
+          describe: '自定义组件项目名称'
+        })
+        /*
+        // 暂不提供 github 下载模式（网络原因，下载速度慢）
+        .option('mode', {
+          alias: 'm',
+          describe: '自定义组件下载模式（github / copy）',
+          default: 'copy'
+        })
+        */
+        .alias('h', 'help');
+    },
+    (argv) => {
+      if (argv.type && argv.name) {
+        if (argv.mode === 'github') {
+          neoInit(argv.type, argv.name);
+        } else {
+          neoInitByCopy(argv.type, argv.name);
+        }
+      } else {
+        const questions = [];
+        // 初始化项目模板时，当用户未设置项目类型type时，以列表形式展示当前可以使用的项目模板
+        const neoWidgetTemplates = [
+          {
+            name: 'react&ts 自定义组件',
+            value: 'react-ts',
+            short: 'react-ts'
+          },
+          {
+            name: 'react 自定义组件',
+            value: 'react',
+            short: 'react'
+          },
+          {
+            name: 'vue2 自定义组件',
+            value: 'vue2',
+            short: 'vue2'
+          }
+          /*
+          {
+            name: 'vue3 自定义组件',
+            value: 'vue3',
+            short: 'vue3'
+          }
+          */
+        ];
+
+        if (!argv.type) {
+          questions.push({
+            name: 'type',
+            type: 'list',
+            message: '请选择您要创建的自定义组件类型: ',
+            default: 'react-ts',
+            choices: neoWidgetTemplates
+          });
+        }
+        // 当用户未设置存放项目的目录地址时，提示用户
+        if (!argv.name) {
+          questions.push({
+            name: 'name',
+            type: 'input',
+            message: '请设置自定义组件项目名称（默认 neoCustomWidget）:',
+            default: 'neoCustomWidget'
+          });
+        }
+        inquirer.prompt(questions).then((ans) => {
+          // 验证项目名称是否合法
+          const { isValid, errors } = validateProjectName(ans.name);
+          if (!isValid) {
+            console.error(errors.join('\n'));
+            process.exit(1);
+          }
+
+          if (argv.mode === 'github') {
+            neoInit(ans.type, ans.name);
+          } else {
+            neoInitByCopy(ans.type, ans.name);
+          }
+        });
+      }
+    }
+  )
+  .command(
+    'config init',
+    '初始化 neo 配置文件',
+    (yargs) => {
+      yargs
+        .reset()
+        .usage(titleTip('Usage') + ': $0 config init')
+        .alias('h', 'help');
+    },
+    () => {
+      neoConfigInit('neo.config.js');
+    }
+  )
+  .command(
+    'preview',
+    '开启组件预览模式（仅预览组件本身内容）',
+    (yargs) => {
+      yargs
+        .reset()
+        .usage(titleTip('Usage') + ': $0 dev')
+        .alias('h', 'help');
+    },
+    (argv) => {
+      mainAction.preview();
+    }
+  )
+  .command(
+    'linkDebug',
+    '开启外链调试模式（在线上页面设计器端调试）',
+    (yargs) => {
+      yargs
+        .reset()
+        .usage(titleTip('Usage') + ': $0 dev')
+        .alias('h', 'help');
+    },
+    (argv) => {
+      mainAction.linkDebug();
+    }
+  )
+  .command(
+    'build',
+    '构建生产环境代码',
+    (yargs) => {
+      yargs
+        .reset()
+        .usage(titleTip('Usage') + ': $0 build')
+        .alias('h', 'help');
+    },
+    (argv) => {
+      mainAction.build();
+    }
+  )
+  .command(
+    'build2lib',
+    '构建lib库',
+    (yargs) => {
+      yargs
+        .reset()
+        .usage(titleTip('Usage') + ': $0 build2lib')
+        .alias('h', 'help');
+    },
+    (argv) => {
+      mainAction.build2lib(); // 构建library
+    }
+  )
+  .command(
+    'publish2oss',
+    '发布到oss',
+    (yargs) => {
+      yargs
+        .reset()
+        .usage(titleTip('Usage') + ': $0 build2lib')
+        .alias('h', 'help');
+    },
+    (argv) => {
+      mainAction.publish2oss(); // 构建并发布脚本到oss
+    }
+  )
+  .command(
+    'build2esm',
+    '构建esm模块',
+    (yargs) => {
+      yargs
+        .reset()
+        .usage(titleTip('Usage') + ': $0 build2esm')
+        .option('fileName', {
+          alias: 'n',
+          describe: '输出的文件名',
+          default: ''
+        })
+        .alias('h', 'help');
+    },
+    (argv) => {
+      mainAction.build2esm(argv.fileName); // 构建esm
+    }
+  )
+  .command(
+    'inspect',
+    '输出当前配置文件',
+    (yargs) => {
+      yargs
+        .reset()
+        .usage(titleTip('Usage') + ': $0 inspect')
+        .option('type', {
+          alias: 't',
+          describe: '环境类型（本地调试环境/生产环境/library构建环境）',
+          default: 'build'
+        })
+        .alias('h', 'help');
+    },
+    (argv) => {
+      inspect(argv.type);
+    }
+  )
+  .alias('h', 'help')
+  .alias('v', 'version')
+  .help()
+  .updateStrings({
+    'Usage:': titleTip('Usage:'),
+    'Commands:': titleTip('Commands:'),
+    'Options:': titleTip('Options:')
+  }).argv;

package/src/module/inspect.js

@@ -0,0 +1,40 @@
+const path = require('path');
+const ora = require('ora');
+const fs = require('fs');
+const { getCurWebpackConfig } = require('akfun'); // 用于获取当前webpack配置的方法
+const curConfig = require('../config/index');
+const { consoleTag } = require('../utils/neoParams'); // 输出标记
+
+// 根据当前配置文件内容创建指定名称的文件
+const createConfigJs = function (fileName, fileCont) {
+  let filePath = path.resolve(process.cwd(), fileName);
+
+  fs.writeFile(filePath, JSON.stringify(fileCont, null, 2), (err) => {
+    if (err) {
+      throw Error(err);
+    }
+  });
+};
+
+/**
+ * 用于输出当前项目配置文件
+ */
+module.exports = (type) => {
+  const spinner = ora(`${consoleTag}正在获取当前环境的配置数据...`).start();
+  if (type === 'dev') {
+    const devConfig = getCurWebpackConfig(type, curConfig);
+    createConfigJs('current-neo-dev-config.js', devConfig);
+    spinner.succeed(`${consoleTag}当前配置数据已输出至 current-neo-dev-config.js中。`);
+  } else if (type === 'lib') {
+    const libraryConfig = getCurWebpackConfig(type, curConfig);
+    createConfigJs('current-neo-build2lib-config.js', libraryConfig);
+    spinner.succeed(`${consoleTag}当前配置数据已输出至 current-neo-build2lib-config.js中。`);
+  } else if (type === 'build') {
+    const prodConfig = getCurWebpackConfig(type, curConfig);
+    // 默认输出生产环境的配置文件
+    createConfigJs('current-neo-build-config.js', prodConfig);
+    spinner.succeed(`${consoleTag}当前配置数据已输出至 current-neo-build-config.js。`);
+  } else {
+    spinner.fail(`type 不能为空。`);
+  }
+};

package/src/module/main.js

@@ -0,0 +1,109 @@
+const akfun = require('akfun');
+const path = require('path');
+const neoInit = require('./neoInit');
+const neoInitByCopy = require('./neoInitByCopy');
+const inspect = require('./inspect');
+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 getValue = (originValue, defaultValue) => {
+  return originValue !== undefined ? originValue : defaultValue;
+};
+
+module.exports = {
+  neoInit,
+  neoInitByCopy,
+  inspect,
+  neoConfigInit,
+  preview: () => {
+    // 预览组件本身内容
+    if (!curConfig.preview) {
+      console.error('未找到 preview 相关配置。');
+      process.exit(1);
+    }
+    curConfig.dev = Object.assign(curConfig.dev, curConfig.preview); // 将 preview 设置给 dev
+    delete curConfig.preview;
+
+    akfun.dev(curConfig, consoleTag);
+  },
+  linkDebug: () => {
+    // 外链调试模式
+    if (!curConfig.linkDebug) {
+      console.error('未找到 debug 相关配置。');
+      process.exit(1);
+    }
+    // 将 linkDebug 设置给 dev
+    curConfig.dev = Object.assign(curConfig.dev, curConfig.linkDebug);
+
+    delete curConfig.linkDebug;
+
+    delete curConfig.dev.ignoreNodeModules; // 需要注入依赖
+    curConfig.webpack.ignoreNodeModules = false;
+
+    const curEntry = curConfig.dev.entry;
+
+    if (!curEntry || Object.keys(curEntry).length === 0) {
+      // 如果未配置 entry，则自动生成 entry
+      const entries = getEntries('linkDebug', curConfig.componentsDir);
+      if (entries && Object.keys(entries).length > 0) {
+        curConfig.dev.entry = entries;
+        console.info('已自动生成 entry 入口配置：', entries);
+      } else {
+        console.error('未找到自定义组件，请检查 neo.config.js 中的 linkDebug / entry 配置。');
+        process.exit(1);
+      }
+    }
+
+    akfun.dev(curConfig, consoleTag);
+  },
+  build: () => akfun.build('build', curConfig, consoleTag), // 构建脚本：生产环境
+  build2lib: () => {
+    const curEntry = curConfig.build2lib.entry;
+
+    if (!curEntry || Object.keys(curEntry).length === 0) {
+      // 如果未配置 entry，则自动生成 entry
+      const entries = getEntries('build2lib', curConfig.componentsDir);
+      if (entries && Object.keys(entries).length > 0) {
+        curConfig.build2lib.entry = entries;
+        console.info('已自动生成 entry 入口配置：', entries);
+      } else {
+        console.error('未找到自定义组件，请检查 neo.config.js 中的 build2lib / entry 配置。');
+        process.exit(1);
+      }
+    }
+
+    akfun.build('lib', curConfig, consoleTag);
+  }, // 构建脚本：生产环境
+  publish2oss: () => {
+    // 将 publish2oss 相关配置设置给 build2lib
+    const publish2ossConfig = curConfig.publish2oss;
+    curConfig.build2lib = Object.assign(curConfig.build2lib, publish2ossConfig);
+
+    const curEntry = curConfig.build2lib.entry;
+
+    if (!curEntry || Object.keys(curEntry).length === 0) {
+      // 如果未配置 entry，则自动生成 entry
+      const entries = getEntries('build2lib', curConfig.componentsDir);
+      if (entries && Object.keys(entries).length > 0) {
+        curConfig.build2lib.entry = entries;
+        console.info('已自动生成 entry 入口配置：', entries);
+      } else {
+        console.error('未找到自定义组件，请检查 neo.config.js 中的 publish2oss / entry 配置。');
+        process.exit(1);
+      }
+    }
+
+    akfun.build('lib', curConfig, consoleTag, () => {
+      // 构建完成后，执行 publish2oss
+      publish2oss(
+        publish2ossConfig.ossType,
+        publish2ossConfig.ossConfig,
+        publish2ossConfig.assetsRoot
+      );
+    });
+  },
+  build2esm: (fileName) => akfun.build2esm(fileName, curConfig, consoleTag) // 构建esm输出模块
+};

package/src/module/neoInit.js

@@ -0,0 +1,44 @@
+const { gitClone } = require('akfun');
+const { consoleTag } = require('../utils/neoParams'); // 输出标记
+const { replaceInPackage } = require('../utils/replaceInPackage');
+
+const templateList = {
+  react: {
+    projectName: 'react-custom-widget-template',
+    url: 'git@github.com:wibetter/react-custom-widget-template.git'
+  },
+  'react-ts': {
+    projectName: 'react-ts-custom-widget-template',
+    url: 'git@github.com:wibetter/react-ts-custom-widget-template.git'
+  },
+  vue2: {
+    projectName: 'vue2-neo-custom-widget',
+    url: 'git@github.com:wibetter/vue2-neo-custom-widget.git'
+  }
+  /*
+  'vue3': {
+    projectName: 'vue3-neo-custom-widget',
+    url: 'git@github.com:wibetter/vue3-neo-custom-widget.git'
+  }
+  */
+};
+
+const neoInit = function (type, projectName) {
+  const currentTemplate = templateList[type || 'react'];
+  const currentTemplateUrl = currentTemplate.url;
+  const finalProjectName = projectName || 'neoCustomWidget';
+
+  gitClone(
+    currentTemplateUrl,
+    finalProjectName,
+    () => {
+      // 克隆完成后，替换项目名称
+      replaceInPackage(finalProjectName, currentTemplate.projectName, finalProjectName);
+      replaceInPackage(finalProjectPath, 'wibetter', 'xxx');
+      replaceInPackage(finalProjectPath, 'neo自定义组件模板', 'neo自定义组件');
+    },
+    consoleTag
+  );
+};
+
+module.exports = neoInit;

package/src/module/neoInitByCopy.js

@@ -0,0 +1,37 @@
+const fs = require('fs-extra');
+const path = require('path');
+const { consoleTag } = require('../utils/neoParams'); // 输出标记
+const { replaceInPackage } = require('../utils/replaceInPackage');
+
+const templateList = {
+  react: {
+    projectName: 'react-custom-widget-template',
+    dir: path.resolve(__dirname, '../template/react-custom-widget-template')
+  },
+  'react-ts': {
+    projectName: 'react-ts-custom-widget-template',
+    dir: path.resolve(__dirname, '../template/react-ts-custom-widget-template')
+  },
+  vue2: {
+    projectName: 'vue2-neo-custom-widget',
+    dir: path.resolve(__dirname, '../template/vue2-neo-custom-widget')
+  }
+};
+
+const neoInitByCopy = function (type, projectName) {
+  const currentTemplate = templateList[type || 'react'];
+  const currentTemplateDir = currentTemplate.dir;
+  const finalProjectName = projectName || 'neoCustomWidget';
+  const finalProjectPath = path.resolve(process.cwd(), finalProjectName);
+
+  fs.copy(currentTemplateDir, finalProjectPath)
+    .then(() => {
+      replaceInPackage(finalProjectPath, currentTemplate.projectName, finalProjectName);
+      replaceInPackage(finalProjectPath, 'wibetter', 'xxx');
+      replaceInPackage(finalProjectPath, 'neo自定义组件模板', 'neo自定义组件');
+      console.log(`${consoleTag}已创建自定义组件（${finalProjectName}）!`);
+    })
+    .catch((err) => console.error(`${consoleTag}自定义组件模板下载失败：`, err));
+};
+
+module.exports = neoInitByCopy;

package/src/oss/publish2oss.js

@@ -0,0 +1,218 @@
+const { aliBOS, baiduBOS } = require('akfun');
+const fs = require('fs');
+const path = require('path');
+const { catchCurPackageJson } = require('../utils/pathUtils');
+const getConfigObj = require('../utils/getConfigObj');
+
+// 获取当前项目的package文件
+const currentPackageJsonDir = catchCurPackageJson();
+const currentPackageJson = getConfigObj(currentPackageJsonDir);
+
+/**
+ * 将构建产物上传到指定 oss 存储桶
+ *
+ * @param {string} ossType  oss 类型：baidu、ali
+ * @param {object} ossConfig  oss 配置
+ * @param {string} assetsRoot 构建产物的目录
+ * @param {array} fileExtensions 需要上传的文件类型，默认 ['.js', '.css']
+ */
+const publish2oss = (ossType, ossConfig, assetsRoot, fileExtensions = ['.js', '.css']) => {
+  if (ossType !== 'baidu' && ossType !== 'ali') {
+    console.error(`不支持的oss类型: ${ossType}`);
+    return;
+  }
+  const bosClient = getBosClient(ossType, ossConfig);
+  if (!assetsRoot) {
+    console.error('assetsRoot 不能为空');
+    return;
+  }
+  if (!fs.existsSync(assetsRoot)) {
+    console.error(`assetsRoot 不存在: ${assetsRoot}`);
+    return;
+  }
+  const files = fs.readdirSync(assetsRoot); // 读取构建目录下的所有文件
+
+  // 并行上传所有指定类型的文件
+  const uploadPromises = files.map(async (file) => {
+    const filePath = path.join(assetsRoot, file);
+    // 获取文件状态
+    const fileStat = fs.statSync(filePath);
+    // 检查文件扩展名
+    // const fileExt = path.extname(file);
+    const fileInfo = path.parse(filePath);
+    if (fileStat.isFile() && fileExtensions.includes(fileInfo.ext)) {
+      const objectKey = addVersionToFilename(file);
+      try {
+        // 判断线上是否存在重名文件，避免被覆盖
+        const historyResult = await bosClient.get(objectKey);
+        if (historyResult && historyResult.url) {
+          return {
+            success: false,
+            status: '文件上传失败',
+            widgetName: fileInfo.name,
+            fileName: file,
+            filepath: filePath,
+            ossPath: historyResult.url,
+            error: '线上存在重名文件。'
+          };
+        }
+        // 上传文件
+        const result = await bosClient.upload(objectKey, filePath);
+        return {
+          success: true,
+          status: '文件上传成功',
+          fileName: file,
+          widgetName: fileInfo.name,
+          filepath: filePath,
+          ossPath: getFilePath(ossType, ossConfig.bucket, objectKey),
+          resultMsg: result
+        };
+      } catch (error) {
+        return {
+          success: false,
+          status: '文件上传失败',
+          widgetName: fileInfo.name,
+          fileName: file,
+          filepath: filePath,
+          error: error.message
+        };
+      }
+    }
+  });
+
+  Promise.all(uploadPromises)
+    .then((results) => {
+      /*
+      const { succeedFiles, errorFiles } = getResultFiles(results);
+      if (succeedFiles.length > 0) {
+        console.info('已成功上传如下文件：\n', succeedFiles);
+      }
+      if (errorFiles.length > 0) {
+        console.info('上传失败的文件有：\n', errorFiles);
+      }
+      */
+      const widgetFilesMap = getResultFilesByWidgetName(results);
+      if (widgetFilesMap) {
+        console.info('上传至 OSS 的文件信息：\n', widgetFilesMap);
+      }
+    })
+    .catch((error) => {
+      console.error('批量上传文件异常：\n', error);
+    });
+};
+
+// 根据 ossType 获取对应的 BosClient
+const getBosClient = (ossType, ossConfig) => {
+  if (ossType === 'baidu') {
+    return new baiduBOS(
+      ossConfig.endpoint,
+      ossConfig.bucket,
+      ossConfig.AccessKeyId || ossConfig.AccessKeyID || ossConfig.accessKeyId || ossConfig.accessKeyID,
+      ossConfig.AccessKeySecret
+    );
+  } else if (ossType === 'ali') {
+    return new aliBOS(
+      ossConfig.endpoint,
+      ossConfig.bucket,
+      ossConfig.AccessKeyId || ossConfig.AccessKeyID || ossConfig.accessKeyId || ossConfig.accessKeyID,
+      ossConfig.AccessKeySecret
+    );
+  }
+};
+
+const getFilePath = (ossType, bucket, objectKey) => {
+  const regions = {
+    baidu: 'bj.bcebos.com',
+    ali: 'oss-cn-beijing.aliyuncs.com'
+  };
+  return `https://${bucket}.${regions[ossType]}/${objectKey}`;
+};
+
+// 获取上传成功和失败的文件信息
+const getResultFiles = (files) => {
+  const succeedFiles = [];
+  const errorFiles = [];
+  files.forEach((file) => {
+    if (file && file.success) {
+      succeedFiles.push({
+        fileName: file.fileName,
+        ossPath: file.ossPath
+      });
+    } else if (file && !file.success) {
+      errorFiles.push({
+        fileName: file.fileName,
+        error: file.error,
+        ossPath: file.ossPath
+      });
+    }
+  });
+  return {
+    succeedFiles,
+    errorFiles
+  };
+};
+
+// 获取上传文件关键信息（文件名、oss路径）
+const getResultFile = (file) => {
+  if (file && file.success) {
+    return {
+      fileName: file.fileName,
+      ossPath: file.ossPath
+    };
+  } else if (file && !file.success) {
+    return {
+      error: file.error,
+      fileName: file.fileName,
+      ossPath: file.ossPath
+    };
+  }
+};
+
+// 按组件名称进行分类
+const getResultFilesByWidgetName = (files) => {
+  const widgetFilesMap = {};
+  files.forEach((file) => {
+    if (!file || !file.widgetName) {
+      return;
+    }
+    let widgetName = file.widgetName;
+    if (widgetName.includes('Plugin')) {
+      widgetName = widgetName.replace('Plugin', '');
+    }
+    if (widgetFilesMap[widgetName]) {
+      widgetFilesMap[widgetName].push(getResultFile(file));
+    } else {
+      widgetFilesMap[widgetName] = [getResultFile(file)];
+    }
+  });
+
+  return widgetFilesMap;
+};
+
+// 文件名中添加当前项目版本号
+function addVersionToFilename(filename, version = currentPackageJson.version) {
+  // 找到最后一个点的位置，用于分离文件名和扩展名
+  let lastDotIndex = filename.lastIndexOf('.umd');
+  if (lastDotIndex === -1) {
+    lastDotIndex = filename.lastIndexOf('.esm');
+  }
+  if (lastDotIndex === -1) {
+    lastDotIndex = filename.lastIndexOf('.lib');
+  }
+  if (lastDotIndex === -1) {
+    lastDotIndex = filename.lastIndexOf('.');
+  }
+  // 如果没有扩展名（没有点），直接在文件名后添加版本号
+  if (lastDotIndex === -1) {
+    return `${filename}-${version}`;
+  }
+
+  // 分离文件名的基础部分和扩展名
+  const baseName = filename.substring(0, lastDotIndex);
+  const extension = filename.substring(lastDotIndex);
+
+  // 组合新的文件名：基础名-版本号.扩展名
+  return `${baseName}-${version}${extension}`;
+}
+
+module.exports = publish2oss;

package/src/plugins/README.md

@@ -0,0 +1,2 @@
+# 存放 webpack 插件的地方
+暂时没有可用 plugin