feat: 完善打包结果与jsx方法，适应最新版17+编译

juanlou1217 · juanlou1217 · commit 707e032d719d · 2025-10-17T01:21:32.000+08:00
diff --git a/dist/modules/react/index.js b/dist/modules/react/index.js
@@ -18,11 +18,11 @@
 	        type, // 元素类型
 	        ref, // 元素引用
 	        props, // 元素属性
-	        _mark: 'juanlou'
+	        _mark: '_juanlou'
 	    };
 	};
 	// jsx 函数 参数 ： type, config, children
-	const jsx = (type, config, ...maybeChildren) => {
+	const jsx = (type, config) => {
 	    //  React 会从 config 中提取 key 和 ref，剩下的都放到 props 对象
 	    let key = null;
 	    let ref = null;
@@ -46,17 +46,6 @@
 	            props[prop] = val;
 	        }
 	    }
-	    // 检测是否有子组件 ， 数组 或 单独
-	    const maybeChildrenLength = maybeChildren.length;
-	    if (maybeChildrenLength) {
-	        if (maybeChildrenLength === 1) {
-	            // 只有一个的时候，就扁平化 去除 []
-	            props.children = maybeChildren[0];
-	        }
-	        else {
-	            props.children = maybeChildren;
-	        }
-	    }
 	    return ReactElement(type, key, ref, props);
 	};
 
diff --git a/dist/modules/react/jsx-dev-runtime.js b/dist/modules/react/jsx-dev-runtime.js
@@ -18,11 +18,11 @@
 	        type, // 元素类型
 	        ref, // 元素引用
 	        props, // 元素属性
-	        _mark: 'juanlou'
+	        _mark: '_juanlou'
 	    };
 	};
 	// jsx 函数 参数 ： type, config, children
-	const jsx = (type, config, ...maybeChildren) => {
+	const jsx = (type, config) => {
 	    //  React 会从 config 中提取 key 和 ref，剩下的都放到 props 对象
 	    let key = null;
 	    let ref = null;
@@ -46,17 +46,6 @@
 	            props[prop] = val;
 	        }
 	    }
-	    // 检测是否有子组件 ， 数组 或 单独
-	    const maybeChildrenLength = maybeChildren.length;
-	    if (maybeChildrenLength) {
-	        if (maybeChildrenLength === 1) {
-	            // 只有一个的时候，就扁平化 去除 []
-	            props.children = maybeChildren[0];
-	        }
-	        else {
-	            props.children = maybeChildren;
-	        }
-	    }
 	    return ReactElement(type, key, ref, props);
 	};
 	const jsxDEV = jsx;
diff --git a/dist/modules/react/jsx-runtime.js b/dist/modules/react/jsx-runtime.js
@@ -18,11 +18,11 @@
 	        type, // 元素类型
 	        ref, // 元素引用
 	        props, // 元素属性
-	        _mark: 'juanlou'
+	        _mark: '_juanlou'
 	    };
 	};
 	// jsx 函数 参数 ： type, config, children
-	const jsx = (type, config, ...maybeChildren) => {
+	const jsx = (type, config) => {
 	    //  React 会从 config 中提取 key 和 ref，剩下的都放到 props 对象
 	    let key = null;
 	    let ref = null;
@@ -46,17 +46,6 @@
 	            props[prop] = val;
 	        }
 	    }
-	    // 检测是否有子组件 ， 数组 或 单独
-	    const maybeChildrenLength = maybeChildren.length;
-	    if (maybeChildrenLength) {
-	        if (maybeChildrenLength === 1) {
-	            // 只有一个的时候，就扁平化 去除 []
-	            props.children = maybeChildren[0];
-	        }
-	        else {
-	            props.children = maybeChildren;
-	        }
-	    }
 	    return ReactElement(type, key, ref, props);
 	};
 	const jsxDEV = jsx;
diff --git a/dist/modules/react/package.json b/dist/modules/react/package.json
@@ -1,16 +1,6 @@
 {
-  "name": {
-    "name": "react",
-    "version": "1.0.0",
-    "description": "react公用方法,核心 API 与组件模型",
-    "module": "index.ts",
-    "dependencies": {
-      "shared": "workspace:*"
-    },
-    "keywords": [],
-    "author": "",
-    "license": "ISC",
-    "packageManager": "pnpm@10.17.0"
-  },
+  "name": "react",
+  "description": "react公用方法,核心 API 与组件模型",
+  "version": "1.0.0",
   "main": "index.js"
 }
