Webpack 操练场 ②：使用 Webpack 构建 TypeScript 开发环境|前端前端工程化|webpack
使用 Webpack 构建 TypeScript 开发环境对应代码：https://github.com/EsunR/webpack-playground/tree/main/templates/html-ts 准备 TypeScript 环境首先安装 TypeScript： 1pnpm insta ...
Webpack 操练场 ①：第一个 Webpack 应用|前端前端工程化|webpack
第一个 Webpack 应用对应代码：https://github.com/EsunR/webpack-playground/tree/main/templates/html 安装 webpack12345# npmnpm install webpack webpack-cli -D# pnpm（本 ...
在 Webpack 中同时使用 ts-loader 和 babel-loader|前端Javascript|Webpack-Babel-TypeScript
1. 为什么要同时使用 ts-loader 和 babel-loader在使用 Webpack 构建 TypeScript 项目时，我们通常会使用 ts-loader 来加载 ts 代码，ts-loader 会根据目标 tsconfig.json 文件调用 TypeScript Compiler 来 ...
使用 Lambda 函数实现 AWS S3 的图片缩放、质量调整、自动 webp|云原生|aws-lambda-lambda@edge-s3-webp
本文章只是讲实现方案，并不会涉及具体的代码上线，如果你想参考代码以及详细的部署流程，可以参考该项目：s3-image-handler 1. 前言不同于国内的很多对象存储服务，AWS S3 并不提供图像处理的服务，需要用户使用 Lambda 函数或者 EC2 搭建图片缩放服务，这就使用用户有比较 ...
创建 AWS S3 公共存储桶并添加 CloudFront CDN 加速域名|云原生|AWS-S3-CloudFront-CDN
1. 创建 AWS S3 存储桶进入 S3 控制台，点击 创建存储桶（Bucket），地区优先选择用户多的位置，输入桶名称后直接点击确认创建。 此时我们已经可以为创建好的存储桶上传文件了，点击上传的文件对象查看详情，复制对象 URL 到浏览器中： 然后会发现页面 403 Forbidden 的警告 ...
极米投影仪通过 HomeAssistant 与 NodeRed 接入 Homekit|其他|HomeAssistant-HomeKit-极米投影仪
是不是每次都找不到遥控器而烦恼？是不是想要语音控制投影仪的关闭和开启？ 如果你是苹果用户，那么本文将教你实现如何让极米投影仪（其他电视设备同理）接入到苹果 HomeKit 生态，实现搭配 HomePod 使用 Siri 唤醒或关闭投影仪，并且可以直接使用 IOS 集成在系统控制中心的电视遥控器来直接 ...
使用 volta 与 corepack 规范团队在不同项目中使用的 node 版本与 npm 包管理器|前端前端工程化|npm-volta-node-corepack
0. 前言在前端开发团队中，经常存在多个新老项目同时开发的情况，这些项目他们的 node 版本可能不一样，项目中所使用的包管理器也不一样。比如一些老的项目可能使用低版本 node 并使用 npm 安装项目依赖，而一些新的项目则会使用高版本 node 与 pnpm/yarn 来安装项目依赖。 如果 n ...
如何配置 SSH 管理多个 Git 仓库和以及多个 Github 账号|Git|Github-git-SSH
1. Why SSH ?在使用 github 时或者免密登录到远程服务器时，总要使用到 SSH 这个工具来创建密钥并进行连接，那什么是 SSH 呢，我们先来看一下它的简单定义： SSH是一种加密协议，全称为Secure Shell，用于安全地远程登录到服务器或其他远程设备上执行命令或传输文件。它 ...
基于 Webpack 的 Vue 服务端渲染项目提前加载当前页面所需资源|前端前端工程化|Webpack-Vue-SSR
前言当我们使用 Webpack 搭建一个基于 Vue 的服务端渲染项目时，通常会遇到一个很麻烦的问题，即我们无法提前获取到当前页面所需的资源，从而不能提前加载当前页面所需的 CSS，导致客户端在获取到服务端渲染的 HTML 时，得到的只有 HTML 文本而没有 CSS 样式，之后需要等待一会儿才能将 ...
搭建服务端渲染应用时的 Webpack 分包策略|前端前端工程化|Webpack
为什么要分包当搭建的应用注重用户打开速度时，合理的分包策略有助于减少用户首屏加载应用时加载的资源数量，并且对于部分资源可以复用，避免重复加载，从而提升用户体验。 举例来说，使用 webpack 进行合理的分包可以达到如下效果，比如： 让项目的分包体积更小，充分利用浏览器并行加载的能力，避免加载过大 ...