皮皮网

1.Electron Markdown编辑器实战：资源管理器实现
2.从一次前端公共库的源码搭建中，深入谈谈tree shaking的源码相关问题
3.Ant Design Vue 3.0 的那些正经事儿
4.聊聊 Webpack4 的 Tree Shaking
5.React antd Tree组件子节点不完全勾选获取父节点的值
6.es6 的 import、export 和 commonjs 的源码 require、exports模块化分析

Electron Markdown编辑器实战：资源管理器实现

       为了提升本地Markdown笔记的源码管理与效率，本文将介绍如何通过Electron框架实现一个自定义Markdown编辑器，源码特别关注资源管理器功能的源码bbs论坛源码开源实现。该功能旨在简化本地文件操作，源码包括文件和文件夹的源码管理、数据同步、源码以及基于GitHub的源码图床实现，以提供更流畅的源码编辑体验。

       首先，源码初始化Electron项目，源码使用dialog模块轻松实现文件对话框，源码让用户选择一个文件夹作为编辑器的源码根目录。通过dialog.showOpenDialog API，用户可选择文件或文件夹，获取路径后递归读取子文件夹和md文件，构建文件树结构。主进程与渲染进程通过IPC通信实现文件树的组装与渲染。

       在渲染端，利用Antd的Tree组件展示文件树，并通过动态调整Dropdown组件位置，实现右键菜单的高效展示。右键菜单支持创建、删除、复制、重命名等操作，点击事件触发Dropdown组件，执行对应功能。

       创建功能通过渲染进程向主进程发送事件，获取父文件夹路径后使用fs模块创建新文件。添加文件后，将新文件的外卖人app源码节点添加到文件树中，实现页面更新。创建文件夹流程类似，仅替换fs模块创建方法为mkdir。

       重命名功能涉及文件或文件夹完整路径的处理，通过路径分割找到旧名称，拼接新名称完成重命名。更新文件系统名称后，同步界面数据，使用updateNodeValue函数更新指定节点的属性值。

       删除操作需确认用户意愿，通过fs模块的unlinkSync或rmSync方法实现文件或文件夹的删除。同步删除文件系统和界面上对应节点，使用deleteNodeByKey函数递归删除。

       复制功能包括目标文件夹选择、源文件重命名以避免同名冲突、文件路径修正、判断目标文件夹是否为源文件夹子目录，并使用fs-extra模块完成文件复制。移动功能则是通过复制与删除实现，简洁高效。

       自定义Markdown编辑器的实现，不仅提升了本地文件管理的便捷性，也复习了文件操作和树结构知识。后续内容将涵盖编辑器主体接入与图床实现的介绍，欢迎关注与点赞，共享前端知识。

从一次前端公共库的搭建中，深入谈谈tree shaking的相关问题

       随着业务规模的扩大，前端项目中出现了大量可复用的逻辑和组件，包括对indexedDB的封装、fetch请求的增强，以及react、vue组件。c his系统源码原先的公共库已无法满足跨技术栈组件的复用需求，因此，我们决定采用monorepo结构，将js库、react组件库、vue2和vue3组件库整合在一个项目中，以实现更高效和便捷的资源管理。

       在项目设计初期，我们了解到按需加载的重要性，如antd-mobile的组件库，理论上应能通过tree shaking实现按需引入。然而，实践中存在一些限制，如commonjs规范的引入、经过babel编译后的esm模块、代码初始化的副作用以及编译过程中的潜在副作用。为确保开发者避免这些问题，antd-mobile提供了组件分包，并通过babel-plugin-import实现类似tree shaking的效果。

       然而，当我们尝试使用分包时，发现一个名为sdk的库引入后，导致了不必要的代码膨胀。经过分析，问题在于sdk库中px2vw函数引入了其他未使用的代码。进一步检查发现，sdk文件的问题在于其模块初始化时的副作用，这使得rollup无法确定哪些代码可以被优化掉。

       tree shaking在esm环境下依赖于代码的纯度，它要求开发者明确标记哪些代码是无副作用的。实践中，我们通过对比和排除法，识别了可能影响tree shaking的jquery easyui 源码分析因素，如函数式编程中的副作用，以及不同模块导入方式对tree shaking的影响。

       最后，我们通过将Sdk类中的方法抽离出来，解决了tree shaking的问题，这个过程提醒我们，解决技术问题不仅仅是修复代码，更需要理解问题的根源并灵活应用所学知识。在开发npm库时，保持对tree shaking的敏感度和对细节的深入理解，是提升代码质量和效率的关键。

