neo-cmp-cli 1.0.13 → 1.0.16

package/README.md

@@ -54,7 +54,7 @@ npm i neo-cmp-cli --save-dev
 ```bash
 "preview": "neo preview",
 "linkDebug": "neo linkDebug",
-"build2lib": "neo build2lib"
+"publish2oss": "neo publish2oss"
 ```
 3) 初始化配置文件
 ```bash
@@ -64,7 +64,7 @@ neo config init
 ```bash
 npm run preview
 npm run linkDebug
-npm run build2lib
+npm run publish2oss
 ```
 
 ## 常用命令
@@ -90,7 +90,7 @@ module.exports = {
 }
 ```
 
-### 2) 构建入口（优先级：preview/linkDebug/build2lib.entry > webpack.entry）
+### 2) 构建入口（优先级：preview/linkDebug/build2lib/publish2oss.entry > webpack.entry）
 ```bash
 module.exports = {
   webpack: {
@@ -99,6 +99,7 @@ module.exports = {
   preview: { entry: {} },
   linkDebug: { entry: {} },
   build2lib: { entry: {} },
+  publish2oss: { entry: {} },
 }
 ```
 备注1: 当未配置 entry 时，cli 会自动根据 src/components 目录自动生成 entry 配置；   

package/package.json

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

package/src/module/index.js

@@ -133,6 +133,35 @@ yargs
       neoConfigInit('neo.config.js');
     }
   )
+  .command(
+    'preview [options]',
+    '预览指定自定义组件（仅预览组件本身内容）',
+    (yargs) => {
+      yargs
+        .reset()
+        .usage(titleTip('Usage') + ': $0 init [options]')
+        .option('cmpType', {
+          alias: 't',
+          describe: '自定义组件项目名称'
+        })
+        .alias('h', 'help');
+    },
+    (argv) => {
+      if (argv.cmpType) {
+        mainAction.previewCmp(argv.cmpType);
+      } else {
+        const questions = [{
+          name: 'cmpType',
+          type: 'input',
+          message: '请输入要预览的自定义组件名称（默认 info-card）:',
+          default: 'info-card'
+        }];
+        inquirer.prompt(questions).then((ans) => {
+          mainAction.previewCmp(ans.cmpType);
+        });
+      }
+    }
+  )
   .command(
     'preview',
     '开启组件预览模式（仅预览组件本身内容）',
@@ -142,7 +171,7 @@ yargs
         .usage(titleTip('Usage') + ': $0 dev')
         .alias('h', 'help');
     },
-    (argv) => {
+    () => {
       mainAction.preview();
     }
   )

package/src/module/main.js

@@ -8,7 +8,8 @@ const { consoleTag } = require('../utils/neoParams');
 const curConfig = require('../config/index'); // 获取当前项目根目录下的配置文件
 const publish2oss = require('../oss/publish2oss');
 const getEntries = require('../utils/getEntries');
