neo-cmp-cli 1.1.7 → 1.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neo-cmp-cli",
-  "version": "1.1.7",
+  "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

@@ -66,6 +66,21 @@ yargs
             value: 'react-ts',
             short: 'react-ts'
           },
+          {
+            name: 'antd 自定义组件',
+            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,14 +229,22 @@ module.exports = {
     }
 
     // 添加 内置 Neo 的 externals 配置
-    const neoExternals = getExternalsByNeoCommonModules();
-    if (
-      curConfig.dev.externals &&
-      _.isPlainObject(curConfig.dev.externals)
-    ) {
-      curConfig.dev.externals = Object.assign(curConfig.dev.externals, neoExternals);
+    const neoExternals = getExternalsByNeoCommonModules(cmpNeoExternals);
+    if (curConfig.build2lib.externals && _.isPlainObject(curConfig.dev.externals)) {
+      curConfig.build2lib.externals = Object.assign(curConfig.build2lib.externals, neoExternals);
     } else {
-      curConfig.dev.externals = neoExternals;
+      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, () => {

package/src/module/neoInitByCopy.js

@@ -12,6 +12,18 @@ const templateList = {
     projectName: 'react-ts-custom-cmp-template',
     dir: path.resolve(__dirname, '../template/react-ts-custom-cmp-template')
   },
+  'antd': {
+    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/.prettierrc.js

@@ -0,0 +1,12 @@
+/*
+  prettier 配置文件
+  更多配置信息：https://prettier.io/docs/en/options.html
+ */
+module.exports = {
+  semi: true, // Semicolons 分号，默认需要分号
+  tabWidth: 2, // 空格，默认 2,
+  useTabs: false,
+  singleQuote: true, // 单引号还是双引号，默认为false 双引号
+  trailingComma: 'all', // 逗号
+  jsxBracketSameLine: false, // 默认为false，Put the > of a multi-line JSX element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).
+};

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

@@ -0,0 +1,47 @@
+### 目录说明
+- src: 自定义组件源码；
+- src/assets: 存放组件静态资源，比如 css、img等；
+- 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 为注册 自定义组件的脚本文件，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 中，避免自定义组件样式相互干扰；
+- 默认开启代码规范检测（含样式内容），如需关闭，请调整 neo.config.js 相关配置；
+- 请使用 react 16版本。
+
+### 自定义组件注册器使用说明
+- [neo-register 使用说明](https://www.npmjs.com/package/neo-register?activeTab=readme)
+备注：预览、调试（linkDebug）和构建发布时 cli 会自动创建对应的注册文件（含 neo-register 的使用），用户无需关注 neo-register。
+
+### 开发说明
+
+1. **安装依赖**
+```bash
+$ npm i 或者 yarn
+```
+
+2. **preview: 组件预览模式（带热更新）**
+> preview模式：用于预览自定义组件内容。
+```bash
+$ npm run preview
+```
+
+3. **linkDebug: 外链调试（在线上页面设计器端预览自定义组件）**
+> linkDebug模式：用于在线上页面设计器中预览和调试自定义组件。
+```bash
+$ npm run linkDebug
+```
+
+4. **发布到对象存储服务中**
+> 需要确保 package.json 中的 name 值唯一，version 值不重复。
+```bash
+$ npm run publish2oss
+```
+
+### 配置项说明（neo-cmp-cli）
+[请查看neo-cmp-cli](https://github.com/wibetter/neo-cmp-cli)

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

@@ -0,0 +1,59 @@
+/**
+ * https://www.npmjs.com/package/@commitlint/config-conventional\
+ *
+ * Git提交规范-配置文件
+ * Commit message 由Header、Body 和 Footer三个部分组成，其格式如下：
+ *  <type>(<scope>): <subject>
+ *  <BLANK LINE>
+ *   <body>
+ *  <BLANK LINE>
+ *  <footer>
+ *
+ *【备注】
+ * type 用于说明 commit 的类别，常用下面 7 个标识：
+ * scope 用于说明当前功能点作用于哪个页面或者哪个功能模块；
+ * subject 用于简短的描述当前commit，不超过50个字符；
+ * body 用于填写对本次 commit 的详细描述，可以分成多行；
+ * footer 不兼容变动声明，或者关闭 Issue。
+ *
+ * 【type类型取值类型】
+ * feat：新功能（feature）
+ * fix：功能优化
+ * bug：修补bug
+ * docs：文档（documentation）
+ * style：格式（不影响代码运行的变动）
+ * refactor：重构（即不是新增功能，也不是修改bug的代码变动）
+ * test：增加测试
+ * chore：构建过程或辅助工具的变动
+ * build：影响构建系统或外部依赖项的更改（示例范围：gulp，broccoli，npm）
+ * ci：对 CI 配置文件和脚本的更改（示例范围：Travis，Circle，BrowserStack，SauceLabs）
+ * perf：改进性能的代码更改
+ *
+ */
+
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'type-enum': [
+      2,
+      'always',
+      [
+        'feat',
+        'fix',
+        'bug',
+        'docs',
+        'style',
+        'refactor',
+        'test',
+        'chore',
+        'perf',
+        'build',
+        'ci',
+      ],
+    ],
+    'type-empty': [2, 'never'],
+    'scope-empty': [1, 'never'],
+    'subject-full-stop': [0, 'never'],
+    'subject-case': [0, 'never'],
+  },
+};

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

@@ -0,0 +1,115 @@
+'use strict';
+const path = require('path');
+
+// 统一路径解析
+function resolve(dir) {
+  return path.resolve(__dirname, dir);
+}
+
+// 包括生产和开发的环境配置信息
+module.exports = {
+  settings: {
+    enableESLint: true, // 调试模式是否开启ESLint，默认开启ESLint检测代码格式
+    enableESLintFix: true, // 是否自动修正代码格式，默认不自动修正
+    enableStyleLint: false, // 是否开启StyleLint，默认开启ESLint检测代码格式
+    enableStyleLintFix: false, // 是否需要StyleLint自动修正代码格式
+  },
+  webpack: {
+    target: ['web', 'es5'], // 指定目标环境为 web 和 es5，确保兼容性
+    resolve: {
+      // webpack的resolve配置
+      extensions: ['.js', '.jsx', '.ts', '.tsx', '.umd.js', '.min.js', '.json'], // 用于配置webpack在尝试过程中用到的后缀列表
+      alias: {
+        '@': resolve('src'),
+        $assets: resolve('src/assets'),
+        $public: resolve('public'),
+      },
+    },
+    // sassResources中的sass文件会自动注入每一个sass文件中
+    sassResources: [
+      resolve('./src/assets/css/common.scss'),
+      resolve('./src/assets/css/mixin.scss'),
+    ],
+    // createDeclaration: true, // 打包时是否创建ts声明文件
+    ignoreNodeModules: false, // 打包时是否忽略 node_modules
+    allowList: [], // ignoreNodeModules为true时生效
+    projectDir: ['src'],
+    // template: resolve('./public/template.html'), // 自定义html模板
+    // plugins: [],
+    // babelPlugins: [],
+  },
+  // Neo 共享依赖模块
+  neoCommonModule: {
+    // neoExports: ['echarts'], // 自定义组件 共享出来的模块，支持数组和对象
+    // neoExports: {},
+    neoExternals: ['neo-register'], // 自定义组件 需要剔除的模块，仅支持数组写法
+  },
+  preview: {
+    // 用于开启本地预览模式的相关配置信息
+    /*
+    【特别说明】以下配置项都自带默认值，非必填。如需自定义请自行配置。
+    entry: { // 根据 src/components 目录下的文件自动生成 entry 相关配置
+      // 本地预览自定义组件内容
+      index: './src/preview.jsx',
+    },
+    NODE_ENV: 'development',
+    port: 80, // 设置基础端口，如果被占用则自动寻找可用端口
+    assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
+    assetsSubDirectory: '',
+    hostname: 'localhost',
+    proxyTable: {
+      '/apiTest': {
+        target: 'http://api-test.com.cn', // 不支持跨域的接口根地址
+        ws: true,
+        changeOrigin: true,
+      },
+    },
+    */
+  },
+  linkDebug: {
+    // 用于开启本地调试模式的相关配置信息
+    /*
+    【特别说明】以下配置项都自带默认值，非必填。如需自定义请自行配置。
+    entry: { // 根据 src/components 目录下的文件自动生成 entry 相关配置
+      // 外链调试（在线上页面设计器端预览自定义组件）
+      index: [
+        './src/components/info-card/register.ts',
+        './src/components/info-card/model.ts',
+      ],
+    },
+    NODE_ENV: 'development',
+    port: 80, // 设置基础端口，如果被占用则自动寻找可用端口
+    closeHotReload: true, // 是否关闭热更新
+    assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
+    assetsSubDirectory: '',
+    hostname: 'localhost',
+    proxyTable: {
+      '/apiTest': {
+        target: 'http://api-test.com.cn', // 不支持跨域的接口根地址
+        ws: true,
+        changeOrigin: true,
+      },
+    }
+    */
+  },
+  publish2oss: {
+    // 用于构建并发布至 OSS 的相关配置
+    /*
+    【特别说明】以下配置项都自带默认值，非必填。如需自定义请自行配置。
+    NODE_ENV: 'production',
+    entry: { // 根据 src/components 目录下的文件自动生成 entry 相关配置
+      InfoCardModel: './src/components/info-card/model.ts',
+      infoCard: './src/components/info-card/register.ts'
+    },
+    cssExtract: false, // 不额外提取css文件
+    ossType: 'ali', // oss类型：ali、baidu
+    ossConfig: {
+      endpoint: 'https://oss-cn-beijing.aliyuncs.com',
+      AccessKeyId: 'xxx',
+      AccessKeySecret: 'xx',
+      bucket: 'neo-widgets' // 存储桶名称
+    },
+    assetsRoot: resolve('dist') // 上传指定目录下的脚本文件
+    */
+  },
+};

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

@@ -0,0 +1,59 @@
+{
+  "name": "antd-custom-cmp-template",
+  "version": "1.0.2",
+  "description": "neo自定义组件模板（react&ts技术栈）",
+  "keywords": [
+    "自定义组件模板",
+    "react&ts技术栈",
+    "neo自定义组件"
+  ],
+  "author": "wibetter",
+  "license": "MIT",
+  "scripts": {
+    "preview": "neo preview --cmpType=data-dashboard",
+    "linkDebug": "neo linkDebug",
+    "publish2oss": "neo publish2oss",
+    "format": "prettier --write \"src/**/**/*.{js,jsx,ts,tsx,vue,scss,json}\""
+  },
+  "files": [
+    "dist/*"
+  ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged",
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  },
+  "lint-staged": {
+    "src/**/**/*.{js,jsx,ts,tsx,vue,scss,json}": [
+      "prettier --write"
+    ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git@github.com:wibetter/antd-custom-cmp-template.git"
+  },
+  "bugs": {
+    "url": "https://github.com/wibetter/antd-custom-cmp-template/issues"
+  },
+  "dependencies": {
+    "neo-register": "^1.0.2",
+    "antd": "4.9.4",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^8.3.5",
+    "@commitlint/config-conventional": "^9.1.1",
+    "@types/react": "^16.9.11",
+    "@types/react-dom": "^16.9.15",
+    "neo-cmp-cli": "^1.1.8",
+    "husky": "^4.2.5",
+    "lint-staged": "^10.2.9",
+    "prettier": "^2.0.5"
+  },
+  "engines": {
+    "node": ">= 10.13.0",
+    "npm": ">= 6.4.1"
+  }
+}