neo-cmp-cli 1.1.8 → 1.1.9

package/package.json

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

package/src/cmpUtils/createCommonModulesCode.js

@@ -0,0 +1,61 @@
+const fs = require('fs');
+const { resolveToCurrentRoot } = require('../utils/pathUtils');
+const { isPlainObject } = require('lodash');
+
+/**
+ * 获取组件预览代码
+ * @param {*} cmpsDir 自定义组件目录
+ * @param {*} cmpName 自定义组件名称
+ * @returns 组件预览代码
+ */
+const createCommonModulesCode = (neoExports) => {
+  if (!neoExports) {
+    return '';
+  }
+  const CustomCmpCommonModules = {};
+
+  // 根据 neoExports 获取共享的依赖模块
+  if (Array.isArray(neoExports) && neoExports.length > 0) {
+    neoExports.forEach(module => {
+      CustomCmpCommonModules[module] = require(module);
+    });
+  } else if (isPlainObject(neoExports)) {
+    CustomCmpCommonModules = Object.assign(CustomCmpCommonModules, neoExports);
+  } else {
+    console.error('neoExports 格式不正确，请检查 neo.config.js 文件中的 neoCommonModule / neoExports 配置');
+    process.exit(1);
+    return '';
+  }
+
+  const commonModulesCode = `
+/**
+ * 自定义组件 共享出来的依赖模块
+ * 备注：可在其他模块中通过 neoRequire 中使用
+ */
+const CustomCmpCommonModules = ${JSON.stringify(CustomCmpCommonModules)};
+
+// 用于添加共享的依赖模块
+const addNeoCommonModules = (modules) => {
+  if (!window.__NeoCommonModules) {
+    window.__NeoCommonModules = {};
+  }
+  window.__NeoCommonModules = Object.assign(window.__NeoCommonModules, modules);
+};
+
+addNeoCommonModules(CustomCmpCommonModules);
+  `;
+
+  // 创建存放 cli 的临时目录
+  const cliTempDir = resolveToCurrentRoot('./.neo-cli');
+  if (!fs.existsSync(cliTempDir)) {
+    fs.mkdirSync(cliTempDir);
+  }
+
+  // 将 commonModulesCode 写入到临时目录中
+  const commonModulesFilePath = `${cliTempDir}/commonModules.js`;
+  fs.writeFileSync(commonModulesFilePath, commonModulesCode);
+
+  return commonModulesFilePath;
+};
+
+module.exports = createCommonModulesCode;

package/src/cmpUtils/getCmpPreview.js

@@ -35,13 +35,15 @@ import CustomCmpModel from '${cpmModelDir}';
 
 // 获取组件模型中的默认属性
 const curDefaultComProps = new CustomCmpModel().defaultComProps;
