精通现代前端工具链及生态

精通现代前端工具链及生态

精通现代前端工具链及生态

欢迎来到前端工具链专栏，您将学到如何使用pnpm进行依赖管理、深入理解Rollup和SWC等构建工具、掌握代码压缩与优化的Terser、利用Babel进行语法转换、以及如何高效地配置和使用ESLint和Prettier进行代码规范和格式化。还提供了前端通用API的实战技巧，更好地应对实际项目中的挑战

等 121 人订阅共20篇文章创建于2023-10-08

⚡️ 万字总结前端构建引擎 Rspack 前世今生与高性能内幕

Why Rspack? 前端工具现状开发/生产构建时间长巨型应用开发：启动时间过长，通常为 5-10 分钟，单次 HMR 10-20 秒生产：构建时间过长，通常为 10-20 分钟，降低持续部

4月前
734
6
评论

⚡️ 万字总结前端构建引擎 Rspack 前世今生与高性能内幕

⚡️ 一文搞懂 Vite 原理、生产构建与插件设计

认识Vite Vite是什么是脚手架？是构建工具？首先搞清楚这两者的定义：脚手架：帮助我们搭建开发环境的项目代码的工具构建工具：将代码从开发环境构建到生产环境构建工具的发展：第一代构建工具

9月前
572
9
评论

⚡️ 一文搞懂 Vite 原理、生产构建与插件设计

前端包管理进阶：通用函数库与组件库打包实战

大纲 npm回顾明确了包的概念一个目录下面必须要有一个包的描述文件 package.json 作用域包和非作用域包包的版本控制符号 ^ ~ npm 进阶指令查看包信息相关的指令查看本地包 n

1年前
715
4
1

前端包管理进阶：通用函数库与组件库打包实战

🚀 2w字带你精通前端脚手架开源工具开发

前端脚手架教程前言虽然vue-cli，CRA等前端脚手架已经非常方便好用，特别是vue-cli，可以快速灵活的创建各种各样搭配的项目初始化模板，但其实，还是不太够用。比如，要么可能希望自定义一些w

1年前
3.1k
49
1

🚀 2w字带你精通前端脚手架开源工具开发

🔥 爆肝5w字，带你深入前端构建工具 Rollup 高阶使用、API、插件机制和开发

rollup 前端工程化历程除屑优化(tree shaking) 除了可以使用 ES 模块之外，Rollup 还可以静态分析你导入的代码，并将排除任何实际上没有使用的内容，从上面的引入和最后的打包结

1年前
3.4k
50
3

🔥 爆肝5w字，带你深入前端构建工具 Rollup 高阶使用、API、插件机制和开发

Day15 【原生语言入侵前端】快速网页编译器 SWC

SWC 掘金专栏前端工具链代码仓库掘金专栏地址：https://juejin.cn/column/7287224080172302336 专栏所有代码地址：https://github.com/

1年前
270
1
评论

Day14 【代码压缩神器】Terser

Terser Terser 是一个流行的 JavaScript 解析器和压缩器，它可以帮助你优化 JavaScript 代码以减少其大小，从而提高 web 页面的加载速度。Terser 是 Uglif

1年前
1.0k
点赞
评论

Day13 【授之以渔】前端工具链通用学习法与

更多工具学习方法通过学习前面的三个工具，我们发现这些工具有一些共同的特点： API CLI 配置文件规则插件 VSCode 扩展 API 这个 API 是每个工具一定会提供的部分，也是一个工具

1年前
318
点赞
1

Day12 Babel 插件、预设开发与实战

掘金专栏前端工具链代码仓库掘金专栏地址：https://juejin.cn/column/7287224080172302336 专栏所有代码地址：https://github.com/Sunn

1年前
329
点赞
评论

Day11 【语法转译】全球使用最广的 JavaScript 转译器：Babel

Babel介绍 Babel 是一个编译器，主要用于将最新的 JavaScript 代码转化为向后兼容的代码，以便在老版本的浏览器或环境中运行。例如，你可能在开发时使用了 ES6、ES7 或者更高级的

1年前
95
点赞
评论

Day10 【最佳实践】集成 Prettier 与企业开发实战

集成Prettier 掘金专栏前端工具链代码仓库掘金专栏地址：https://juejin.cn/column/7287224080172302336 专栏所有代码地址：https://gith

1年前
87
2
评论

Day9 【大显身手】ESlint 插件开发与实战

ESLint 插件掘金专栏前端工具链代码仓库掘金专栏地址：https://juejin.cn/column/7287224080172302336 专栏所有代码地址：https://githu

1年前
1.3k
2
2

Day8 【工程视角】ESlint 再谈 CLI 与 APIS

CLI命令行工具关于 CLI 命令行工具，我们在第一节课的时候就用到过一个：在官网，我们可以看到 CLI 命令行工具的基本格式为：我们先来看后面的 [file|dir|glob]* ，这个部分

1年前
1.3k
1
评论

Day7 【纵览全局】ESlint 配置文件全解

配置文件 part1 专栏所有代码地址：https://github.com/Sunny-117/js-toochain-book 首先需要注意，配置文件系统处于一个更新期，存在两套配置文件系统，旧的

1年前
1.8k
1
评论

Day6【代码规范】初识 ESlint 与检查规则

Linter介绍从这一章我们进入到 ESLint 的学习。 linter 发展史首先和大家来聊一聊关于 linter 的发展史。静态代码分析早在 1978 年，Stephen C. Johns

1年前
1.2k
4
1

Day5【小试牛刀】prettier API 实战与极简 CLI 开发

APIs 专栏所有代码地址：https://github.com/Sunny-117/js-toochain-book 在前面我们对代码进行格式化的时候，我们采用的是命令行工具的形式，但是这些命令行工

1年前
1.4k
1
评论

Day4【代码规范】格式化规则和命令行工具

格式化规则专栏所有代码地址：https://github.com/Sunny-117/js-toochain-book 作为一个格式化代码的工具，最最重要的就是格式化依据的规则是什么？以及如何配置这

1年前
1.2k
1
2

Day3【代码格式化】初识 Prettier

Prettier介绍专栏所有代码地址：https://github.com/Sunny-117/js-toochain-book Prettier 是一个代码风格的修正工具。基本介绍代码风格是所

1年前
318
3
评论

Day2【前端工具链地基】抽象语法树

抽象语法树抽象语法树是一个非常非常重要，也是一个非常非常常见的知识点，弄清楚抽象语法树有助于我们后面的学习。上面是抽象语法树呢？当我们遇到一个比较困难的，感觉难以理解的词的时候，最简单的方式就是

1年前
1.2k
4
2

Day1【专栏概述】前端工具链-前端工具、构建工具、脚手架

首先我们这边来确定几个概念：前端工具构建工具脚手架前端工具一说到前端工具，那么这个工具的数量是非常非常多的，每一个工具实际上都是在致力于做一件事情。本门课程我们主要聚焦于介绍和 JS 相关

1年前
2.5k
16
5