- 博客(194)
- 收藏
- 关注
RSS订阅原创 webpack其余配置
本文介绍了webpack-dev-server的配置与使用。首先需要安装webpack-dev-server并在package.json中添加serve脚本。详细讲解了devServer配置项：static用于设置静态资源路径，open自动打开浏览器，port指定端口，proxy解决跨域问题（通过pathRewrite和changeOrigin），historyApiFallback解决SPA路由刷新404问题。同时说明了hotOnly和host配置的作用，以及如何通过gzip压缩提升性能。文章还包含完整的
2025-06-08 23:16:49
594
原创 浏览器兼容-polyfill-本地服务-优化
结合使用Babel和Webpack进行前端代码转换和打包。主要内容：1）使用Babel转换ES6+代码；2）配置Webpack的babel-loader处理JS/JSX文件；3）通过preset-env实现浏览器兼容性；4)引入Browserslist工具管理目标浏览器配置；5)处理React JSX和TypeScript的转换方案；6)对比ts-loader和babel-loader的优缺点，建议同时使用Babel进行代码转换和tsc进行类型检查。文中还详细说明了polyfill的
2025-06-08 21:05:38
891
原创 Webpack的基本使用 - babel
摘要：本文介绍了Webpack的Mode配置选项（none/development/production）及其差异，重点解析了source-map的作用与使用方式。source-map能够将压缩代码映射回源文件，便于调试。文章还讲解了babel的工作原理，包括其作为独立工具的使用方法、插件与预设的应用，以及Babel的编译流程（解析、转换、生成三个阶段）。这些工具共同解决了现代前端开发中代码转换和调试的痛点。
2025-06-06 22:21:11
1071
原创 Webpack搭建本地服务器
搭建本地服务器可提升开发效率，通过webpack-dev-server实现自动编译与实时更新。配置HMR热模块替换功能可避免全页刷新，保留应用状态，提高调试速度。针对Vue/React项目可使用vue-loader或react-refresh实现框架级的HMR支持。开发服务器还支持host配置（如0.0.0.0允许外部访问）、自动打开浏览器、gzip压缩等功能，满足不同开发场景需求。
2025-06-04 22:10:15
983
原创 webpack打包学习
在这种情况下，使用import或者require的资源文件所处的目录被认为是上下文目录。在开发中我们会有各种各样的模块依赖，这些模块可能来自于自己编写的代码，也可能来自第三方库。我们可以通过设置别名的方式来替换初识模块路径，具体后面讲解alias的配置。会在文件夹中根据resolve.mainFiles配置选项中指定的文件顺序查找。默认值是[ '.wasm','.mjs','.js','.json' ];我们也可以编写其他的.vue文件来编写自己的组件。我们还可以给它配置别名，给常见的路径起一个别名。
2025-06-04 17:35:43
1155
原创 Webpack依赖
Webpack打包流程：从入口文件出发构建依赖图，通过loader处理各种资源文件。重点介绍了css-loader和style-loader的使用方式，包括三种配置方法（内联、CLI、配置文件），推荐使用配置方式在webpack.config.js中设置module.rules。还说明了处理less文件需要添加less-loader，并强调多个loader的执行顺序是从后往前。最终通过npm run build完成打包。
2025-06-02 23:58:29
1404
原创 邂逅Webpack和打包过程
本文介绍了前端开发中的关键技术路径处理与Webpack打包。首先讲解了path模块在跨平台开发中的重要性，详细解析了dirname、basename、extname等核心API，以及join和resolve方法的区别与使用场景。接着重点阐述了Webpack的作用和优势，包括其模块化打包、代码转换、资源处理等核心功能。文章还提供了Webpack的安装指南、基本配置方法，以及通过npx命令和package.json脚本进行打包的操作步骤。最后通过一个简单的JS打包示例，展示了Webpack将现代JavaScri
2025-06-01 21:07:57
915
原创 包管理后续部分
pnpm通过集中存储和硬链接技术优化依赖管理。它将相同版本的依赖包统一存储在硬盘固定位置，通过硬链接引用，避免重复占用空间，仅对版本差异部分单独存储。与npm/yarn的扁平化结构不同，pnpm创建非扁平的node_modules目录，防止项目访问未声明依赖。存储路径可通过pnpm store path查询，并使用pnpm prune清理未被引用的包。这种设计显著节省磁盘空间，提升多项目间的依赖共享效率。
2025-06-01 17:08:48
343
原创 包管理工具
文章摘要：本文介绍了npm相关工具的使用方法。首先讲解了npx的作用，它可以调用项目内安装的模块指令，解决了全局和本地版本冲突问题。接着说明了如何通过npm发布自己的包，包括注册账号、登录、初始化项目和发布流程。然后介绍了pnpm这一高效包管理器，比npm更快且节省空间。最后简要提及了Linux系统中的硬链接和软链接概念，解释了两者的区别。全文涵盖了从基础工具使用到包发布的全流程，并对比了不同包管理器的特点。
2025-05-30 15:18:09
1182
原创 webpack的安装及其后序部分
文章摘要：npm install原理主要通过缓存机制优化依赖安装效率，利用package-lock.json中的标识符管理依赖版本。npm5开始引入缓存策略，通过resolved记录下载地址，integrity索引缓存包。文章还对比了yarn和cnpm工具，指出yarn弥补早期npm缺陷，而cnpm作为国内镜像解决方案可解决下载问题，支持通过npm config或cnpm设置淘宝镜像。同时介绍了常用npm命令如卸载、重建和清缓存等操作。
2025-05-28 20:17:59
950
原创 webpack的安装
本文介绍了npm配置文件package.json的基本结构和功能。该文件记录项目名称、版本、描述等元信息，以及项目依赖库的版本信息。创建方式包括npm init交互式生成或Vue CLI等脚手架工具自动生成。文章详细说明了常见配置属性：必填的name和version、description描述、author作者信息、license开源协议，以及private私有项目标识。重点解析了依赖管理相关属性：dependencies生产依赖、devDependencies开发依赖、peerDependencies对等
2025-05-28 17:44:09
980
原创 ES_Module基础（一）
ES Module是ECMAScript 2015引入的模块化规范，通过export和import关键字实现模块的导入导出。与CommonJS等社区规范不同，ES Module采用静态分析，支持具名导出和默认导出(default)。使用时需注意：浏览器中需添加type="module"属性，文件需通过服务访问；支持动态导入(import函数)和元数据(import.meta)；解析流程分为构建、实例化、运行三个阶段。npm作为Node包管理工具，可方便管理模块依赖和版本控制。ES Mod
2025-05-26 01:00:15
1283
原创 邂逅node.js
在Node.js中，全局对象global类似于浏览器中的window，但两者在变量定义和添加方式上有所不同。Node.js中的特殊全局对象如__dirname、__filename、exports、module和require，它们在每个模块中都有，但在命令行中不可用。模块化开发是Node.js的核心，通过exports和module.exports导出模块内容，require函数用于导入其他模块。Node.js遵循CommonJS规范，该规范最初为服务器端设计，Node.js是其代表性实现。模块加载时，代
2025-05-22 23:21:17
632
原创 邂逅Node.js
学习Node.js的基础知识是进入后端开发的重要一步。首先，了解Node.js是一个基于V8 JavaScript引擎的运行时环境，它允许使用JavaScript进行服务器端编程。接着，学习npm、yarn、cnpm、npx、pnpm等包管理工具，这些工具对于管理和安装Node.js包至关重要。然后，掌握模块化开发和使用Webpack进行项目打包，以及使用Git进行版本控制。Node.js的应用场景广泛，包括Web服务器开发、中间件、代理服务器等。安装Node.js后，可以通过命令行运行JavaScript
2025-05-20 22:33:56
1110
1
原创 首页数据展示
从本地存储获取当前用户 token 并解析出用户名，用于之后的请求过滤（只看当前用户发布的新闻）延迟 300ms 再渲染图表，确保 Drawer 打开完成、DOM 有尺寸。现在的分类做出来了，但是没有做响应式，所以优化一下。现在做首页的排版，依旧是偷antd里面的东西。接下来做样式的统一处理，引入lodash库。），它将打开抽屉并加载图表数据。对新闻按分类标题进行分组，便于做饼图。接下来就是写数据请求之类的了。使用 lodash 的。用onresize即可。，这是控制抽屉显示的。
2025-04-29 18:32:52
755
原创 项目实战 -- 状态管理
持久化数据的逻辑是，配置redux-persist 的规则，然后进行把两个小模块的状态进行合并，最后使用persistReducer包装（persistReducer会根据persistConfig给reducer加上存到localStorage的能力）然后是创建store。最后创建persistor，负责在应用初始化的时候把localStorage里面的数据还原到Redux store中。本来我们设置了侧边栏，比如我们把侧边栏收起，但是一刷新就会被打回原形，这就涉及到了持久化的概念。
2025-04-27 18:13:27
702
原创 新闻业务--草稿箱
这就是预览路由，，科文老师是用了antd的页头，但是在antd5中已经弃用了，所以采用Row和Col实现。现在要实现点击按钮可以提交到审核列表。可以正常的显示和删除。
2025-04-16 19:58:19
226
原创 新闻业务 -- 撰写新闻
各个字段 的含义：从前天开始觉醒了觉得自己花三百块报篮球杯这个钱不能白花，于是开始写题，结果写了两天就撑不住了，感觉自己不是吃这碗饭的，故放弃，写出生理性不适了脑阔疼+牙疼？。。故回来写项目，穿插着来。。。在圈钱杯开始之前本人将尽量把算法模板多背几个。。。
2025-04-14 17:42:16
655
原创 项目实战--路由权限
同时加上权限的判断，这样可以阻拦通过路由访问页面的行为（拦截）这样可以监听每一次路由变化的时候，都加载一下进度条。但是这样的路由权限都是嵌套的，应该怎么办呢？没所谓，axios两次就好了。
2025-04-07 21:56:27
216
原创 项目实战-角色列表
tree的使用就是引入一个tree组件，然后数据满足树形结构。能显示modal对话框，下一步实现树形结构。还要实现这个弹出框的效果。
2025-03-29 16:47:43
370
原创 项目实战--权限列表
表格是支持树形数据的展示的，当数据中有children字段的时候会自动的展示为树形表格，如果不需要或者配置为其他字段则可以用childrenColumnName进行配置。上面的那个对话框因为antd只支持react 15 ~ 18，但是我的拉下来的项目的依赖是react19，所以需要改一下。以及如果json-server的版本不对也会出现莫名其妙的bug（数据拉取不过来）弹出气泡框的展示，配置成为可选项，同步后端数据， 更改状态，页面刷新。但是现在的代码删除children会出现问题。
2025-03-29 13:58:20
439
原创 项目实战--JsonServer与SideMenu
猴爪许愿：希望后端给我接口项目是有后端的，但是由于是同步的开发，没办法随时随地和后端沟通，和后端约定一个数据的表，前端项目在实现的时候用JsonServer模拟后端数据。
2025-03-27 18:04:24
481
原创 配置也不会，依赖也更新不上，我是大笨蛋
今天成功在本地上可以用git命令交代码了配置了代理然后把代码交上去了，但是直接用解决了一圈bug，还是没解决，八老师把她的项目慷慨的发给我了并警告我不要畜生的git到她仓库上我没有恩将仇报所以本次学习从编写布局中的组件开始。
2025-03-25 21:13:25
391
原创 道心破碎--Layout+ssh配置
所以鸡皮替你的意思是我需要费劲心思在我的云服务器和我的主机上各安装一个这个子系统并且VScode还不支持这个同时还需要进行设置防火墙和端口号的开放并且安装到最后还是可能出现问题唯一的作用就是可以不断联是吗。剩下一个组件是content组件，因为是显示内容，所以可以包住Switch（现在应该叫他Routes了），这样以后内容显示的就是相应的内容。到这里之后科文老师不知道为什么又自顾自的开始重构代码了，我由于各种版本啥的不一样又得文档课ai三开。起因是这段代码看不懂，但是一定得重构吗，我努力看懂不行吗。
2025-03-23 17:02:10
550
原创 全球新闻系统发布 -- 项目启动环节
当前端代码尝试从不同源（域名、端口、协议不同）获取数据的时候，如果服务器没有正确的设置CORS头部，浏览器会拒绝请求，导致CORS错误。和之前学的一样，创建一个新项目，科文老师用的是CRA，我这暂时用Vite，因为CRA我这有点容易卡掉。如果要是不加上Switch的话，在访问/login的时候，/也是匹配的（因为/login以/开头）从上到下检查Route组件的path，渲染第一个匹配的Route，忽略后面的Route。令人感到好笑的是，科文老师在项目阶段才讲到了他用的rcc和rfc的插件。
2025-03-23 15:03:12
713
原创 一些杂七杂八的记录
对于项目还是有些迷茫，索性先逃避一下看了纸鹿学长的个人博客学东西，打算从广度上再了解一些致敬传奇前端纸鹿学长：纸鹿摸鱼处。
2025-03-20 11:55:52
933
2
原创 React生命周期
Fiber 是 React 16 中引入的一个重大更新，它是一种新的协调算法，将渲染工作分割成多个小的任务单元，执行每个任务单元时可以被中断和恢复。getDerivedStateFromProps 第一次的初始化组件以及后续的更新过程中(包括自身状态更新以及父传子) ， 返回一个对象作为新的state，返回null则说明不需要在这里更新state。之前那样写会报黄色的警告，因为优先级比较低，在执行过程中可能会被优先级较高的任务打断，改写之后就相当于告诉它，我是不安全的，就不会报警告了。
2025-03-18 22:36:07
914
原创 组件通信剩余部分
荷叶饭和励志轩买了电话卡（尾号7348/7548）就可以进行通信，电信是为他们提供服务的供应商，不买卡就打不了电话。执行这段代码后你会发现11111并没有被打印出来，因为它已经被替换掉了。需要注意的是，发布者要晚发布（因为你早发布了人家还没有订阅你丫）接下来是非父子通信（context方案）跨级通信的方案。还有很多的通信的方式，比如说-状态提升（中间人模式）会发现它没有那么聪明，如果想要正确的显示。就是将多个组件需要共享的状态提升到它们最近的父组件。如果想要轮播图片就没有办法了。这样也可以轮播图片了。
2025-03-15 12:30:17
310
原创 《React 组件通信江湖：七种武器玩转父子、兄弟、祖孙传功》
形容来说的话就是，父亲给儿子留了一比资产，儿子不可以直接用，但是在需要的时候可以向爹发出请求，爹去取钱。当你通过render调用setState的时候，render函数还会重新执行一遍，所以死循环。那么问题来了，既不能够直接更改属性，用setState又会进入循环，我应该怎么办呢？然后接下来在写代码的过程中，看到了setState，和render。问题主要在于Tabber，什么都由它的状态决定，那还怎么改。父传子传递的是属性，而子传父传的就是回调函数。使用defaultValue。
2025-03-12 22:05:40
402
原创 《React 属性与状态江湖：从验证到表单受控的实战探险》
如果是在外面证明是类属性，在里面是对象属性。当接收的和传过来的一致的时候，就可以简写了。属性能解决两个大问题：通信和复用。也可以像上面一样进行改写。怎么加上默认属性呢？
2025-03-11 17:50:25
926
原创 《银幕寻片奇遇记：数据请求助力，模糊搜索 + 选项卡玩转影院查询》
但是这样的写法是有问题的，我们不能直接的修改状态，可能会造成不可预期的问题。这样也是不可以的，因为是引用赋值。继续学习react，做小小的案例。修改状态之后，同步的更新一下。
2025-03-10 21:38:01
799
原创 React饮马江湖多年，已经占据江湖大厂数一数二的位置，晚辈后生无不追逐，以求心法，如今尝试窥见类组件真经，初尝甘霖
React推荐我们使用行内样式，而这个样式对象的位置可以放在很多地方，例如render函数里、组件原型上、外链js文件中。这个handleClick不加括号是被动执行，点到之后再触发。加了就自动执行了（不要画蛇添足，一个猴一种栓法）构造函数，添加函数和方法。
2025-03-09 16:08:02
1191
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人