Tag: frontend-engineering
All the articles with the tag "frontend-engineering".
什么是 CICD
Published: at 16:00+ CI ，Continuous Integration，持续集成。 + CD ，Continuous Deployment，持续部署。 CICD 一般合称，无需特意区分二者区别。从开发、测试到上线的过程中，借助于 CICD 进行一些自动化处理，保障项目质量。 CICD 与 git 集成在一起，可理解为服务器端的 git hooks :
前后端分离
Published: at 16:00强大的分裂感。现在使用 React 开发业务，但是这里边 Component 我来写，你来负责 CSS。 + controller + user + views + user 由于 set-cookie 的需要， /etc/host 静态资源服务器 在线上使用性能更加强大的 nginx 。 BFF ， Backend for Fronte
corejs
Published: at 16:00$1 是关于 ES 标准最出名的 polyfill ，polyfill 意指当浏览器不支持某一最新 API 时，它将帮你实现，中文叫做垫片。你也许每天都与它打交道，但你毫不知情。 > 有一段时间，当你执行 npm install 并且项目依赖 core-js 时，会发现 core-js 的作者正借助于 npm postinstall 在找
如何使用 docker 部署前端
Published: at 16:00使用 docker 部署前端最大的好处是隔离环境，单独管理： 1. 前端项目依赖于 Node v16，而宿主机无法满足依赖，使用容器满足需求 1. 前端项目依赖于 npm v8，而宿主机无法满足依赖，使用容器满足需求 1. 前端项目需要将 8080 端口暴露出来，而容易与宿主机其它服务冲突，使用容器与服务发现满足需求 假设本地跑起一个前端
eslint 核心
Published: at 16:00eslint ，对代码不仅有风格的校验，更有可读性、安全性、健壮性的校验。 关于校验分号、冒号等，属于风格校验，与个人风格有关，遵循团队标准即可，可商量可妥协。 与 prettier 不同， eslint 更多是关于代码健壮性校验，试举一例。 + Array.prototype.forEach 不要求也**不推荐回调函数返回值** + A
浏览器中的原生 ESM
Published: at 16:00通过 script[type=module] ，可直接在浏览器中使用原生 ESM 。这也使得前端不打包 ( Bundless ) 成为可能。 由于前端跑在浏览器中，**因此它也只能从 URL 中引入 Package ** 1. 绝对路径: https://cdn.sykpack.dev/lodash 1. 相对路径: ./lib.js 现
什么是前端工程化
Published: at 16:00随着 npm 及 webpack 的问世，前端的开发方式发生了天翻地覆的变化，生产力大幅提高。而生产力得以提高的一切措施都可称之为前端工程化。 随着工程化的发展，前端开发的以下界限渐渐明晰起来，我把它总结为四个方面。相互促进，相互发展。 1. 构建 1. 开发 1. 测试 1. 部署 由于涉及到方方面面，这里总结一个大纲。 + 编译原理
html-webpack-plugin 原理解析
Published: at 16:00在现代前端开发中，如何把打包后的 JS 资源自动注入到 html 中？ 如果最终打包生成的 main.js 既没有做 code spliting，也没有做 hash 化路径。大可以通过在 index.html 中手动控制 JS 资源。 但往往事与愿违: 1. main.js 即我们最终生成的文件带有 hash 值，如 main.8a9b3
index.html 与 http 缓存控制
Published: at 16:00假设在此之前你已对 http 缓存非常了解，很显然，当我们对静态资源设置 Cache-Control: max-age=7200 时，浏览器在两个小时之内将通过缓存读取静态资源，而并不会再次发送请求。 假设我们网站的目录如下，在 index.html 中会引用 main.js 和 main.css ，拥有网站 js，css，html 经典
JSON Loader
Published: at 16:00在前端中，网页只能加载 javascript 脚本资源，即便在 node，也只能加载 javascript 与 json 资源。那类似 webpack 、 rollup 及 vite 这类工具是如何加载图片、JSON 资源的呢？ 在 webpack 等打包工具中，号称**一切皆是模块**。 当 webpack 在这类打包器中，需要加载 J
package-lock.json 的意义何在
Published: at 16:00packagelock.json / yarn.lock 用以锁定版本号，保证开发环境与生产环境的一致性，避免出现不兼容 API 导致生产环境报错 在这个问题之前，需要了解下什么是 semver : $1。 当我们在 npm i 某个依赖时，默认的版本号是最新版本号 ^1.2.3 ，以 ^ 开头可最大限度地使用新特性，但是某些库不遵循该依
monorepo 的发展
Published: at 16:00monorepo 即一个 repo，多个 package。 + lerna + npm v7 + yarn + pnpm + react + vue + babel + eslint 当 node
dev 与 devDep 的区别
Published: at 16:00当 require('package-hello') 时，假设 package-hello 是一个 npm 库，我们是如何找到该 package 的？ 1. 寻找当前目录的 node_modules/package-hello 目录 1. 如果未找到，寻找上一级的 ../node_modules/package-hello 目录，以此递归
生产环境中使用 npm ci 代替 npm i
Published: at 16:00乍一眼看 npm ci ，CI，恩，看这名字就很适合放在持续集成中。事实也是如此，它更快，更严格，也更适合于放在 CI 中，至于为什么这么说，将会在以下分别做介绍。 npm ci 基于一个独立的库 $1 安装依赖，而它拥有和 npm install 兼容的 API。当它安装依赖时，默认是缓存优先的，它会充分利用缓存，从而加速装包。 直接从
如何对 npm 包进行升级
Published: at 16:00npm 的版本号为 semver 规范，由 [major, minor, patch] 三部分组成，其中 + major: 当你发了一个含有 Breaking Change 的 API + minor: 当你新增了一个向后兼容的功能时 + patch: 当你修复了一个向后兼容的 Bug 时 假设 react 当前版本号为 17.0.1 ，
如何对 npm package 进行发包
Published: at 16:00在发布公共 package 之前，需要在 $1进行注册一个账号。 随后，在本地(需要发包的地方)执行命令 npm login ，进行交互式操作并且登录。 发布一个 npm 包之前，填写 package.json 中以下三项最重要的字段。假设此时包的名称为 @shanyue/just-demo 之后执行 npm publish 发包即可。
name、version 与 semver 字段
Published: at 16:00name 与 version 字段几乎是 main 指 npm package 的入口文件，当我们对某个 package 进行导入时，实际上导入的是 main 字段所指向的文件。 main 是 CommonJS 时代的产物，也是最古老且最常用的入口文件。 随着 ESM 且打包工具的发展，许多 package 会打包 N 份模块化格式进行分
如何临时修复 node_modules 某个库的紧急问题？
Published: at 16:00假设 lodash 有一个 Bug，影响线上开发，应该怎么办？ 答: 三步走。 1. 在 Github 提交 Pull Request，修复 Bug，等待合并 1. 合并 PR 后，等待新版本发包 1. 升级项目中的 lodash 依赖 很合理很规范的一个流程，但是它一个最大的问题就是，太慢了，三步走完黄花菜都凉了。 此时可直接上手修改
软链接和硬链接
Published: at 16:00假设我们有一个文件，称为 hello 通过 ln -s 创建一个软链接，通过 ln 可以创建一个硬链接。 他们的区别有以下几点: 1. 软链接可理解为指向源文件的指针，它是单独的一个文件，仅仅只有几个字节，它拥有独立的 inode 1. 硬链接与源文件同时指向一个物理地址，它与源文件共享存储数据，它俩拥有相同的 inode 它解决了 np
前端工程化实践
Published: at 16:001. $1 1. $1 1. $1 1. $1 1. $1 1. $1 1. $1 1. $1 1. $1 以下 TODO 1. [如何部署 SSR 应用]() 1. [图片处理与工程化]() 1. $1 1. [CDN 下 index.html 应如何安放]() 1. $1 1. [使用 CICD 构造你的前端质量保障体系]() 1.