3.7k 字 3 分钟

# npm, yarn, 遇到了什么问腿？ 为了得到这个问题的答案，我们需要对 npm，yarn 执行 npm install or yarn install 后，在 node_modules 文件夹里面是怎么管理依赖的。 # npm3 版本之前对依赖的管理 npm3 版本之前在生成的 node_modules 文件夹对依赖的管理是嵌套结构的 假设我们有一个项目，它依赖于 b 包， c 包， b 包又依赖于 d 包和 f 包， c 包又依赖于 d 包和 f 包 依赖关系如下： 当我们运行 npm install 的时候，生成的 node_modules...
4.6k 字 4 分钟

# plop 是什么，为什么需要 plop Plop is a little tool that saves you time and helps your team build new files with consistency. 这是官网对于 plop 的评价，实际上也确实是这样， plop 可以通过命令和用户配置的 hbs 模板文件来在指定的目录下生成对应的模板代码。想一想，我们只需要通过一个命令，就可以在我们需要的目录下生成对应的文件，里面有本来需要我们手写的结构代码，这该是一件多爽的事情，可以大大的节约我们的时间 # plop 体验 # 下载 plop (推荐全局下载) pnpm...
5k 字 5 分钟

# package.json 是什么 package.json 文件会描述我们项目的所有配置信息（名称，版本，使用协议），所有 npm 包的信息（版本，是否是开发环境依赖） # 怎么创建 package.json 文件 # npmnpm init# pnpmpnpm init# 属性介绍 # name 包的名字， 不能以 . , _ , 大写字母 开头 npm 域级包 介绍及其作用 在 npm 的包管理系统中，有一种 scoped packages 机制，用于将一些 npm 包以 @scope/package...
5.7k 字 5 分钟

# esbuild API # 项目打包 build API 普通 api build API import * as esbuild from 'esbuild';async function runBuild() { // 异步方法，返回一个 Promise const result = await esbuild.build({ //---- 如下是一些常见的配置 --- // 当前项目根目录 absWorkingDir: process.cwd(), // 入口文件列表，为一个数组 entryPoints:...
1.2k 字 1 分钟

# esbuild # esubuild 为什么快 (vite 选择 esbuild 在开发环境打包第三方依赖的原因) 使用 Go 开发 Go 的代码会被直接编译成原生机器码，而不需要像 JS 一样先解析为字节码，然后再转换成字节码，大大的节省了程序运行的时间、 多核并行 因为 Go 中多线程共享内存的优势，内部打包算法充分的利用了多核 CPU 的多核优势，使得所有步骤尽可能的并行 从零造轮子 几乎没有使用第三方库，全部是自己编写的逻辑，保证了代码的极致性能 高效的内存利用 Esbuild 中从头到尾尽可能地复用一份 AST 节点数据，而不用像 JS 打包工具中频繁地解析和传递 AST...
1.2k 字 1 分钟

# 前端工程化的痛点及 vite 的解决方案 # 痛点一：模块化规范太多，需要一个支持和兼容 vite 的解决方案 支持 ESM 模块化方案（支持异步，浏览器原生支持），由于浏览器原生支持 ESM，所以可以基于 ESM 实现 no-bunder 兼容其他的模块化方案，通过在 预构建 过程中来使用 esbuild 来将其他模块化方案转换成 ESM 模块化方案面对的问题 模块的拆分 模块的依赖关系导致的加载顺序（a 模块依赖 b 模块，那就需要先引入 b 模块再引入 a 模块） 变量命名冲突 浏览器是否兼容 模块化方案发展历史 第一阶段：通过...
780 字 1 分钟

# 后端提供的下载文件的方式 直接返回文件的网络地址（一般用在静态文件上，比如图片以及各种音视频资源等） 返回文件流（一般用在动态文件上，比如根据前端选择，导出不同的统计结果 excel 等） # 不同方式，前端的处理方案 # 第一种 通过 a 标签的 download 属性和 click 函数 <a href="https://www.baidu.top.pdf" download="附件.pdf">下载文件</a> window.location.href...
1.1k 字 1 分钟

# OMI 开源申请书 # 技术方案 # OMI 编程任务分解 开发脚手架搭建 组件开发 组件设计器开发 # 任务 1：开发 OMI 组件库脚手架，以自动生成 OMI 组件模板辅助后续组件开发，并集成 Tdesign-common 提供的 Tdesign 样式文件和工具函数，保持组件的样式风格一致 实战周期 2--3 周 目标一：借鉴生态成熟的组件库脚手架 比如 valet-cli 抽离出 OMI 的 webComponents 的公共模板 以自动生成组件模板辅助开发 预计耗时： 一周 目标二：在脚手架里集成 Tdesign-common...
1.1k 字 1 分钟

# 为什么我们需要做这样的一个平台？ 工坊的很多东西 散落在各个地方 刚进来的人无法知道工坊的财富 无法得到自己需要的东西 所以我们用这样的一个平台对其做一个整合，让工坊成员都能得到自己想要的东西 开发部门的新人缺少一个项目开发的经验，我们以这样的一个平台，来让新人得到锻炼，并且提供一对一的指导 有新的技术，奇妙的想法，无法付诸于实践， 所以我们提供这样的一个可扩展的平台，随时对其进行扩展。 开发部门的新人们简历上缺乏一个优秀的，高技术的，真正的项目（有访问量的），缺乏项目部署的经验，业务思维，而我们提供这样的一个项目 #...
4.5k 字 4 分钟

# eslint # 为什么需要 eslint 因为我们写的代码有时候可能质量并不高，所以我们需要这样的一个工具来 规范我们的代码 ，保障我们的 代码质量 （比如我们写了一个变量 但是这个变量我们没有使用 那么这个变量就是多余的 这时候我们的 eslint 可以直接报错 让我们知道这个多余的变量应该删除） # 怎么在项目中集成 eslint 下载 eslint 使用你的包管理工具（pnpm，yarn，npm，npx）安装 eslint 具体命令 pnpm install eslint 初始化 eslint（） 具体命令 pnpm eslint --init , 执行该命令后会让你...