前端工程化
文章平均质量分 81
前端工程化
__畫戟__
前端。知之为知之,不知为不知
展开
-
VsCode配置Eslint+Prettier结合使用详细配置步骤,规范化开发
vsCode配置Eslint + Prettier结合使用详细配置步骤,规范化开发转载 2023-08-20 15:20:54 · 13910 阅读 · 1 评论 -
webpack 实现 BannerWebpackPlugin
BannerWebpackPlugin 插件用于给打包产物头部添加注释文本原创 2023-05-25 13:54:13 · 300 阅读 · 0 评论 -
webpack 实现 CleanWebpackPlugin
手写CleanWebpackPlugin,用于删除/清理构建文件夹。原创 2023-05-25 01:47:16 · 278 阅读 · 0 评论 -
webpack 实现 CopyWebpackPlugin
CopyWebpackPlugin 将已经存在的单个文件或整个目录复制到构建目录。原创 2023-05-25 00:52:48 · 1281 阅读 · 0 评论 -
webpack 自定义loader
让我们实现一些简易的loader,从大量的简易loader的实现过程中学习编写如何 webpack loader原创 2023-05-23 00:47:22 · 862 阅读 · 1 评论 -
如何进行 web 性能监控?
我们可转化为三个方面来看:响应速度、页面稳定性、外部服务调用。响应速度:页面初始访问速度 + 交互响应速度;页面稳定性:页面出错率;外部服务调用:网络请求访问速度;转载 2023-05-13 16:23:40 · 2314 阅读 · 0 评论 -
前端异常监控解决方案研究
前端监控包括行为监控、异常监控、性能监控等,本文主要讨论异常监控。一般而言,一个监控系统,大致可以分为四个阶段:日志采集、日志存储、统计与分析、报告和警告。转载 2023-05-12 23:32:12 · 2025 阅读 · 0 评论 -
create-package-tools,构建 npm 包,支持react、vue、js
create-package-tools 是创建 package 项目的cli,支持react、vue、js。它的 CLI 服务 package-cli-service 为构建发布 npm 包的全流程提供了完整的工作流原创 2023-04-10 21:47:19 · 121 阅读 · 0 评论 -
webpack-chain
webpack 的核心配置的创建和修改基于一个有潜在难于处理的 JavaScript 对象。虽然这对于配置单个项目来说还是 OK 的,但当你尝试跨项目共享这些对象并使其进行后续的修改就会变的混乱不堪,因为您需要深入了解底层对象的结构以进行这些更改。webpack-chain 尝试通过提供可链式或顺流式的 API 创建和修改webpack 配置。API的 Key 部分可以由用户指定的名称引用,这有助于 跨项目修改配置方式 的标准化。转载 2023-03-15 20:41:00 · 3271 阅读 · 0 评论 -
package.json 中的 browser、module、main 字段使用探索
main : 定义了 npm 包的入口文件,browser 环境和 node 环境均可使用;module : 定义 npm 包的 ESM 规范的入口文件,browser 环境和 node 环境均可使用;browser : 定义 npm 包在 browser 环境下的入口文件;转载 2023-03-13 21:18:42 · 2892 阅读 · 0 评论 -
软件版本控制规范
版本格式:主版本号.次版本号.修订号,版本号递增规则如下:· 主版本号:当你做了不兼容的 API 修改;· 次版本号:当你做了向下兼容的功能性新增;· 修订号:当你做了向下兼容的问题修正;先行版本号及版本编译信息可以加到“主版本号.次版本号.修订号”的后面,作为延伸。原创 2023-02-08 11:05:52 · 3254 阅读 · 0 评论 -
webpack 编写插件
webpack 插件由以下组成:一个 JavaScript 命名函数或 JavaScript 类。在插件函数的 prototype 上定义一个 apply 方法。指定一个绑定到 webpack 自身的事件钩子。处理 webpack 内部实例的特定数据。功能完成后调用 webpack 提供的回调。原创 2023-02-01 21:21:36 · 698 阅读 · 0 评论 -
tapable详解
这个小型库是 webpack 的一个核心工具,但也可用于其他地方, 以提供类似的插件接口。 在 webpack 中的许多对象都扩展自 Tapable 类。 它对外暴露了 tap,tapAsync 和 tapPromise 等方法, 插件可以使用这些方法向 webpack 中注入自定义构建的步骤,这些步骤将在构建过程中触发。原创 2023-01-31 19:58:48 · 659 阅读 · 0 评论 -
webpack 如何编写 loader
loader 是导出为一个函数的 node 模块。该函数在 loader 转换资源的时候调用。给定的函数将调用 Loader API,并通过 this 上下文访问。1. 当一个 loader 在资源中使用,这个 loader 只能传入一个参数 - 一个包含资源文件内容的 字符串 2. loader 会返回一个或者两个值。第一个值的类型是 JavaScript 代码的字符串或者 buffer3. 最后一个 loader 可以返回任意类型的模块原创 2023-01-08 20:38:55 · 1313 阅读 · 0 评论 -
npm install xxxx --legacy-peer-deps命令是什么?
package.json文件里的dependencies和devDependencies有什么区别吗?)。那么命令–legacy-peer-dep里的peerDependency是什么依赖呢?根据geeksforgeeks网站里的定义:翻译一下就是说,在package.json文件中,存在一个叫做peerDependencies(对等依赖关系)的对象,它包含了项目里需要的所有的包或则用户正在下载的版本号相同的所有的包(很绕,但意思就是对等依赖关系指定我们的包与某个特定版本的npm包兼容);转载 2022-11-13 19:07:04 · 3678 阅读 · 0 评论 -
构建组件发布npm包:Rollup 构建 library 完整版
Rollup 构建 library 完整版,包含 打包图片 + 字体资源 + 外部依赖 + 外部UI + css预编译 + css作用域隔离 + 代码压缩 + cjs + es + babel编译等功能。原创 2022-09-22 09:22:11 · 1053 阅读 · 0 评论 -
Rollup常用插件详解
rollup常用插件汇总详解,@rollup/plugin-node-resolve、@rollup/plugin-commonjs、@rollup/plugin-babel、@babel/preset-react、rollup-plugin-postcss、rollup-plugin-vue、rollup-plugin-terser、@rollup/plugin-alias、@rollup/plugin-strip、rollup-plugin-copy、@rollup/plugin-image原创 2022-09-01 22:45:28 · 5192 阅读 · 1 评论 -
Rollup打包工具核心配置详解
rollup打包工具核心配置详解;Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序。Rollup 使用ES6模块,,而不是以前的特殊解决方案,如 CommonJS 和 AMD。rollup.js更多是用于library打包rollup 与 webpack 对比,Webpack 具备强力的处理各类资源,构建 web应用 的能力,当然它也可以构建 library;Rollup 更多是用于构建 library;原创 2022-08-22 22:13:36 · 1506 阅读 · 0 评论 -
webpack高级应用篇(十五):基于 Promise 的动态 Remote,让模块联邦版本化
基于 Promise 的动态 Remote,让模块联邦版本化原创 2022-07-24 18:01:56 · 1257 阅读 · 2 评论 -
webpack高级应用篇(十四):splitChunks.chunks 中的 async、initial 和 all
webpack官方文档中对于splitChunks.chunks只说明了 async 是默认的选项,关于 async、initial 和 all 之间的区别却没有很好的进行举例解释。今天我们将来探讨一下这三者的区别。async表示动态引入的模块将会被拆分;initial表示不会将动态引入和静态引入的同一模块一起处理,而是分开处理。;all对所有类型的模块进行拆分原创 2022-05-01 15:16:45 · 2421 阅读 · 2 评论 -
自动生成 changelog.md,做一名有追求的工程师
commitlint + Husky 规范 git commit 日志;根据 commit message 自动生成 changelog;自定义changelog;commitlint 规范;原创 2022-04-22 19:52:52 · 5135 阅读 · 9 评论 -
如何自定义 conventional-changelog
如何自定义 conventional-changelog首先还得感谢 https://juejin.im/post/5d27f84a6fb9a07ed064ddf1 这篇文章。教会了我很多东西。这篇文章的作者还写了一个 conventional-changelog-angular 的预设扩展项目地址 。正是这个项目让我搞明白了怎么自定义。自定义的关键,显然就在根目录的 changelog-option.js 文件,观察这个文件后,发现正是这个文件定义了哪些 git commit 要写入更新日志,以及生转载 2022-04-14 22:41:35 · 2517 阅读 · 0 评论 -
【create-modules-tools】一款:读取远程仓库模板,快速创建代码模块的脚手架工具
读取远程仓库模板,快速创建代码模块的脚手架工具原创 2022-02-20 18:42:40 · 212 阅读 · 0 评论 -
手把手教你使用nodejs编写一个【使用远程仓库模板,快速创建项目模块】的cli(命令行)
在工作过程中,很多时候我们会遇到一些很相似的需求,这时候我们会进行【搬砖】。这时候我们经常会复制一份相似的代码,改一改就成了。但是这样有两个问题:首先,从其他业务模块复制过来的代码中需要删删减减,有些繁琐,效率较低;其次,即便复制的是一个基础模板代码,也会面临手动 copy 的低效问题;还有,一般如果同事之间用一个代码模板库,需要将之 git clone 至本地磁盘,一般手动 copy 很少会 git pull 代码,这样就会造成代码模块版本滞后。原创 2022-02-20 18:05:05 · 9910 阅读 · 0 评论 -
根据 commit message 自动生成 changelog
规范你的 commit message 并且根据 commit 自动生成 CHANGELOG原创 2022-01-12 16:06:12 · 801 阅读 · 0 评论 -
commitlint + Husky 规范 git commit 日志
在多人协作的背景下,git 仓库和 workflow 的作用很重要。而对于 commit 提交的信息说明存在一定规范是好的方案。来学习一下使用 commitlint + husky 来规范 git commit -m 中的描述信息吧原创 2022-01-06 21:34:09 · 1200 阅读 · 0 评论 -
手把手教你使用nodejs编写cli(命令行)——拉取远程仓库作为代码模板
上一章和大家分享了通过 fs 模块读写ejs 模板的方式创建 CLI 工具,这一章我们来讲解如果将远程仓库的代码做为 CLI 工具的代码模板。原创 2022-01-03 20:19:54 · 11373 阅读 · 2 评论 -
手把手教你使用nodejs编写cli(命令行)
为什么要坚持写作?写作就是求甚解的过程。在前端开发工作中,我们经常会使用到webpack-cli、Vue-cli、create-react-app等cli工具,在实际业务开发中我们也是有很多的cli需求来帮助我们实现 新工程或模块的快速创建。cli的本质就是运行node脚本原创 2021-12-31 01:25:58 · 11533 阅读 · 0 评论 -
webpack高级应用篇(十三):模块联邦(Module Federation)- 未来组件包更新解决方案
Webpack 5 增加了一个新的功能 “模块联邦”,它让 Webpack 达到了线上 Runtime 的效果,让代码直接在项目 间利用 CDN 直接共享,不再需要本地安装 Npm 包、构建再发布了!它是未来多个项目更新组件包的新的解决方案!......原创 2021-12-22 14:33:49 · 6341 阅读 · 14 评论 -
webpack高级应用篇(十二):创建 library
除了打包应用程序,`webpack` 还可以用于打包` JavaScript library`。以下适用于希望简化打包策略的 library 作者。原创 2021-12-20 17:19:10 · 1565 阅读 · 0 评论 -
webpack高级应用篇(十一):Polyfills
社区中存在许多误解,即现代浏览器“不需要”polyfill,或者 polyfill/shim 仅用于添加缺失功能 - 实际上,它们通常用于修复损坏实现(repair broken implementation),即使是在最现代的浏览器中,也会出现这种情况。 因此,最佳实践仍然是,不加选择地和同步地加载所有 polyfill/shim,尽管这会导致额外的 bundle 体积成本。原创 2021-12-18 18:11:52 · 2393 阅读 · 0 评论 -
webpack高级应用篇(十):渐进式网络应用程序PWA(Service Workers)
渐进式网络应用程序(progressive web application - PWA),是一种可以提供类似于native app(原生应用程序) 体验的 web app(网络应用程序)。PWA 可以用来做很多事。其中最重要的是,在离线时应用程序能够继续运行功能。这是通过使用名为 Service Workers 的 web 技术来实现的。原创 2021-12-16 00:25:31 · 1525 阅读 · 0 评论 -
webpack高级应用篇(九):tree shaking(usedExports) 与 sideEffects
你可以将应用程序想象成一棵树。绿色表示实际用到的 source code(源码) 和 library(库),是树上活的树叶。灰色表示未引用代码,是秋天树上枯萎的树叶。为了除去死去的树叶,你必须摇动这棵树,使它们落下。*tree shaking* 是一个术语,通常用于描述**移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 [静态结构]特性,例如 import、export原创 2021-12-14 11:05:16 · 3527 阅读 · 4 评论 -
webpack高级应用篇(八):多页面应用程序
尽管单页面应用很流行,但是我们并不总是需要它。在多页面应用程序中,server 会拉取一个新的 HTML 文档给你的客户端。页面重新加载此新文档,并且资源被重新下载。然而,这给了我们特殊的机会去做很多事,例如使用 为页面间共享optimization.splitChunks的应用程序代码创建 bundle。由于入口起点数量的增多,多页应用能够复用多个入口起点之间的大量代码/模块,从而可以极大地从这些技术中受益。原创 2021-12-11 22:39:44 · 1246 阅读 · 1 评论 -
webpack高级应用篇(七):在 webpack 工程化环境中集成 TypeScript
如何在 webpack 工程化环境中集成 TypeScript?webpack + TypeScript + ESLint原创 2021-12-11 11:27:17 · 585 阅读 · 0 评论 -
webpack高级应用篇(六):PostCSS 与 CSS Modules
PostCSS 是一个用 JavaScript 工具和插件转换 CSS 代码的工具。比如可以使用 Autoprefixer 插件自动获取浏览器的流行度和能够支持的属性,并根据这些数据帮我们自动的 为 CSS 规则添加前缀,将最新的 CSS 语法转换成大多数浏览器都能理解的语法。CSS Modules解决css命名冲突问题,让你放心优雅的写css。原创 2021-12-10 17:39:53 · 1554 阅读 · 0 评论 -
weboack高级应用篇(五):打包结果分析 - 依赖图(dependency graph)
每当一个文件依赖另一个文件时,webpack 都会将文件视为直接存在 *依赖关系*。这使得 webpack 可以获取非代码资源,如 images 或 web 字体等。并会把它们作为 *依赖* 提供给应用程序。当 webpack 处理应用程序时,它会根据命令行参数中或配置文件中定义的模块列表开始处理。 从 入口开始,webpack 会递归的构建一个 *依赖关系图*,这个依赖图包含着应用程序中所需的每个模块,然后将所有模块打包为少量的 *bundle* —— 通常只有一个 —— 可由浏览器加载。原创 2021-12-08 22:06:45 · 1788 阅读 · 0 评论 -
Webpack高级应用篇(四):模块解析(Module Resolution)
resolver 帮助webpack 从每个 require/import 语句中,找到需要引入到 bundle 中的模块代码。当打包模块时,webpack 使用 enhanced-resolve 来解析文件路径。原创 2021-12-08 19:45:58 · 1336 阅读 · 0 评论 -
Git Hooks 与 Husky —— 配合 eslint 规范代码
在项目规范化开发过程中,我们希望同事提交的代码都是符合代码规范的。我们可以使用 `ESLint` 格式化工具来校验代码;但是如何来强有力的保证大家提交到远程仓库的代码一定是经过 ESLint 检查并修复的呢?Git Hooks 来解决这个问题;使用 pre-commit 来 进行 eslint 校验;使用 husky 来简化 git hooks 配置;原创 2021-12-07 23:07:59 · 2175 阅读 · 0 评论 -
webpack高级应用篇(三):ESLint
本文介绍webpack 结合 ESLint 使用;主要解决安装ESLint、ESLint实时检查、IDE中使用ESLint、快捷修复;vscode eslint;webstorm eslint;eslint --fix;devServer.client.overlay;vue 官方: eslint-config-vue;ESLint常见问题及解决方案...原创 2021-12-07 10:30:17 · 2086 阅读 · 0 评论