Ant Design Vue 3.0 的那些正经事儿

       Ant Design Vue 3.0 的发布并非仓促之举，它标志着一个重要的里程碑，旨在提供更深入的源码重构、增强的功能特性、优化的易用性和性能提升。以下是3.0版本的主要亮点：

       1. **源码重构与提升**：从 TypeScript 和 Composition API 开始，大部分组件已切换至这种架构，以提升类型提示和管理复杂度。虽然Vue 3在TS支持上有所增强，但组件库的泛型组件和属性类型复用仍面临挑战。团队鼓励对TS技术熟练者加入，共同改进。

       2. **功能同步更新**：3.0引入了AntD 4.x的多项功能，如自定义时间库、虚拟滚动、暗黑主题、无障碍辅助和RTL支持，以及CSS Variables。

       3. **易用性优化**：在Table、TreeSelect等组件的自定义渲染API上，3.0简化了配置，引入统一的php图片管理源码`v-slot`命名，减少了配置膨胀和未来扩展的风险。

       4. **性能改进**：FormItem的渲染优化、TreeNode的废弃以及Tree和TreeSelect的虚拟滚动功能，旨在提升组件的性能和大数据渲染能力。

       尽管Table暂未支持虚拟滚动，但团队计划推出专门的产品解决大数据问题，预计在接下来的1-2个月推出。

       升级Ant Design Vue 3.0，你可以期待更简洁的代码、更好的性能，以及与社区的持续互动。如果你对这些改变感兴趣，别错过月日的Vue专场会议，详细内容可通过关注公众号获取。

聊聊 Webpack4 的 Tree Shaking

       Webpack4 的 Tree Shaking 是一种代码优化策略，旨在通过静态分析 ES6 模块来消除无用的 JavaScript 代码，以减少文件体积，提高加载速度。其主要依赖 ES6 的 import 和 export 功能进行代码的静态分析，识别并消除未被使用的代码、未被引用的方法或只写不读的变量。

       然而，Tree Shaking 在实际应用中并不总能完美发挥作用。例如，使用 antd、lodash 这类库时，Tree Shaking 通常无效，需要借助插件来实现按需加载。随着 Webpack 更加注重约定优于配置的原则，许多优化配置，包括 Tree Shaking，被 mode 属性取代。

       在进行打包时，Tree Shaking 会失效在几种特定情况下。其中，export default 的使用是导致 Tree Shaking 失败的常见原因，因为这会导致模块以对象的形式打包，无法进行深入的静态分析。此外，函数存在副作用，如修改全局变量或修改外部变量，也会导致 Tree Shaking 无法识别并删除这些代码。

       Webpack 打包类库时，由于浏览器不支持 import 和 export，因此无法直接进行 Tree Shaking。为了避免类库打包后的 Tree Shaking 失效，推荐将类库分解为多个单独的文件，每个文件包含一个特定的函数或模块，然后在引用时仅引入需要的函数。这样可以利用 Webpack 的优化功能，如 sideEffects 和 providedExports 配置，来控制哪些代码会被删除。

       而使用 Rollup 打包类库，可以配置 output.format 为 es，生成符合 ES6 模块标准的代码，从而实现 Tree Shaking。尽管如此，Babel 在转换 ES6 代码时可能会引入副作用，导致 Tree Shaking 失效。解决这一问题的方法是在相关代码前添加 /*@PURE*/ 注释，表明该函数或方法没有副作用，便于 Tree Shaking 正确识别并删除无用代码。

       Webpack4 通过 mode 参数自动激活了一系列优化选项，包括 Tree Shaking，从而简化了配置过程。优化选项如 optimization.providedExports、optimization.usedExports、optimization.concatenateModules 等，以及 TerserPlugin 插件，共同作用于代码压缩和冗余代码删除，实现代码优化。配置 sideEffects 为 false 可以将所有未使用的模块视为纯函数，避免因副作用而导致的代码保留。

       总结而言，Webpack4 的 Tree Shaking 是一个强大的代码优化工具，能显著减少项目文件体积，提高性能。然而，在实际应用中，需要考虑特定的场景和限制，如类库的打包、Babel 转码副作用等，以充分利用 Tree Shaking 的优势。正确配置 Webpack 的相关选项，结合其他优化策略，可以更有效地实现代码优化，提升应用性能。

