@10yun/open-sdk 0.3.89

package/vite-plugin-qiankun/readme.md

@@ -0,0 +1,104 @@
+#### 简介
+
+> vite-plugin-qiankun: 帮助应用快速接入乾坤的vite插件
+
+- 保留vite构建es模块的优势
+- 一键配置，不影响已有的vite配置
+- 支持vite开发环境
+
+#### 快速开始
+
+###### 1、在 `vite.config.ts` 中安装插件
+```typescript
+// vite.config.ts
+
+import qiankun from 'vite-plugin-qiankun';
+
+export default {
+  // 这里的 'myMicroAppName' 是子应用名，主应用注册时AppName需保持一致
+  plugins: [qiankun('myMicroAppName')],
+  // 生产环境需要指定运行域名作为base
+  base: 'http://xxx.com/'
+}
+```
+###### 2、在入口文件里面写入乾坤的生命周期配置
+
+```typescript
+// main.ts
+import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
+
+// some code
+renderWithQiankun({
+  mount(props) {
+    console.log('mount');
+    render(props);
+  },
+  bootstrap() {
+    console.log('bootstrap');
+  },
+  unmount(props: any) {
+    console.log('unmount');
+    const { container } = props;
+    const mountRoot = container?.querySelector('#root');
+    ReactDOM.unmountComponentAtNode(
+      mountRoot || document.querySelector('#root'),
+    );
+  },
+});
+
+if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
+  render({});
+}
+```
+
+###### 3、dev下作为子应用调试
+
+> 因为开发环境作为子应用时与热更新插件（可能与其他修改html的插件也会存在冲突）有冲突，所以需要额外的调试配置
+
+```typescript
+// useDevMode 开启时与热更新插件冲突,使用变量切换
+const useDevMode = true
+
+const baseConfig: UserConfig = {
+  plugins: [
+    ...(
+      useDevMode ? [] : [
+        reactRefresh()
+      ]
+    ),
+    qiankun('viteapp', {
+      useDevMode
+    })
+  ],
+}
+```
+上面例子中 `useDevMode = true` 则不使用热更新插件，`useDevMode = false` 则能使用热更新，但无法作为子应用加载。
+
+###### 4、其它使用注意点 `qiankunWindow`
+
+因为es模块加载与`qiankun`的实现方式有些冲突，所以使用本插件实现的`qiankun`微应用里面没有运行在js沙盒中。所以在不可避免需要设置window上的属性时，尽量显示的操作js沙盒，否则可能会对其它子应用产生副作用。qiankun沙盒使用方式
+```typescript
+import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
+
+qiankunWindow.customxxx = 'ssss'
+
+if (qiankunWindow.__POWERED_BY_QIANKUN__) {
+  console.log('我正在作为子应用运行')
+}
+
+```
+
+#### 例子
+
+详细的信息可以参考例子里面的使用方式
+ ```
+git clone xx
+npm install
+npm run example:install
+# 生产环境调试demo
+npm run example:start
+# vite开发环境demo, demo中热更新已经关闭
+npm run example:start-vite-dev
+```
+
+

package/vite-plugin-shiyun.js