+const previewComProps = new CustomCmpModel().previewComProps;
+const curPreviewComProps = Object.assign(curDefaultComProps, previewComProps);
 
 /* 引入公共的静态资源 */
 import '$public/css/base.css';
 
 // 预览 自定义组件
 ReactDOM.render(
-  <CustomCmp {...curDefaultComProps} />,
+  <CustomCmp {...curPreviewComProps} />,
   document.getElementById('root'),
 );
   `;

package/src/module/index.js

@@ -71,6 +71,16 @@ yargs
             value: 'antd',
             short: 'antd'
           },
+          {
+            name: 'echarts 自定义组件',
+            value: 'echarts',
+            short: 'echarts'
+          },
+          {
+            name: 'Neo 自定义组件',
+            value: 'neo',
+            short: 'neo'
+          },
           {
             name: 'react 自定义组件',
             value: 'react',

package/src/module/main.js

@@ -14,11 +14,18 @@ const previewCmp = require('./previewCmp');
 const AddNeoRequirePlugin = require('../plugins/AddNeoRequirePlugin');
 const { getExternalsByNeoCommonModules } = require('../neo/neoRequire');
 // const { MFPlugins } = require('../utils/webpack.mf');
+const createCommonModulesCode = require('../cmpUtils/createCommonModulesCode');
 
 const getValue = (originValue, defaultValue) => {
   return originValue !== undefined ? originValue : defaultValue;
 };
 
+const neoCommonModule = curConfig.neoCommonModule || {};
+// 自定义组件 共享出来的依赖模块
+const cmpNeoExports = neoCommonModule.neoExports || [];
+// 自定义组件 需要剔除的依赖模块
+const cmpNeoExternals = neoCommonModule.neoExternals || [];
+
 module.exports = {
   neoInit,
   neoInitByCopy,
@@ -111,16 +118,24 @@ module.exports = {
     }
 
     // 添加 内置 Neo 的 externals 配置
-    const neoExternals = getExternalsByNeoCommonModules();
-    if (
-      curConfig.dev.externals &&
-      _.isPlainObject(curConfig.dev.externals)
-    ) {
+    const neoExternals = getExternalsByNeoCommonModules(cmpNeoExternals);
+    if (curConfig.dev.externals && _.isPlainObject(curConfig.dev.externals)) {
       curConfig.dev.externals = Object.assign(curConfig.dev.externals, neoExternals);
     } else {
       curConfig.dev.externals = neoExternals;
     }
 
+    if (cmpNeoExports && Array.isArray(cmpNeoExports) && cmpNeoExports.length > 0) {
+      const commonModulesFilePath = createCommonModulesCode(cmpNeoExports);
+
+      // 所有入口文件添加 commonModulesFile
+      if (curConfig.dev.entry) {
+        Object.keys(curConfig.dev.entry).forEach((name) => {
+          webpackDevConfig.entry[name] = [commonModulesFilePath].concat(webpackDevConfig.entry[name]);
+        });
+      }
+    }
+
     akfun.dev(curConfig, consoleTag);
   },
   build: () => akfun.build('build', curConfig, consoleTag), // 构建脚本：生产环境
@@ -214,16 +229,24 @@ module.exports = {
     }
 
     // 添加 内置 Neo 的 externals 配置
-    const neoExternals = getExternalsByNeoCommonModules();
-    if (
-      curConfig.build2lib.externals &&
-      _.isPlainObject(curConfig.dev.externals)
-    ) {
+    const neoExternals = getExternalsByNeoCommonModules(cmpNeoExternals);
+    if (curConfig.build2lib.externals && _.isPlainObject(curConfig.dev.externals)) {
       curConfig.build2lib.externals = Object.assign(curConfig.build2lib.externals, neoExternals);
     } else {
       curConfig.build2lib.externals = neoExternals;
     }
 
+    if (cmpNeoExports && Array.isArray(cmpNeoExports) && cmpNeoExports.length > 0) {
+      const commonModulesFilePath = createCommonModulesCode(cmpNeoExports);
+
+      // 所有入口文件添加 commonModulesFile
+      if (curConfig.dev.entry) {
+        Object.keys(curConfig.dev.entry).forEach((name) => {
+          webpackDevConfig.entry[name] = [commonModulesFilePath].concat(webpackDevConfig.entry[name]);
+        });
+      }
+    }
+
     akfun.build('lib', curConfig, consoleTag, () => {
       // 构建完成后，执行 publish2oss
       publish2oss(

package/src/module/neoInitByCopy.js

@@ -16,6 +16,14 @@ const templateList = {
     projectName: 'antd-custom-cmp-template',
     dir: path.resolve(__dirname, '../template/antd-custom-cmp-template')
   },
+  echarts: {
+    projectName: 'echarts-custom-cmp-template',
+    dir: path.resolve(__dirname, '../template/echarts-custom-cmp-template')
+  },
+  'neo': {
+    projectName: 'neo-custom-cmp-template',
+    dir: path.resolve(__dirname, '../template/neo-custom-cmp-template')
+  },
   vue2: {
     projectName: 'vue2-custom-cmp-template',
     dir: path.resolve(__dirname, '../template/vue2-custom-cmp-template')

package/src/neo/neoRequire.js

@@ -1,3 +1,5 @@
+const _ = require('lodash');
+
 // Neo 共享出来的依赖模块
 const NeoCommonModules = {
   react: '^16.13.1',
@@ -13,15 +15,25 @@ const NeoCommonModules = {
   axios: '^0.27.2',
   classnames: '^2.3.2',
   qs: '^6.11.0',
-  lodash: '^4.17.21'
+  lodash: '^4.17.21',
+  'neo-ui-component-web': '^1.0.0',
+  'neo-ui-common': '^1.0.0'
 };
 
 // 根据 Neo 共享出来的依赖模块，获取 externals 配置
-const getExternalsByNeoCommonModules = () => {
+const getExternalsByNeoCommonModules = (cmpNeoExternals) => {
   const neoExternals = {};
   Object.keys(NeoCommonModules).forEach(moduleName => {
     neoExternals[moduleName] = `commonjs ${moduleName}`;
   });
+
+  // 如果自定义组件有共享的依赖模块，则合并到 neoExternals 中
+  if (cmpNeoExternals && _.isPlainObject(cmpNeoExternals) && Object.keys(cmpNeoExternals).length > 0) {
+    Object.keys(cmpNeoExternals).forEach(moduleName => {
+      neoExternals[moduleName] = `commonjs ${moduleName}`;
+    });
+  }
+  
   return neoExternals;
 };
 

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

@@ -38,6 +38,12 @@ module.exports = {
     // plugins: [],
     // babelPlugins: [],
   },
+  // Neo 共享依赖模块
+  neoCommonModule: {
+    // neoExports: ['echarts'], // 自定义组件 共享出来的模块，支持数组和对象
+    // neoExports: {},
+    neoExternals: ['neo-register'], // 自定义组件 需要剔除的模块，仅支持数组写法
+  },
   preview: {
     // 用于开启本地预览模式的相关配置信息
     /*

package/src/template/antd-custom-cmp-template/src/components/data-dashboard/model.ts

@@ -54,8 +54,8 @@ export class DataDashboardModel {
       options: [
         { label: '渐变主题', value: 'gradient' },
         { label: '深色主题', value: 'dark' },
-        { label: '浅色主题', value: 'light' }
-      ]
+        { label: '浅色主题', value: 'light' },
+      ],
     },
     {
       type: 'switch',