akfun 5.2.3 → 5.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akfun",
-  "version": "5.2.3",
+  "version": "5.2.6",
   "description": "前端脚手架：支持Vue技术栈和react技术栈",
   "keywords": [
     "前端工程",
@@ -58,7 +58,9 @@
     "@babel/plugin-proposal-export-namespace-from": "^7.16.7",
     "@babel/plugin-proposal-function-sent": "^7.16.7",
     "@babel/plugin-proposal-json-strings": "^7.16.7",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
     "@babel/plugin-proposal-numeric-separator": "^7.16.7",
+    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
     "@babel/plugin-proposal-throw-expressions": "^7.16.7",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",

package/src/config/babel.config.js

@@ -4,7 +4,7 @@ module.exports = {
       '@babel/preset-env',
       {
         loose: true,
-        modules: false // 是否启用将ES6模块语法转换为其他模块类型的功能，当前设置为false，以便webpack进行tree shaking。
+        modules: false // 是否启用将 ES6 模块语法转换为其他模块类型的功能，当前设置为 false，以便 webpack 进行 tree shaking。
         /*
         备注：后续升级babel版本时，再启用此配置
         useBuiltIns: 'usage', // 按需引入 polyfill，替代 @babel/polyfill
@@ -26,6 +26,8 @@ module.exports = {
     '@babel/plugin-syntax-dynamic-import',
     '@babel/plugin-syntax-import-meta',
     ['@babel/plugin-proposal-class-properties', { loose: true }],
-    '@babel/plugin-proposal-json-strings'
+    '@babel/plugin-proposal-json-strings',
+    '@babel/plugin-proposal-optional-chaining', // 支持可选链操作符 ?.
+    '@babel/plugin-proposal-nullish-coalescing-operator' // 支持空值合并操作符 ??
   ]
 };

package/src/plugin/babel-plugin-add-data-scope.js

@@ -0,0 +1,188 @@
+/**
+ * Babel 插件：自动在 React 组件的最外层元素添加 data-scope 属性
+ * 
+ * 使用场景：
+ * - 在构建 React 组件时，自动为组件的根元素添加 data-scope 属性
+ * - 支持函数组件和类组件
+ * - 如果组件返回 Fragment 或数组，会在 Fragment 的第一个子元素或数组的第一个元素上添加
+ */
+module.exports = function ({ types: t }) {
+  /**
+   * 检查函数是否返回 JSX（用于判断是否是 React 组件）
+   */
+  function returnsJSX(path) {
+    const body = path.get('body');
+    
+    if (body.isBlockStatement()) {
+      // 检查函数体中是否有返回 JSX 的语句
+      let hasJSXReturn = false;
+      body.traverse({
+        ReturnStatement(returnPath) {
+          const argument = returnPath.get('argument');
+          if (argument.node && (
+            argument.isJSXElement() || 
+            argument.isJSXFragment() ||
+            argument.isArrayExpression()
+          )) {
+            hasJSXReturn = true;
+            returnPath.stop();
+          }
+        }
+      });
+      return hasJSXReturn;
+    } else if (body.isJSXElement() || body.isJSXFragment()) {
+      // 箭头函数直接返回 JSX
+      return true;
+    }
+    
+    return false;
+  }
+
+  /**
+   * 在 JSX 元素上添加 data-scope 属性
+   */
+  function addDataScopeAttribute(jsxElement) {
+    const openingElement = jsxElement.openingElement;
+    const attributes = openingElement.attributes;
+
+    // 检查是否已经存在 data-scope 属性
+    const hasDataScope = attributes.some(
+      attr => t.isJSXAttribute(attr) && attr.name.name === 'data-scope'
+    );
+
+    if (!hasDataScope) {
+      // 创建 data-scope 属性
+      const dataScopeAttr = t.jsxAttribute(
+        t.jsxIdentifier('data-scope'),
+        t.stringLiteral('')
+      );
+      // 添加到属性列表的开头
+      attributes.unshift(dataScopeAttr);
+    }
+  }
+
+  /**
+   * 处理返回语句中的 JSX
+   */
+  function processReturnStatement(path) {
+    const argument = path.get('argument');
+    
+    if (!argument.node) {
+      return;
+    }
+
+    // 处理 JSX 元素
+    if (argument.isJSXElement()) {
+      addDataScopeAttribute(argument.node);
+      return;
+    }
+
+    // 处理 JSX Fragment
+    if (argument.isJSXFragment()) {
+      const children = argument.get('children');
+      // 找到第一个 JSX 元素子节点
+      for (const child of children) {
+        if (child.isJSXElement()) {
+          addDataScopeAttribute(child.node);
+          return;
+        }
+        // 如果子节点是 Fragment，递归处理
+        if (child.isJSXFragment()) {
+          processReturnStatement(child);
+          return;
+        }
+      }
+    }
+
+    // 处理数组返回（多个元素）
+    if (argument.isArrayExpression()) {
+      const elements = argument.get('elements');
+      // 找到第一个 JSX 元素
+      for (const element of elements) {
+        if (element.isJSXElement()) {
+          addDataScopeAttribute(element.node);
+          return;
+        }
+      }
+    }
+
+    // 处理条件表达式（三元运算符）
+    if (argument.isConditionalExpression()) {
+      // 处理 true 分支
+      const consequent = argument.get('consequent');
+      if (consequent.isJSXElement()) {
+        addDataScopeAttribute(consequent.node);
+      } else if (consequent.isJSXFragment() || consequent.isArrayExpression()) {
+        processReturnStatement(consequent);
+      }
+
+      // 处理 false 分支
+      const alternate = argument.get('alternate');
+      if (alternate.isJSXElement()) {
+        addDataScopeAttribute(alternate.node);
+      } else if (alternate.isJSXFragment() || alternate.isArrayExpression()) {
+        processReturnStatement(alternate);
+      }
+    }
+
+    // 处理逻辑表达式（&& 或 ||）
+    if (argument.isLogicalExpression()) {
+      const right = argument.get('right');
+      if (right.isJSXElement()) {
+        addDataScopeAttribute(right.node);
+      } else if (right.isJSXFragment() || right.isArrayExpression()) {
+        processReturnStatement(right);
+      }
+    }
+  }
+
+  return {
+    visitor: {
+      // 处理函数组件和箭头函数组件
+      Function(path) {
+        // 只处理返回 JSX 的函数（即 React 组件）
+        if (!returnsJSX(path)) {
+          return;
+        }
+
+        const body = path.get('body');
+        
+        // 处理函数体中的返回语句
+        if (body.isBlockStatement()) {
+          body.traverse({
+            ReturnStatement(returnPath) {
+              processReturnStatement(returnPath);
+            }
+          });
+        } else if (body.isJSXElement()) {
+          // 箭头函数直接返回 JSX
+          addDataScopeAttribute(body.node);
+        } else if (body.isJSXFragment()) {
+          // 箭头函数直接返回 Fragment
+          const children = body.get('children');
+          for (const child of children) {
+            if (child.isJSXElement()) {
+              addDataScopeAttribute(child.node);
+              return;
+            }
+          }
+        }
+      },
+
+      // 处理类组件的 render 方法
+      ClassMethod(path) {
+        if (path.node.kind === 'method' && path.node.key.name === 'render') {
+          const body = path.get('body');
+          if (body.isBlockStatement()) {
+            body.traverse({
+              ReturnStatement(returnPath) {
+                processReturnStatement(returnPath);
+              }
+            });
+          }
+        }
+      }
+    }
+  };
+};
+

package/src/rollup/build.js

@@ -72,8 +72,12 @@ module.exports = function (config, envConfig, _rollupConfig, _consoleTag) {
         outputItem.plugins.push(terser());
       }
     });
-  } else if (compress && isObject(curRollupConfig.output) && !curRollupConfig.output.plugins) {
-    curRollupConfig.output.plugins = [terser()];
+  } else if (compress && isObject(curRollupConfig.output)) {
+    if (!curRollupConfig.plugins) {
+      curRollupConfig.output.plugins = [terser()];
+    } else {
+      curRollupConfig.plugins.push(terser());
+    }
   }
   const spinner = ora(`${consoleTag}开启${buildFormat}模块构建模式...`).start();
   rollupBuildFunc(curRollupConfig, config).then(() => {