@@ -0,0 +1,162 @@
+import { loadEnv } from 'vite';
+import path from 'path';
+import qiankun from './vite-plugin-qiankun/es/index.js';
+export { qiankunWindow } from './vite-plugin-qiankun/es/helper.js';
+import { encryptStrEncode } from './common/encipher.js';
+import { buildRbac } from './common/buildRbac.js';
+/**
+ * 使用 plugins: [shiyunInjectHtml({ key: 'value' })]
+ * @param {*} data
+ * @returns
+ */
+export function shiyunInjectHtml(data) {
+  return {
+    name: 'vite-plugin-shiyun-inject-html',
+    transformIndexHtml(html) {
+      Object.keys(data).forEach((key) => {
+        html = html.replace(`<!--%${key}%-->`, data[key]);
+      });
+      return html;
+    }
+  };
+}
+/**
+ *
+ * @param {*} params
+ * @returns
+ */
+export function shiyunRelease(params = { menu_arr: [] }) {
+  // 根据当前工作目录中的 `mode` 加载 .env 文件
+  const PROCESS_CWD = process.cwd();
+  const BASENAME_SIGN = path.basename(PROCESS_CWD);
+  const ENV_MODE = process.env.NODE_ENV;
+  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
+  const ENV_ARR_VITE = loadEnv(ENV_MODE, PROCESS_CWD, 'VITE_');
+  const {
+    VITE_SY_PRODUCT_PORT,
+    VITE_SY_PRODUCT_SIGN,
+    VITE_SY_PRODUCT_VERS_DOMAIN,
+    VITE_SY_PRODUCT_VERS_FULL,
+    VITE_SY_PRODUCT_VERS_ALONE,
+    VITE_SY_API_DEV,
+    VITE_SY_APP_PROJECT_SIGN,
+    VITE_SY_APP_CONNECT_ID,
+    VITE_SY_APP_CONNECT_ROLE
+  } = ENV_ARR_VITE;
+  const LAST_PRODUCT_SIGN = VITE_SY_PRODUCT_SIGN || BASENAME_SIGN;
+  const LAST_BUILD_VERS_DOMAIN = VITE_SY_PRODUCT_VERS_DOMAIN || '';
+  const LAST_BUILD_VERS_SIGN = VITE_SY_PRODUCT_VERS_ALONE == 'on' ? '' : LAST_PRODUCT_SIGN;
+  const LAST_BUILD_VERS_FULL = VITE_SY_PRODUCT_VERS_FULL || '';
+  if (ENV_MODE == 'production') {
+    buildRbac(params.menu_arr, PROCESS_CWD, {
+      RBAC_BASE_SIGN: LAST_PRODUCT_SIGN
+    });
+  }
+
+  // const sign_flag = `${VITE_SY_APP_PROJECT_SIGN}---${VITE_SY_APP_CONNECT_ID}---${VITE_SY_APP_CONNECT_ROLE}`;
+  // const sign_param = encryptStrEncode(sign_flag);
+  // const get_api = `${VITE_SY_API_DEV}/base.base_load/common`;
+
+  /**
+   * useDevMode 开启时与热更新插件冲突
+   * useDevMode = true 时不开启热更新
+   * 如果是在主应用中加载子应用vite,必须打开这个,否则vite加载不成功, 单独运行没影响
+   */
+  const useDevMode = true;
+
+  return [
+    // 微应用名字，与主应用注册的微应用名字保持一致
+    qiankun(LAST_PRODUCT_SIGN, {
+      useDevMode
+    }),
+    {
+      name: 'vite-plugin-shiyun-release',
+      // apply: 'build', // 'build' 或 'serve' ,在什么情况下使用
+      config: (config, { mode, command }) => {
+        let basePath = '/';
+        if (mode == 'production') {
+          let buildPath = `${LAST_BUILD_VERS_DOMAIN}/${LAST_BUILD_VERS_SIGN}/${LAST_BUILD_VERS_FULL}/`;
+          /**
+           * 使用正则表达式进行过滤
+           * 过滤除了 https:// 和 http:// 以外的 // 和 ///
+           */
+          buildPath = buildPath.replace(/\/(undefined\/)+/g, '/');
+          buildPath = buildPath.replace(/([^:]\/)\/+/g, '$1');
+          basePath = buildPath;
+        }
+        return {
+          base: basePath,
+          server: {
+            port: VITE_SY_PRODUCT_PORT
+          },
+          esbuild: {
+            drop: ['console', 'debugger']
+          },
+          optimizeDeps: {
+            esbuildOptions: {
+              target: 'esnext'
+            }
+            // 确保 open-sdk 包在依赖优化中
+            // include: ['@10yun/open-sdk']
+            /**
+             * TODO
+             * 确保 open-sdk 包不在依赖优化中，不然造成修改  【项目@/下的相关文件】，vite无法及时热更新响应
+             *  添加下列 exclude 会爆 dayjs 问题
+             */
+            // exclude: ['@10yun/open-sdk']
+          },
+          build: {
+            // target: ['chrome89', 'edge89', 'firefox89', 'safari15', 'chrome87', 'edge88', 'es2020', 'firefox78', 'safari14'],
+            target: 'esnext',
+            sourcemap: false,
+            chunkSizeWarningLimit: 2000
+          },
+          output: {
+            // 把子应用打包成 umd 库格式
+            // library: `${子应用名}-[name]`,
+            // libraryTarget: 'umd',
+            // jsonpFunction: `webpackJsonp_${子应用名}`
+            library: `${BASENAME_SIGN}-[name]`,
+            libraryTarget: 'umd',
+            jsonpFunction: `webpackJsonp_${BASENAME_SIGN}`
+          }
+        };
+      },
+      configResolved(config) {
+        // console.log('---111---');
+        // console.log('configResolved', config.base, config.mode, config.command, config.esbuild);
+        // config.base = 'asdad';
+        // isProduction = config.command === 'build' || config.isProduction;
+        // base = config.base;
+      },
+      configureServer(server) {
+        // 在开发服务器配置时可以执行的逻辑
+        // console.log('开发的时候', server);
+      },
+      transformIndexHtml(html) {
+        if (ENV_MODE == 'development') {
+          // 删除带 mode="pro" 的标签
+          html = html.replace(/<(script)\b[^>]*?mode="pro"[^>]*>[\s\s]*?<\/script>/gi, '');
+          html = html.replace(/<(link|script)\b[^>]*?mode="pro"[^>]*>/gi, '');
+        }
+        if (ENV_MODE == 'production') {
+          // 删除带 mode="dev" 的标签
+          if (VITE_SY_PRODUCT_VERS_ALONE != 'on') {
+            html = html.replace(/<(script)\b[^>]*?mode="dev"[^>]*>[\s\S]*?<\/script>/gi, '');
+            html = html.replace(/<(link|script)\b[^>]*?mode="dev"[^>]*>/gi, '');
+          }
+        }
+        // 删除空行
+        html = html.replace(/\n\s*\n/g, '\n');
+        return html;
+      }
+      // transform(code, id) {
+      //   // console.log('transform');
+      //   if (id.endsWith('.example')) {
+      //     // 对特定文件进行转换逻辑
+      //     return code + '\n// This is an example plugin transformation';
+      //   }
+      // }
+    }
+  ];
+}