React antd Tree组件子节点不完全勾选获取父节点的值

       在使用React和Ant Design的Tree组件时，遇到子节点未全选时如何获取父节点值？答案在于半勾选标识 halfCheckedKeys 的应用。

       处理上传数据时，通过信息对象中的 halfCheckedKeys 属性获取到父节点信息。接着，运用数组拼接方法将此信息传递至后端。

       对于数据回显的困扰，即收到后端数据后，如果包含父节点，导致子节点全被勾选时的解决方案如下：

       第一步，根据后端返回数据与原始数据进行对比。

       第二步，识别并移除父节点的数据，确保在回显时，只有实际被选择的子节点被勾选，进而解决全选问题。

es6 的 import、export 和 commonjs 的 require、exports模块化分析

       在使用antd组件的过程中，发现其库在编译后的代码中包含了一个_函数，该函数的逻辑简单，判断obj参数是否具有__esModule属性，以此来返回相应的对象或包装过的对象。这一过程与babel编译器有关。本文将解析babel在解析模块化语句时所执行的操作。

       目前，前端的模块化主要使用的是commonjs中的require、exports实现的模块化，以及es6中的import、export实现的方式。同时，webpack和babel分别对这两种实现方式有自己的处理方法，接下来我们将分别探讨它们各自如何实现。

       babel模块实现

       babel可以看作是javascript语法的编译器，其主要功能是将es6的语法转换为es5的语法，包括模块化语法的转换。在看babel的实现前，先思考几个问题，帮助理解babel所做的工作。通过一个简单的项目来解析这些疑问，项目地址可在此查看。

       首先创建项目并安装babel编译环境。在a.js文件中，使用es6语法导出三个变量及一个默认导出，使用babel编译后，可以看到es6的导入导出语句转换成了commonjs的写法。注意，export default被挂载到exports.default变量上，并定义了__esModule属性，表明此文件导出的是es6的模块。

       require导入

       commonjs的导入使用require方式，有时需要加上default，有时不需要，这是为什么？通常，在使用require导入es6模块时需要加上.require(xxx).default，这是因为es6的export default会被编译为exports.default = xxx。而使用es6的import导入不需要加上default，这是因为在babel编译es6导入时会加入_interopRequireDefault辅助方法，对于引入的es6或commonjs模块都添加了default属性。这种情况在编写webpack代码分割逻辑时常见。

       webpack模块化的原理

       webpack在打包过程中实现了自己的模块化解析方式，以下以webpack3为例。首先安装webpack并添加配置文件。在index.js和a.js文件中，使用webpack打包后得到的结果是一个自执行函数，函数体和参数部分分别解析。在函数体内，定义了__webpack_require__函数，用于导入模块。在自执行函数参数部分，可以看到参数包含打包结果。函数体和参数部分的解析过程展示了webpack模块化实现的细节。

       webpack和babel模块化的配合

       在使用webpack和babel的配置后，模块化编译结果会发生变化。主要差异体现在自执行函数参数上，引入了babel的辅助方法_interopRequireDefault，这可能是babel处理模块化结果或webpack处理的结果。这些变化的目的是兼容babel对模块化处理的方式。

       tree-shaking优化

       webpack2引入了tree-shaking技术，静态分析es6语法以删除未使用的模块。需要注意的是，这项功能仅对es6的模块化语法有效，一旦引入babel对模块化的处理，tree-shaking功能将失效。

       按需加载

       另一种模块依赖优化方法是按需加载。通常，我们通过require或import引入第三方库，导入的是库的全量内容，但实际上我们只使用其中的几个方法或组件，导致导入的无用内容增加了文件体积。通过按需加载，引入第三方库的部分组件，而非整体引入，实现引入量最小化。

       webpack编译后再导出供三方使用

       一些第三方库通常遵循commonjs的模块规范，可能是由babel编译的结果。webpack提供了编译后导出库的能力，但默认导出结果无法供第三方引用。为了解决这个问题，可以利用output.libraryTarget和output.library配置属性调整导出方式，实现库的再利用。

       综上所述，babel和webpack在模块化实现上各有特点，它们通过不同的方式处理es6和commonjs的模块化，同时也提供了优化模块依赖的策略。希望本文能为理解这些实现方式提供帮助。