随笔分类 - 前端工程化
1
摘要：1. prettier 2. eslint 1. eslint-loader 3. githooks 1. precommit 4. commitlint 5. CICD -> jetbrain 1. 如何自动部署 1. webpack/rollup -> npm package webpack 的
阅读全文
摘要：1. .git/hooks 2. git在提交之前走一遍git/hooks里面的勾子 如何跳过githooks git commit --no-verify
阅读全文
摘要：是的，npm中确实存在幽灵依赖（Ghost Dependencies），也称为虚拟依赖（Virtual Dependencies）。 幽灵依赖指的是在项目中虽然没有显式引用该依赖，但是存在其他依赖与该依赖版本有冲突，导致该依赖被安装到项目中，占用项目的空间和资源。 举个例子，假设项目引用了两个库 A
阅读全文
摘要：pnpm 讲解 阿里数据中台前端团队分享前端界的好文精读——帮你筛选靠谱的内容。 pnpm 全称是 “Performant NPM”，即高性能的 npm。它结合软硬链接与新的依赖组织方式，大大提升了包管理的效率，也同时解决了 “幻影依赖” 的问题，让包管理更加规范，减少潜在风险发生的可能性。 使用
阅读全文
摘要：npm的问题 npm中node_modules是嵌套的，但是包和包之间会有相互嵌套依赖的关系，这样会导致一个项目中重复安装了很多包 windows中文件路径最长260多个字节，这样嵌套如果超过windows的路径长度会导致项目都启不起来 yarn yarn 解决了重复嵌套和路径过长的问题，它将包文件
阅读全文
摘要：Git Tag 规范# Tag 需遵循 语义化版本 semver 规范 命名规则：[类型][release版本]-[stages版本] 例如： js v3.0.1 v3.0.0 v3.0.0-rc.3 v3.0.0-rc.2 v3.0.0-rc.1 v3.2.0-beta.3 v3.2.0-beta
阅读全文
摘要：现在我们要开发一个项目，我们都知道为了方便项目管理，要写一个版本号，那开发的时候初始的版本号是多少呢？是 1.0.0 还是 0.0.1 开始？ 如果一个版本号为 X.Y.Z，什么时候是 X 应该加 1，什么时候 Y 应该加 1 ，什么时候 Z 应该加 1，加 1 遵循十进制吗？比如 1.0.9 的下
阅读全文
摘要：1. 构建压缩# bash # 构建 pnpm run build # 压缩产物 tar -czvf dist.tar.gz dist/ 2. 登录并上传资源到服务# shell # 上传 静态资源。xxx替换为实际服务地址，根据实际路径定义。 scp dist.tar.gz root@xx.xxx
阅读全文
摘要：no bundle 是基于浏览器支持 es module 来实现的，浏览器会做 es module 的依赖分析，然后加载对应的模块，这样自然就不用自己做依赖分析了，只需要实现模块的编译即可。 所以，no bundle 工具会启动一个开发服务器，根据请求的模块路径来进行相应的编译，然后返回编译后的代码
阅读全文
摘要：onventional-changelog 是一款可以根据项目的commit 和 metadata信息自动生成 changelogs 和 release notes的系列工具，并且在辅助 standard-version 工具的情况下，可以自动帮你完成生成version、打tag, 生成CHANGE
阅读全文
摘要：package.json就是一个json文件，除了能够描述项目的包依赖外，允许我们使用“语义化版本规则”指明你项目依赖包的版本，让你的构建更好地与其他开发者分享，便于重复使用。 package.json package.json常用属性 package.json环境相关属性 package.json
阅读全文
摘要：Vite： 下一代前端工具 Vite(读音类似于[weɪt]，法语，快的意思) 是一个由原生 ES Module 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。 虽然 2021 年 webpack 仍然是毫无争议的构建之王
阅读全文
摘要：Commonjs的缺点 模块加载器由 Node.js 提供，依赖了 Node.js 本身的功能实现，比如文件系统，如果 CommonJS 模块直接放到浏览器中是无法执行的。当然, 业界也产生了 browserify 这种打包工具来支持打包 CommonJS 模块，从而顺利在浏览器中执行，相当于社区实
阅读全文
摘要：AMD全称为Asynchronous Module Definition，即异步模块定义规范。模块根据这个规范，在浏览器环境中会被异步加载，而不会像 CommonJS 规范进行同步加载，也就不会产生同步请求导致的浏览器解析过程阻塞的问题了 // main.js define(["./print"],
阅读全文
摘要：脚手架 预置一些通用的JS文件，埋点/数据处理/HTTP封装/Utils工具/时间包/一些可以公用的组件 构建发布 资源上传cdn配置 docker的生成与上传 CI的缓存配置 内部镜像源的配置 保持风格和样式的统一 eslint 语法 pertter 编码格式的统一 stylelint hooks
阅读全文
摘要：pm-run-all npm-run-all可以轻易的串行或者并行各种脚本。https://www.npmjs.com/package/npm-run-all 使用方法： // 可以异步同时执行两个脚本 { "scripts": { "dev:esm": "run-p watch:esm serve
阅读全文
摘要：commander, yargs, and minimist 都是 JavaScript 库，用于解析命令行参数。 commander 是一个轻量级的命令行参数解析器，用于简化命令行程序的开发。它允许开发人员通过编写简单的代码来定义命令行参数和选项，并且可以生成帮助信息。 yargs 是一个功能强大
阅读全文
摘要：JS 代码压缩有哪些策略 去除换行，去除空白字符 长变量变成短变量 预计算 见terser更多策略配置 webpack中使用terser-webpack-plugin进行代码压缩 terser compress: { drop_console: true //去除打包以后代码中的console }
阅读全文
摘要：方案一：使用 rsync 配置指南# bash cd /data/opt/nginx/html tar xf dist.tar.gz rsync -avr dist/PROJECT_NAME/ \rm -rf dist dist.tar.gz 示例# 历史 bash cd /data/opt/ngi
阅读全文
摘要：并行 Pipeline job 缓存依赖中间产物 -> 缓存加速 npm i -> Gitlib CI node_modules 私有仓库 开启多进程 build 多进程 限制范围 -> 增量打包 webpack5 cache npm -> yarn 为什么变快 pnpm 更快一些 rancher
阅读全文
1
浙公网安备 33010602011771号