-const { MFPlugins } = require('../utils/webpack.mf');
+const previewCmp = require('./previewCmp');
+// const { MFPlugins } = require('../utils/webpack.mf');
 
 const getValue = (originValue, defaultValue) => {
   return originValue !== undefined ? originValue : defaultValue;
@@ -30,6 +31,21 @@ module.exports = {
 
     akfun.dev(curConfig, consoleTag);
   },
+  previewCmp: (cmpName) => {
+    // 预览组件本身内容
+    if (!cmpName) {
+      console.error('请输入要预览的组件名称。');
+      process.exit(1);
+    }
+    if (!curConfig.preview) {
+      console.error('未找到 preview 相关配置。');
+      process.exit(1);
+    }
+    curConfig.dev = Object.assign(curConfig.dev, curConfig.preview); // 将 preview 设置给 dev
+    delete curConfig.preview;
+
+    previewCmp(curConfig, cmpName);
+  },
   linkDebug: () => {
     // 外链调试模式
     if (!curConfig.linkDebug) {

package/src/module/previewCmp.js

@@ -0,0 +1,56 @@
+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);
+
+/**
+ * 用于预览指定自定义组件
+ */
+module.exports = (config, cmpName, defaultComponentsDir = './src/components') => {
+  const cmpsDir = config.componentsDir || defaultComponentsDir;
+  const curCmpsDir = resolveToCurrentRoot(cmpsDir);
+
+  if (!fs.existsSync(curCmpsDir)) {
+    console.error(`未找到组件目录，请检查 ${cmpsDir} 目录是否存在`);
+    process.exit(1);
+  }
+
+  // 判断当前自定义组件是否存在
+  const cpmDir = `${curCmpsDir}/${cmpName}`;
+  if (!fs.existsSync(cpmDir)) {
+    console.error(`${consoleTag}自定义组件 ${cmpName} 不存在。`);
+    process.exit(1);
+  }
+
+  // 创建存放预览文件的临时目录
+  const tempDir = path.resolve(__dirname, '../../temp');
+  if (!fs.existsSync(tempDir)) {
+    fs.mkdirSync(tempDir);
+  }
+  const tempCmpDir = `${tempDir}/${currentPackageJson.name}`;
+  if (!fs.existsSync(tempCmpDir)) {
+    fs.mkdirSync(tempCmpDir);
+  }
+
+  const cmpPreviewContent = getCmpPreview(cmpsDir, cmpName);
+  fs.writeFileSync(`${tempCmpDir}/preview.jsx`, cmpPreviewContent);
+
+  // 将临时预览文件添加到预览配置中
+  config.dev.entry['index'] = `${tempCmpDir}/preview.jsx`;
+  if (config.webpack.projectDir) {
+    config.webpack.projectDir.push(tempCmpDir);
+  } else {
+    config.webpack.projectDir = [tempCmpDir];
+  }
+
+  console.log(`${consoleTag}预览文件已保存至 ${tempCmpDir}/preview.jsx:`, config);
+
+  akfun.dev(config, consoleTag);
+};

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

@@ -44,7 +44,7 @@
   "devDependencies": {
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^9.1.1",
-    "neo-cmp-cli": "^1.0.13",
+    "neo-cmp-cli": "^1.0.15",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",
     "prettier": "^2.0.5"

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

@@ -1,11 +1,5 @@
 'use strict';
 const path = require('path');
-const webpack = require('webpack');
-const { ModuleFederationPlugin } = require('webpack').container;
-
-// 解析 webpack 模块联邦 remotes 中的变量
-const ExternalTemplateRemotesPlugin = require('external-remotes-plugin');
-
 
 // 统一路径解析
 function resolve(dir) {

package/src/template/react-ts-custom-cmp-template/package.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.13",
+    "neo-cmp-cli": "^1.0.15",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",
     "prettier": "^2.0.5"

package/src/template/react-ts-custom-cmp-template/src/preview.tsx

@@ -2,21 +2,16 @@ import * as React from 'react';
 import ReactDOM from 'react-dom';
 import InfoCard from './components/info-card';
 import ListWidget from './components/list-widget';
+import InfoCardModel from './components/info-card/model';
+
+const InfoCardDefaultComProps = new InfoCardModel().defaultComProps;
 
 /* 引入公共的静态资源 */
 import '$public/css/base.css';
 
 // 预览 info-card 组件
 ReactDOM.render(
-  <InfoCard
-    {...{
-      title:
-        'neo-widget是开发neo自定义组件的工具集，提供注册neo自定义组件和neo-editor自定义组件模型的方法。',
-      backgroundImage: '',
-      imgCount: 101,
-      commentCount: 2022,
-    }}
-  />,
+  <InfoCard {...InfoCardDefaultComProps} />,
   document.getElementById('root'),
 );
 

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

@@ -44,7 +44,7 @@
   "devDependencies": {
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^9.1.1",
-    "neo-cmp-cli": "^1.0.13",
+    "neo-cmp-cli": "^1.0.15",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",
     "prettier": "^2.0.5",

package/src/utils/getCmpPreview.js

@@ -0,0 +1,26 @@
+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;

package/test/demo.js

@@ -1,3 +1,5 @@
-const {neoInit, neoConfigInit, inspect, preview, debug, build2lib, build2esm, neoInitByCopy} = require('../src/module/main');
+const {neoInit, neoConfigInit, inspect, preview, debug, build2lib, build2esm, neoInitByCopy, previewCmp} = require('../src/module/main');
 // inspect('dev');
-neoInitByCopy('react-ts', 'test123');
+// neoInitByCopy('react-ts', 'test123');
+
+// previewCmp('info-card');

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

@@ -1,10 +0,0 @@
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true
-max_line_length = 80

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

@@ -1,10 +0,0 @@
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true
-max_line_length = 80

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

@@ -1,10 +0,0 @@
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true
-max_line_length = 80