diff --git a/notes-react/commit_summary.md b/notes-react/commit_summary.md
@@ -1,74 +1 @@
-# 🤖 React 源码学习笔记
-
-
-============================================================
-📅 2025-10-15 15:46:28 - 提交 e36a5856
-============================================================
-
-# 📝 feat: implement JSX transformation core and bundling
-
-> **提交**: `e36a5856` | **时间**: 2025-10-15 15:46:28 | **作者**: juanlou1217
-
-根据您提供的提交信息，我需要澄清一个重要问题：这个提交实际上修改的是 GitHub Actions 工作流配置文件，而不是 React 源码本身的实现。让我基于这个理解来分析：
-
-## 🔧 技术实现分析
-
-### 实际实现的功能
-这个提交主要优化了自动化工作流的权限和身份验证机制：
-
-1. **权限提升**：添加了 `contents: write` 权限，使工作流能够写入仓库内容
-2. **身份验证改进**：使用 `GITHUB_TOKEN` 进行安全的 Git 操作认证
-3. **身份标识标准化**：将提交者信息改为 GitHub Actions 官方 bot 身份
-
-### 涉及的 React 开发概念
-虽然这不是直接的 React 源码，但体现了现代 React 项目开发中的重要实践：
-
-- **自动化工具链**：React 生态中大量使用自动化工具进行构建、测试和文档生成
-- **CI/CD 流程**：React 项目依赖持续集成来保证代码质量
-- **安全最佳实践**：使用 token 认证而非硬编码凭证
-
-## 💡 设计思路
-
-### 为什么选择这种实现方式
-1. **安全性考虑**：使用 `GITHUB_TOKEN` 替代可能的硬编码 token，符合 GitHub 安全最佳实践
-2. **标准化**：采用 GitHub 官方 bot 身份，使自动化提交更加规范和可识别
-3. **权限最小化**：只授予必要的 `contents: write` 权限，遵循安全原则
-
-### 优化实现
-- **环境变量管理**：通过 `env` 配置安全地传递 token
-- **远程 URL 动态设置**：在推送时动态构建认证 URL，避免凭证泄露
-- **错误处理**：添加文件存在性检查，避免空提交
-
-## 📚 源码学习收获
-
-### 对 React 开发流程的新理解
-通过这个配置的优化，我认识到：
-
-1. **React 项目的工程化成熟度**：大型项目如 React 本身依赖完善的自动化流程来管理复杂的开发工作流
-2. **开源协作规范**：身份标识的标准化体现了开源项目对贡献者管理的重视
-3. **安全第一的理念**：即使在工具链层面也贯彻安全最佳实践
-
-### 连接 React 整体架构
-这个工作流配置虽然不直接涉及 React 核心源码，但反映了：
-
-- **React 生态系统的完整性**：从源码到文档、从开发到部署的全链路工具支持
-- **社区驱动的开发模式**：自动化工具帮助管理来自全球开发者的贡献
-- **质量保证体系**：通过自动化流程确保代码变更的可追溯性和文档同步
-
-### 实践启示
-在继续手写 React 源码的过程中，这个提交提醒我们：
-
-1. **工具链同样重要**：理解 React 不仅要看核心算法，还要了解支撑其发展的工程实践
-2. **安全意识的全面性**：从源码实现到部署流程都需要考虑安全性
-3. **自动化价值**：良好的自动化工具可以显著提升开发效率和代码质量
-
-虽然这个提交没有直接涉及 React 虚拟 DOM、协调算法等核心机制，但它展示了构建和维护大型前端框架所需的工程化能力和成熟度，这些都是深入学习 React 源码时值得关注的上下文环境。
-
-**建议**：在后续的 React 源码学习过程中，可以重点关注 JSX 转换、组件渲染、状态更新等核心功能的实现，这些将更直接地帮助理解 React 的内部工作原理。
-
-------------------------------------------------------------
-
-> 手写 React 源码的学习记录，专注于理解 React 内部实现原理
-> 
-> **学习目标**: 深入理解 React 的核心机制、设计思路和架构原理
 
diff --git a/notes-react/notes/2.JSX转换.md b/notes-react/notes/2.JSX转换.md
@@ -70,20 +70,44 @@ AST 转换为 JavaScript 函数调用，并处理语法规则（如 `class` →
 - React 17 前（传统运行时）：
 
   ```js
+  React.createElement(type, config, ...children)
+  
   React.createElement("div", { className: "header" }, "Hello");
   ```
 
 - React 17+（自动运行时）：
 
   ```js
   import { jsx as _jsx } from 'react/jsx-runtime';
+  _jsx(Component, config)
   _jsx("div", { className: "header", children: "Hello" });
   ```
