前端工程化
文章平均质量分 90
前端工程化的学习
GoldenaArcher
Done is better than perfect
展开
-
Keycloak - docker 运行 & 前端集成
这里的记录主要是跟我们的项目相关的一些本地运行/测试,云端用的 keycloak 版本不一样,不过本地我能找到的最简单的配置是这样的。原创 2024-01-25 09:21:19 · 1792 阅读 · 0 评论 -
从设计到产品
最近上的一些课的笔记,从 0 开始设计项目的角度去看产品。原创 2023-05-01 03:39:13 · 786 阅读 · 0 评论 -
使用 node 管理器管理 monorepo
不包含工具的使用,一方面因为我没用到过工具,另外一方面看了一下 Lerna,说 Learna 底层还是用到了 yarn 去进行管理,二者并不冲突,所以打算先学习一下基础再说。顺便,如果使用的是 symlink,有一个好处就在于修改lib-b中的代码,是不需要重新进行打包的,其他的 package 可以自动获取最新的代码。原创 2023-04-18 03:22:16 · 329 阅读 · 0 评论 -
webpack5 - 查漏补缺 2
MPA (Single Page Application)指的是多页面应用,这里修改基本也针对 MPA 而不是 SPA。原创 2023-01-08 16:13:57 · 136 阅读 · 0 评论 -
webpack5 查漏补缺
webpack5 的一些补充,其实大部分内容都已经在和里讲过了来着。一个补充就是对于简单的练手项目,比如说建立一个 html 文件然后里面引入 js 文件这种,之前用 parcel 去初始化项目(因为不用配置),现在的话 webpack 也不需要配置了,直接下载 webpack 和 cli 之后,直接运行,webpack5 本身包含一些默认配置会直接运行。相当于如果不想写配置文件,直接用个 concurrently+webpack 应该就行了……?没有配置文件的话,index.js。原创 2023-01-08 14:19:59 · 484 阅读 · 0 评论 -
Husky 的报错及简易配置
Husky 的报错及简易配置因为最近有一个需要协同合作的小项目,但是每个人的编辑器配置好像都不太一样,以至于在 code review 的时候发现关于空格、tab 之类的差异,所以就像使用 husky 去配置同步一下。这样也避免之后需要进行 code review 的时候将时间花费在无谓的 formatter 上。Husky 是一个 GitHub pre-commit hook,会在每一次 git commit 触发后自动运行。目前的项目是使用 CRA 创建的一个 TypeScript 项目,因此不需要原创 2022-04-23 16:08:12 · 5237 阅读 · 0 评论 -
[万字逐步详解]使用 webpack 打包 vue 项目(优化生产环境)
[万字逐步详解]使用 webpack 打包 vue 项目(优化生产环境)分离环境环境分析共用配置生产配置开发配置功能优化不导出死代码其他模式下增添代码压缩功能合并模块代码分割魔法注释提取 CSS 文件压缩 CSS 文件Hash 输出文件这次项目中使用的插件和加载器版本之前在 [万字逐步详解]使用 webpack 打包 vue 项目(基础生产环境) 中比较详尽的手把手带着过了一遍 production 环境的部署,以及在 [万字逐步详解]使用 webpack-dev-server + ESLint 配置 v原创 2021-07-06 15:37:38 · 1611 阅读 · 15 评论 -
[万字逐步详解]使用 webpack-dev-server + ESLint 配置 vue 项目的开发环境
[逐步详解]使用 webpack-dev-server 配置 vue 项目的开发环境使用 webpack-dev-server 开发服务器的部署添加 source mapHRM 的开启验证 HMR 效果在上一篇 [万字逐步详解]使用 webpack 打包 vue 项目(基础生产环境) 中,一步一步的完成了基础生产环境的配置,这里就是对开发环境的配置进行实现了。本次会使用到的依赖只有 webpack-dev-server,这里会用 webpack-dev-server 去进行开发环境的配置,并且实现以下功原创 2021-07-03 17:34:13 · 2003 阅读 · 48 评论 -
[万字逐步详解]使用 webpack 打包 vue 项目(基础生产环境)
本次项目属于练手项目,使用的是 vue-cli 新建的新手引导页面,项目本身没有特别复杂的逻辑,而且这里也不涉及到 Vue 的学习,只是会通过逐步分解完成使用 webpack 对项目完成最终的打包。本次会使用到的 插件(plugins) 和 加载器(loaders) 有:webpack & webpack-clivue-loader & vue-template-compilerstyle-loader & less & less-loader...原创 2021-07-01 13:25:28 · 2457 阅读 · 44 评论 -
flow 使用详解 + 小结
出现 flow 这种静态检查的工具是与 JavaScript 的使用有些关系的——这是一种弱类型同事是动态类型的语言。这就造成了 JavaScript 会有一些比较哪恼人的特性,如可以不声明直接使用,又比如在运行时动态的决定变量的类型,如:// 未声明就是用a = 10; // 可以运行,不会有问题a = 'hello world'; // 修改了 a 的类型,但是也没有问题,不会报错这种特性在个人项目中可能不是问题,还是写起来会很方便的一个特点。但是一旦项目体量比较大了,那么实现起来就会有不便之原创 2021-06-27 20:03:48 · 4162 阅读 · 41 评论 -
[万字详解,学习案例] 使用 gulp 去进行自动化构建一个项目
关于 gulp 的更细致的讲解,可以参考上文:逐步详解如何使用 gulp 去进行自动化构建。不看问题也不大,都是手把手地实现,也会带注释。实现的内容包括:编译和压缩CSS编译和压缩JavaScript编译和压缩HTML压缩图片压缩字体cv其他所需项目自动化构建流程,并完成打包任务原创 2021-06-21 01:37:56 · 1214 阅读 · 21 评论 -
逐步详解如何使用 gulp 去进行自动化构建
在项目开发完,上线前还需要做一系列的准备工作,包括不限于:压缩 CSS, JavaScript 和 HTML 文件如果使用 SASS 或是 LESS 的话,还需要对其进行编译,否则整个项目都无法运行同理,如果有对 JavaScript 的版本需求,还需要使用 babel 对 JavaScript 进行转译,否则有些功能同样无法实现…所有的流程全都人力完成的话,一来耗时,二来会介入很多人为错误,所以很多的自动化构建工具应运而生。Gulp 是基于 node.js 的一个前端自动化构建工具,用于处原创 2021-06-18 05:22:07 · 1489 阅读 · 43 评论 -
使用 Yeoman 自定义 Generator,包含新建 Vue 模板案例
本章学习内容如下: 学习 Yeoman 即 Generator 的使用 使用 Yeoman 自定义一个 Generator 案例学习:使用 Yeoman 自定义一个 Vue 项目 案例学习:使用 inquirer 和 ejs 实现一个小型的脚手架工具什么是 YeomanYeoman 是一个通用型的网页应用的脚手架工具,和 angular-cli, create-react-app, vue-cli 比起来,它是一个更加通用的脚手架工具,但是也因此它的灵活性更高。原创 2021-06-17 03:27:38 · 1812 阅读 · 45 评论