akfun 5.2.11 → 5.2.13

package/README.md

@@ -1,6 +1,6 @@
 # AKFun 前端脚手架
 
-AKFun 是一个基于 Webpack 与 Rollup 的多场景前端打包工具，支持 Vue、React、React+TS 技术栈，致力于提供"零配置、开箱即用"的工程能力，让开发者专注业务。
+AKFun 是一个基于 Webpack 与 Rollup 的多场景前端打包工具，支持 Vue、React、React+TS 技术栈，致力于提供"零配置、开箱即用"的前端工程能力，让开发者专注于业务开发。
 
 ## 目录
 
@@ -20,10 +20,10 @@ AKFun 是一个基于 Webpack 与 Rollup 的多场景前端打包工具，支持
 
 ## 主要特性
 
-- **零配置**: 内置默认配置，开箱即用
-- **多技术栈**: 支持 Vue、React、React+TS 的调试与构建
-- **多构建场景**: 本地开发（含热更新/代理）、生产构建、库构建（UMD/ESM）、Node 模块构建
-- **灵活可配**: 支持入口、别名、代理、SASS 注入、ESLint/StyleLint、Babel/Loader/Plugin 扩展等配置
+- **零配置**: 内置默认配置（前端工程最佳实践），开箱可用
+- **多技术体系支持**: 支持 Vue、React、React+TS 的调试与构建
+- **多种构建类型**: 本地开发（含热更新/代理）、生产构建、库构建（UMD/ESM）、Node 模块构建
+- **灵活可配**: 支持入口、别名、代理、公共样式注入、ESLint/StyleLint、Babel/Loader/Plugin 扩展等配置
 - **样式与规范**: 集成 Autoprefixer、Sass、PostCSS、ESLint、StyleLint
 - **参数替换**: 支持基于 [params-replace-loader](https://www.npmjs.com/package/params-replace-loader) 的环境变量批量替换
 - **模板支持**: 提供完整的 Vue/React 项目模板

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akfun",
-  "version": "5.2.11",
+  "version": "5.2.13",
   "description": "前端脚手架：支持Vue技术栈和react技术栈",
   "keywords": [
     "前端工程",
@@ -13,7 +13,7 @@
   "author": "wibetter",
   "license": "MIT",
   "bin": {
-    "akfun": "./bin/akfun.js"
+    "akfun": "bin/akfun.js"
   },
   "main": "module/main.js",
   "scripts": {

package/src/config/babel.config.js

@@ -1,5 +1,4 @@
 module.exports = {
-  extensions: ['.js', '.jsx', '.ts', '.tsx'],
   presets: [
     [
       '@babel/preset-env',

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

@@ -5,8 +5,26 @@
  * - 在构建 React 组件时，自动为组件的根元素添加 data-scope 属性
  * - 支持函数组件和类组件
  * - 如果组件返回 Fragment 或数组，会在 Fragment 的第一个子元素或数组的第一个元素上添加
+ * - data-scope 的值默认为当前组件所在文件目录的名称
  */
+const path = require('path');
+
 module.exports = function ({ types: t }) {
+  /**
+   * 获取文件所在目录的名称
+   */
+  function getDirectoryName(filePath) {
+    if (!filePath) {
+      return '';
+    }
+    try {
+      const dirPath = path.dirname(filePath);
+      const dirName = path.basename(dirPath);
+      return dirName || '';
+    } catch (e) {
+      return '';
+    }
+  }
   /**
    * 检查函数是否返回 JSX（用于判断是否是 React 组件）
    */
@@ -39,8 +57,10 @@ module.exports = function ({ types: t }) {
 
   /**
    * 在 JSX 元素上添加 data-scope 属性
+   * @param {Object} jsxElement - JSX 元素节点
+   * @param {string} scopeValue - data-scope 的值，默认为空字符串
    */
-  function addDataScopeAttribute(jsxElement) {
+  function addDataScopeAttribute(jsxElement, scopeValue = '') {
     const openingElement = jsxElement.openingElement;
     const attributes = openingElement.attributes;
 
@@ -50,8 +70,11 @@ module.exports = function ({ types: t }) {
     );
 
     if (!hasDataScope) {
-      // 创建 data-scope 属性
-      const dataScopeAttr = t.jsxAttribute(t.jsxIdentifier('data-scope'), t.stringLiteral(''));
+      // 创建 data-scope 属性，值为目录名
+      const dataScopeAttr = t.jsxAttribute(
+        t.jsxIdentifier('data-scope'),
+        t.stringLiteral(scopeValue)
+      );
       // 添加到属性列表的开头
       attributes.unshift(dataScopeAttr);
     }
@@ -59,8 +82,10 @@ module.exports = function ({ types: t }) {
 
   /**
    * 处理返回语句中的 JSX
+   * @param {Object} path - Babel path 对象
+   * @param {string} scopeValue - data-scope 的值
    */
-  function processReturnStatement(path) {
+  function processReturnStatement(path, scopeValue) {
     const argument = path.get('argument');
 
     if (!argument.node) {
@@ -69,7 +94,7 @@ module.exports = function ({ types: t }) {
 
     // 处理 JSX 元素
     if (argument.isJSXElement()) {
-      addDataScopeAttribute(argument.node);
+      addDataScopeAttribute(argument.node, scopeValue);
       return;
     }
 
@@ -79,12 +104,12 @@ module.exports = function ({ types: t }) {
       // 找到第一个 JSX 元素子节点
       for (const child of children) {
         if (child.isJSXElement()) {
-          addDataScopeAttribute(child.node);
+          addDataScopeAttribute(child.node, scopeValue);
           return;
         }
         // 如果子节点是 Fragment，递归处理
         if (child.isJSXFragment()) {
-          processReturnStatement(child);
+          processReturnStatement(child, scopeValue);
           return;
         }
       }
@@ -96,7 +121,12 @@ module.exports = function ({ types: t }) {
       // 找到第一个 JSX 元素
       for (const element of elements) {
         if (element.isJSXElement()) {
-          addDataScopeAttribute(element.node);
+          addDataScopeAttribute(element.node, scopeValue);
+          return;
+        }
+        // 如果元素是 Fragment，递归处理
+        if (element.isJSXFragment()) {
+          processReturnStatement(element, scopeValue);
           return;
         }
       }
@@ -107,27 +137,37 @@ module.exports = function ({ types: t }) {
       // 处理 true 分支
       const consequent = argument.get('consequent');
       if (consequent.isJSXElement()) {
-        addDataScopeAttribute(consequent.node);
+        addDataScopeAttribute(consequent.node, scopeValue);
       } else if (consequent.isJSXFragment() || consequent.isArrayExpression()) {
-        processReturnStatement(consequent);
+        processReturnStatement(consequent, scopeValue);
       }
 
       // 处理 false 分支
       const alternate = argument.get('alternate');
       if (alternate.isJSXElement()) {
-        addDataScopeAttribute(alternate.node);
+        addDataScopeAttribute(alternate.node, scopeValue);
       } else if (alternate.isJSXFragment() || alternate.isArrayExpression()) {
-        processReturnStatement(alternate);
+        processReturnStatement(alternate, scopeValue);
       }
     }
 
     // 处理逻辑表达式（&& 或 ||）
     if (argument.isLogicalExpression()) {
+      const left = argument.get('left');
       const right = argument.get('right');
+      
+      // 处理左侧（可能是 JSX）
+      if (left.isJSXElement()) {
+        addDataScopeAttribute(left.node, scopeValue);
+      } else if (left.isJSXFragment() || left.isArrayExpression()) {
+        processReturnStatement(left, scopeValue);
+      }
+      
+      // 处理右侧（可能是 JSX）
       if (right.isJSXElement()) {
-        addDataScopeAttribute(right.node);
+        addDataScopeAttribute(right.node, scopeValue);
       } else if (right.isJSXFragment() || right.isArrayExpression()) {
-        processReturnStatement(right);
+        processReturnStatement(right, scopeValue);
       }
     }
   }
@@ -135,30 +175,39 @@ module.exports = function ({ types: t }) {
   return {
     visitor: {
       // 处理函数组件和箭头函数组件
-      Function(path) {
+      Function(functionPath) {
         // 只处理返回 JSX 的函数（即 React 组件）
-        if (!returnsJSX(path)) {
+        if (!returnsJSX(functionPath)) {
           return;
         }
 
-        const body = path.get('body');
+        // 获取当前文件路径并提取目录名
+        const filePath = functionPath.hub?.file?.opts?.filename || '';
+        const scopeValue = getDirectoryName(filePath);
+
+        const body = functionPath.get('body');
 
         // 处理函数体中的返回语句
         if (body.isBlockStatement()) {
           body.traverse({
             ReturnStatement(returnPath) {
-              processReturnStatement(returnPath);
+              processReturnStatement(returnPath, scopeValue);
             }
           });
         } else if (body.isJSXElement()) {
           // 箭头函数直接返回 JSX
-          addDataScopeAttribute(body.node);
+          addDataScopeAttribute(body.node, scopeValue);
         } else if (body.isJSXFragment()) {
           // 箭头函数直接返回 Fragment
           const children = body.get('children');
           for (const child of children) {
             if (child.isJSXElement()) {
-              addDataScopeAttribute(child.node);
+              addDataScopeAttribute(child.node, scopeValue);
+              return;
+            }
+            // 如果子节点是 Fragment，递归处理
+            if (child.isJSXFragment()) {
+              processReturnStatement(child, scopeValue);
               return;
             }
           }
@@ -166,13 +215,17 @@ module.exports = function ({ types: t }) {
       },
 
       // 处理类组件的 render 方法
-      ClassMethod(path) {
-        if (path.node.kind === 'method' && path.node.key.name === 'render') {
-          const body = path.get('body');
+      ClassMethod(classMethodPath) {
+        if (classMethodPath.node.kind === 'method' && classMethodPath.node.key.name === 'render') {
+          // 获取当前文件路径并提取目录名
+          const filePath = classMethodPath.hub?.file?.opts?.filename || '';
+          const scopeValue = getDirectoryName(filePath);
+
+          const body = classMethodPath.get('body');
           if (body.isBlockStatement()) {
             body.traverse({
               ReturnStatement(returnPath) {
-                processReturnStatement(returnPath);
+                processReturnStatement(returnPath, scopeValue);
               }
             });
           }

package/src/rollup/rollup.config.js

@@ -106,7 +106,10 @@ module.exports = function (curConfig, curEnvConfig) {
             declarationDir: curEnvConfig.declarationDir || './dist/types'
           })
         : undefined,
-      babel(babelConfig), // 备注，需要先babel()再commjs()
+      babel({
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+        ...babelConfig
+      }), // 备注，需要先babel()再commjs()
       buildType === 'ts' ? undefined : jsx({ factory: 'React.createElement' }),
       vue(),
       commonjs({

package/src/webpack/webpack.base.conf.js

@@ -44,9 +44,6 @@ module.exports = (_curEnvConfig, _akfunConfig, buildMode = 'build') => {
     ...babelConfig
   };
 
-  // 剔除掉 babel-loader 不需要的配置
-  delete curBabelConfig.extensions;
-
   // 判断是否有自定义 Babel plugins
   if (isArray(curWebpackConfig.babelPlugins)) {
     // 添加自定义babel插件