-
+  
   优势：自动导入 jsx-runtime，无需手动引入 React，支持 Tree-shaking
-
   
-
+  
+  
+  还有17前后编译的结果也不同
+  
+  ```
+  <div>
+    hello
+    <span>world</span>
+  </div>
+  
+  // 17后编译成：
+  jsx('div', {
+    	children: ['hello', jsx('span', { children: 'world' })]
+  })
+  
+  // 17前编译成：
+  React.createElement('div', 
+  	null,
+    	'hello',
+    	React.createElement('span', null, 'world')
+  )
+  ```
+  
   
 
 #### **运行时：**
@@ -179,15 +203,122 @@ reactElement() 函数进行统一的工厂对象创建输出
 
 新建script/rollup/react.config.js
 
+进行书写打包配置规则，根据模块的package.json中的信息 生成路径
+
+配置关键 
+
+```js
+{	
+	input: `${pkgPath}/${module}`,
+	output: {
+		file: `${pkgDistPath}/index.js`,
+		name: 'React',
+		format: 'umd' // UMD 格式（浏览器+Node都可用）
+	},
+    plugins: [
+		...getBaseRollupPlugins(), // TS编译 + CommonJS转换
+		generatePackageJson({
+			// 自动生成 package.json
+			inputFolder: `${pkgPath}`,
+			outputFolder: `${pkgDistPath}`,
+			baseContents: (name, description, version) => ({
+				name,
+				description,
+				version,
+				main: 'index.js'
+				})    
+    ] 
+        
+}
+```
+
+
+
+
+
+并配置打包命令
+
+
 
+接下来打包成功后，进行调试 
 
+```
+pnpm link --global // 请求被连接
+
+pnpm link react --global // 主动去连接
+```
+
+将当前项目链接到全局 node_modules 中，使得该项目可以在全局范围内被其他项目引用或使用。
 
 
 
+创建调试测试项目
+
+```cmd
+npx create-react-app react-demo
+```
+
 
 
+index中
+
+```js
+import React from 'react';
+
+const aa =
+    <div >
+        hello
+        <span>world</span>
+    </div>
+
+console.log(React)
+console.log(aa)
+```
+
 
 
+经过编译后是
+
+```js
+import { jsx as _jsx } from 'react/jsx-runtime';
+import React from 'react';
+
+const aa = _jsx('div', {
+  children: [
+    'hello',
+    _jsx('span', { children: 'world' })
+  ]
+});
+```
+
+编译器会自动添加运行时的库，并使用的
+
+> import { jsx as _jsx } from 'react/jsx-runtime';
+
+
+
+因此为一下逻辑
+
+```md
+你的代码：
+<div>hello</div>
+        ↓
+Babel/TypeScript 编译
+        ↓
+自动导入：import { jsx } from 'react/jsx-runtime'
+        ↓
+转换为：jsx('div', { children: 'hello' })
+        ↓
+执行 jsx() 函数（来自 dist/modules/react/jsx-runtime.js）
+        ↓
+返回 ReactElement 对象：
+{
+  $$typeof: Symbol(react.element),
+  type: 'div',
+  props: { children: 'hello' },
+  _mark: 'juanlou'  ← 你的自定义标记！
+}
+```
 
 
 
diff --git a/packages/react/src/jsx.ts b/packages/react/src/jsx.ts
@@ -21,12 +21,12 @@ const ReactElement = function (
 		type, // 元素类型
 		ref, // 元素引用
 		props, // 元素属性
-		_mark: 'juanlou'
+		_mark: '_juanlou'
 	};
 };
 
 // jsx 函数 参数 ： type, config, children
-export const jsx = (type: ElementType, config: any, ...maybeChildren: any) => {
+export const jsx = (type: ElementType, config: any) => {
 	//  React 会从 config 中提取 key 和 ref，剩下的都放到 props 对象
 	let key: Key = null;
 	let ref: Ref = null;
@@ -52,17 +52,6 @@ export const jsx = (type: ElementType, config: any, ...maybeChildren: any) => {
 			props[prop] = val;
 		}
 	}
-
-	// 检测是否有子组件 ， 数组 或 单独
-	const maybeChildrenLength = maybeChildren.length;
-	if (maybeChildrenLength) {
-		if (maybeChildrenLength === 1) {
-			// 只有一个的时候，就扁平化 去除 []
-			props.children = maybeChildren[0];
-		} else {
-			props.children = maybeChildren;
-		}
-	}
 	return ReactElement(type, key, ref, props);
 };
 
diff --git a/script/rollup/react.config.js b/script/rollup/react.config.js
