neo-cmp-cli 1.0.3 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neo-cmp-cli",
-  "version": "1.0.3",
+  "version": "1.0.6",
   "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.0.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^8.3.5",

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/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-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-cmp-template/package.json

@@ -38,7 +38,7 @@
   },
   "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.3",
+    "neo-cmp-cli": "^1.0.5",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",
     "prettier": "^2.0.5"

package/src/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-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
+};