neo-cmp-cli 1.0.2 → 1.0.5

package/README.md

@@ -11,9 +11,9 @@ neo-cmp-cli 是 Neo 自定义组件开发工具，基于 [AKFun](https://github.
 - **一键发布**: 内置发布到 OSS 的能力，支持自定义对象存储配置。
 
 ### 模板类型（neo init 可选）
-- **React 模板**: [react-custom-widget-template](https://github.com/wibetter/react-custom-widget-template)
-- **React + TS 模板**: [react-ts-custom-widget-template](https://github.com/wibetter/react-ts-custom-widget-template)
-- **Vue2 模板**: [vue2-neo-custom-widget](https://github.com/wibetter/vue2-neo-custom-widget)
+- **React 模板**: [react-custom-cmp-template](https://github.com/wibetter/react-custom-cmp-template)
+- **React + TS 模板**: [react-ts-custom-cmp-template](https://github.com/wibetter/react-ts-custom-cmp-template)
+- **Vue2 模板**: [vue2-custom-cmp-template](https://github.com/wibetter/vue2-custom-cmp-template)
 
 ## 快速开始
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neo-cmp-cli",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "description": "前端脚手架：自定义组件开发工具，支持react 和 vue2.0技术栈。",
   "keywords": [
     "neo-cli",
@@ -50,7 +50,8 @@
     "ora": "^4.0.4",
     "webpack-sources": "^3.2.3",
     "yargs": "^12.0.2",
-    "lodash": "^4.17.21"
+    "lodash": "^4.17.21",
+    "external-remotes-plugin": "^1.5.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^8.3.5",

package/src/module/index.js

@@ -99,8 +99,8 @@ yargs
           questions.push({
             name: 'name',
             type: 'input',
-            message: '请设置自定义组件项目名称（默认 neoCustomWidget）:',
-            default: 'neoCustomWidget'
+            message: '请设置自定义组件项目名称（默认 neoCustomCmp）:',
+            default: 'neoCustomCmp'
           });
         }
         inquirer.prompt(questions).then((ans) => {

package/src/module/main.js

@@ -8,6 +8,7 @@ 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 getValue = (originValue, defaultValue) => {
   return originValue !== undefined ? originValue : defaultValue;
@@ -57,6 +58,9 @@ module.exports = {
       }
     }
 
+    // 添加模块联邦插件
+    curConfig.webpack.plugins.push(...MFPlugins);
+
     akfun.dev(curConfig, consoleTag);
   },
   build: () => akfun.build('build', curConfig, consoleTag), // 构建脚本：生产环境
@@ -75,6 +79,11 @@ module.exports = {
       }
     }
 
+    if (curConfig.build2lib.enableMF) {
+      // 添加模块联邦插件
+      curConfig.webpack.plugins.push(...MFPlugins);
+    }
+
     akfun.build('lib', curConfig, consoleTag);
   }, // 构建脚本：生产环境
   publish2oss: () => {
@@ -96,6 +105,9 @@ module.exports = {
       }
     }
 
+    // 添加模块联邦插件
+    curConfig.webpack.plugins.push(...MFPlugins);
+
     akfun.build('lib', curConfig, consoleTag, () => {
       // 构建完成后，执行 publish2oss
       publish2oss(

package/src/module/neoInit.js

@@ -4,16 +4,16 @@ const { replaceInPackage } = require('../utils/replaceInPackage');
 
 const templateList = {
   react: {
-    projectName: 'react-custom-widget-template',
-    url: 'git@github.com:wibetter/react-custom-widget-template.git'
+    projectName: 'react-custom-cmp-template',
+    url: 'git@github.com:wibetter/react-custom-cmp-template.git'
   },
   'react-ts': {
-    projectName: 'react-ts-custom-widget-template',
-    url: 'git@github.com:wibetter/react-ts-custom-widget-template.git'
+    projectName: 'react-ts-custom-cmp-template',
+    url: 'git@github.com:wibetter/react-ts-custom-cmp-template.git'
   },
   vue2: {
-    projectName: 'vue2-neo-custom-widget',
-    url: 'git@github.com:wibetter/vue2-neo-custom-widget.git'
+    projectName: 'vue2-custom-cmp-template',
+    url: 'git@github.com:wibetter/vue2-custom-cmp-template.git'
   }
   /*
   'vue3': {
@@ -26,7 +26,7 @@ const templateList = {
 const neoInit = function (type, projectName) {
   const currentTemplate = templateList[type || 'react'];
   const currentTemplateUrl = currentTemplate.url;
-  const finalProjectName = projectName || 'neoCustomWidget';
+  const finalProjectName = projectName || 'neoCustomCmp';
 
   gitClone(
     currentTemplateUrl,

package/src/module/neoInitByCopy.js

@@ -5,23 +5,23 @@ const { replaceInPackage } = require('../utils/replaceInPackage');
 
 const templateList = {
   react: {
-    projectName: 'react-custom-widget-template',
-    dir: path.resolve(__dirname, '../template/react-custom-widget-template')
+    projectName: 'react-custom-cmp-template',
+    dir: path.resolve(__dirname, '../template/react-custom-cmp-template')
   },
   'react-ts': {
-    projectName: 'react-ts-custom-widget-template',
-    dir: path.resolve(__dirname, '../template/react-ts-custom-widget-template')
+    projectName: 'react-ts-custom-cmp-template',
+    dir: path.resolve(__dirname, '../template/react-ts-custom-cmp-template')
   },
   vue2: {
-    projectName: 'vue2-neo-custom-widget',
-    dir: path.resolve(__dirname, '../template/vue2-neo-custom-widget')
+    projectName: 'vue2-custom-cmp-template',
+    dir: path.resolve(__dirname, '../template/vue2-custom-cmp-template')
   }
 };
 
 const neoInitByCopy = function (type, projectName) {
   const currentTemplate = templateList[type || 'react'];
   const currentTemplateDir = currentTemplate.dir;
-  const finalProjectName = projectName || 'neoCustomWidget';
+  const finalProjectName = projectName || 'neoCustomCmp';
   const finalProjectPath = path.resolve(process.cwd(), finalProjectName);
 
   fs.copy(currentTemplateDir, finalProjectPath)

package/src/oss/publish2oss.js

@@ -107,14 +107,20 @@ const getBosClient = (ossType, ossConfig) => {
     return new baiduBOS(
       ossConfig.endpoint,
       ossConfig.bucket,
-      ossConfig.AccessKeyId || ossConfig.AccessKeyID || ossConfig.accessKeyId || ossConfig.accessKeyID,
+      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.AccessKeyId ||
+        ossConfig.AccessKeyID ||
+        ossConfig.accessKeyId ||
+        ossConfig.accessKeyID,
       ossConfig.AccessKeySecret
     );
   }

package/src/template/{react-custom-widget-template → react-custom-cmp-template}/README.md

@@ -12,7 +12,9 @@
 - 存放在 src/components 目录下的自定义组件，默认 index 为自定义组件源码入口文件，register.[tj]s 为注册 Neo 组件的脚本文件，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 中；
+- 自定义组件最外层请设置一个唯一的 ClassName（比如 xx-cmpType-container），所有内容样式请放在该 ClassName 中，避免自定义组件样式相互干扰；
+- 默认开启代码规范检测（含样式内容），如需关闭，请调整 neo.config.js 相关配置；
+- 请使用 react 16版本。
 
 ### 自定义组件注册器使用说明
 - [neo-register 使用说明](https://www.npmjs.com/package/neo-register?activeTab=readme)

package/src/template/{react-custom-widget-template → react-custom-cmp-template}/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-custom-widget-template",
+  "name": "react-custom-cmp-template",
   "version": "1.0.0",
   "description": "neo自定义组件模板（react技术栈）",
   "keywords": [
@@ -31,10 +31,10 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://git@github.com:wibetter/react-custom-widget-template.git"
+    "url": "https://git@github.com:wibetter/react-custom-cmp-template.git"
   },
   "bugs": {
-    "url": "https://github.com/wibetter/react-custom-widget-template/issues"
+    "url": "https://github.com/wibetter/react-custom-cmp-template/issues"
   },
   "dependencies": {
     "neo-register": "^1.0.0",
@@ -44,7 +44,7 @@
   "devDependencies": {
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^9.1.1",
-    "neo-cmp-cli": "^1.0.2",
+    "neo-cmp-cli": "^1.0.3",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",
     "prettier": "^2.0.5"

package/src/template/{react-ts-custom-widget-template → react-ts-custom-cmp-template}/README.md

@@ -12,8 +12,9 @@
 - 存放在 src/components 目录下的自定义组件，默认 index 为自定义组件源码入口文件，register.[tj]s 为注册 Neo 组件的脚本文件，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 相关配置。
+- 自定义组件最外层请设置一个唯一的 ClassName（比如 xx-cmpType-container），所有内容样式请放在该 ClassName 中，避免自定义组件样式相互干扰；
+- 默认开启代码规范检测（含样式内容），如需关闭，请调整 neo.config.js 相关配置；
+- 请使用 react 16版本。
 
 ### 自定义组件注册器使用说明
 - [neo-register 使用说明](https://www.npmjs.com/package/neo-register?activeTab=readme)

package/src/template/{react-ts-custom-widget-template → react-ts-custom-cmp-template}/neo.config.js

@@ -1,5 +1,7 @@
 'use strict';
 const path = require('path');
+const { ModuleFederationPlugin } = require('webpack').container;
+const curDependencies = require('./package.json').dependencies;
 
 // 统一路径解析
 function resolve(dir) {
@@ -34,7 +36,28 @@ module.exports = {
     allowList: [], // ignoreNodeModules为true时生效
     projectDir: ['src'],
     // template: resolve('./public/template.html'), // 自定义html模板
-    // plugins: []
+    plugins: [
+      new ModuleFederationPlugin({
+        name: 'NeoCLIDeps',
+        shared: [
+          {
+            react: {
+              requiredVersion: curDependencies.react,
+              singleton: true,
+              eager: true,
+            },
+            'react-dom': {
+              requiredVersion: curDependencies['react-dom'],
+              singleton: true,
+              eager: true,
+            },
+          },
+        ],
+      }),
+    ],
+    babelPlugins: [
+      ['import', { libraryName: 'antd', style: 'css' }], // babel-plugin-import: antd 的按需加载
+    ],
   },
   preview: {
     // 用于开启本地预览模式的相关配置信息

package/src/template/{react-ts-custom-widget-template → react-ts-custom-cmp-template}/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-ts-custom-widget-template",
+  "name": "react-ts-custom-cmp-template",
   "version": "1.0.15",
   "description": "neo自定义组件模板（react&ts技术栈）",
   "keywords": [
@@ -31,14 +31,14 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://git@github.com:wibetter/react-ts-custom-widget-template.git"
+    "url": "https://git@github.com:wibetter/react-ts-custom-cmp-template.git"
   },
   "bugs": {
-    "url": "https://github.com/wibetter/react-ts-custom-widget-template/issues"
+    "url": "https://github.com/wibetter/react-ts-custom-cmp-template/issues"
   },
   "dependencies": {
     "neo-register": "^1.0.0",
-    "antd": "^4.9.4",
+    "antd": "4.9.4",
     "react": "^16.9.0",
     "react-dom": "^16.9.0"
   },
@@ -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.2",
+    "neo-cmp-cli": "^1.0.3",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",
     "prettier": "^2.0.5"

package/src/template/{react-ts-custom-widget-template → react-ts-custom-cmp-template}/src/components/info-card/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-// import { Avatar } from 'antd';
+import { Avatar } from 'antd';
+import { UserOutlined } from '@ant-design/icons';
 import './style.scss'; // 组件内容样式
 
 interface InfoCardProps {
@@ -42,6 +43,7 @@ export default class InfoCard extends React.PureComponent<InfoCardProps> {
           {title ||
             '营销服全场景智能CRM，帮助企业搭建数字化客户经营平台，实现业绩高质量增长。'}
           {systemInfo.tenantName ? `【${systemInfo.tenantName}】` : ''}
+          <Avatar size={64} icon={<UserOutlined />} />
         </div>
         <div className="item-imgbox">
           {userInfo && userInfo.icon && (

package/src/template/{vue2-neo-custom-widget → vue2-custom-cmp-template}/README.md

@@ -12,7 +12,9 @@
 - 存放在 src/components 目录下的自定义组件，默认 index 为自定义组件源码入口文件，register.[tj]s 为注册 Neo 组件的脚本文件，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 中。
+- 自定义组件最外层请设置一个唯一的 ClassName（比如 xx-cmpType-container），所有内容样式请放在该 ClassName 中，避免自定义组件样式相互干扰；
+- 默认开启代码规范检测（含样式内容），如需关闭，请调整 neo.config.js 相关配置；
+- 请使用 react 16版本。
 
 ### 自定义组件注册器使用说明
 - [neo-register 使用说明](https://www.npmjs.com/package/neo-register?activeTab=readme)

package/src/template/{vue2-neo-custom-widget → vue2-custom-cmp-template}/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "vue2-neo-custom-widget",
+  "name": "vue2-custom-cmp-template",
   "version": "1.1.2",
   "description": "neo自定义组件模板（vue2.0技术栈）",
   "keywords": [
@@ -31,10 +31,10 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://git@github.com:wibetter/vue2-neo-custom-widget.git"
+    "url": "https://git@github.com:wibetter/vue2-custom-cmp-template.git"
   },
   "bugs": {
-    "url": "https://github.com/wibetter/vue2-neo-custom-widget/issues"
+    "url": "https://github.com/wibetter/vue2-custom-cmp-template/issues"
   },
   "dependencies": {
     "neo-register": "^1.0.0",
@@ -44,7 +44,7 @@
   "devDependencies": {
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^9.1.1",
-    "neo-cmp-cli": "^1.0.2",
+    "neo-cmp-cli": "^1.0.3",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",
     "prettier": "^2.0.5",

package/src/template/{vue2-neo-custom-widget → vue2-custom-cmp-template}/src/widgets/info-card/index.vue

@@ -1,24 +1,24 @@
 <template>
   <div class="info-card-container">
-      <div class="news-title">
-        {{ title }}
-      </div>
-      <div class="item-imgbox">
-        <div
-          class="news-img"
-          :style="{ backgroundImage: 'url(' + backgroundImage + ')' }"
-        ></div>
-        <div v-if="img_count > 0" class="img-count">
-          {{ img_count }}
-        </div>
+    <div class="news-title">
+      {{ title }}
+    </div>
+    <div class="item-imgbox">
+      <div
+        class="news-img"
+        :style="{ backgroundImage: 'url(' + backgroundImage + ')' }"
+      ></div>
+      <div v-if="img_count > 0" class="img-count">
+        {{ img_count }}
       </div>
-      <div class="news-info">
-        <div class="left media-mark">NeoCRM · 低代码平台@Vue2.0组件</div>
-        <div v-if="comment_count && comment_count != 0" class="cmt-num right">
-          {{ agreeDataFormat(comment_count) }}评
-        </div>
+    </div>
+    <div class="news-info">
+      <div class="left media-mark">NeoCRM · 低代码平台@Vue2.0组件</div>
+      <div v-if="comment_count && comment_count != 0" class="cmt-num right">
+        {{ agreeDataFormat(comment_count) }}评
       </div>
     </div>
+  </div>
 </template>
 <script>
 // 按需引入element-ui中的组件

package/src/utils/webpack.mf.js

@@ -0,0 +1,59 @@
+// 模块联邦插件
+const webpack = require('webpack');
+const { ModuleFederationPlugin } = require('webpack').container;
+
+// 解析 webpack 模块联邦 remotes 中的变量
+const ExternalTemplateRemotesPlugin = require('external-remotes-plugin');
+
+const { catchCurPackageJson } = require('../utils/pathUtils');
+const getConfigObj = require('../utils/getConfigObj');
+
+// 获取当前项目的package文件
+const currentPackageJsonDir = catchCurPackageJson();
+const currentPackageJson = getConfigObj(currentPackageJsonDir);
+
+/**
+ * Neo 提供的可共享依赖
+ * 说明：用于剔除掉自定义组件中的重复依赖，避免重复打包，减少包体积
+ */
+const neoSharedDeps = {
+  antd: '4.9.4',
+  'antd-mobile': '2.3.4',
+  '@ant-design/icons': '^4.8.0',
+  axios: '^0.27.2',
+  'angular-expressions': '^1.1.4',
+  echarts: '5.4.2',
+  mobx: '^6.3.0',
+  'mobx-react': '^7.0.0',
+  'mobx-state-tree': '^5.4.0',
+  moment: '^2.25.3',
+  lodash: '^4.17.21',
+  'react-dnd': '^11.1.3',
+  classnames: '^2.3.2'
+};
+
+const MFPlugins = [
+  new ModuleFederationPlugin({
+    name: currentPackageJson.name,
+    remotes: {
+      // 通过 external-remotes-plugin 支持变量写法
+      neobase: 'neobase@[window.neoEntrys.neobase]',
+      neoreact: 'neoreact@[window.neoEntrys.neoreact]'
+    }
+  }),
+  new ExternalTemplateRemotesPlugin(),
+  new webpack.NormalModuleReplacementPlugin(/(.*)/, (resource) => {
+    if (['react', 'react-dom'].indexOf(resource.request) > -1) {
+      // 使用 Neo 提供的 react 和 react-dom
+      resource.request = `neoreact/${resource.request}`;
+    } else if (neoSharedDeps[resource.request]) {
+      // 使用 Neo 提供的其他依赖
+      const mfKey = resource.request.replace(/(\/|\.)/gi, '_'); // 换成 neo-ui-mf-base exposes 的 key
+      resource.request = `neobase/${mfKey}`;
+    }
+  })
+];
+
+module.exports = {
+  MFPlugins
+};