• Stars
    star
    127
  • Rank 282,790 (Top 6 %)
  • Language
  • Created over 2 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

前端工程化系列

web-infra

Document License

本仓库内容为前端工程化系列,预期一周更新 1 ~ 2 篇内容。本来是想做成收费内容的,但是种种原因之下还是决定开源(其实是为了方便摆烂)。

工程化是个很大的领域,远远不止聊点 Webpack 或者脚手架那么简单,当然它们也确实属于工程化的一小部分。

其实工程化会因为公司的不同而不同,比如说基于某某业务场景我们需要这样实现工程化,但换个场景这个工程化就不太适用。因此本系列会以通用的场景去聊工程化,这些内容放在任意公司应该都是适用的,无非我们需要基于自己公司的场景做不同的修改。

接下来的内容会串联起项目初始化到部署上线环节,讲解其中涉及到的工程化内容,涉及的知识点很多,欢迎大家先 Star 及 Watch。

近一月内更新

大纲

以下大纲尚不完整,还在构思中。

前言

项目初始化阶段

开发阶段

  • Mock

构建阶段

  • Webpack
  • Vite
  • esbuild
  • 代码压缩
  • 产物切割
  • 如何自由切换构建器
  • 更好的构建工具

测试阶段

  • 测试框架

部署阶段

  • 如何发包
  • 如何部署应用

上线阶段

  • 监控

技术选型

  • Monorepo
  • 微前端

协议

  • 本作品文档采用知识共享署名 4.0 国际许可协议进行许可。 遵循许可的前提下,你可以自由地共享,包括在任何媒介上以任何形式复制、发行本作品,亦可以自由地演绎、修改、转换或以本作品为基础进行二次创作。但要求你:
    • 署名:应在使用本文档的全部或部分内容时候,注明原作者及来源信息。
    • 非商业性使用:不得用于商业出版或其他任何带有商业性质的行为。如需商业使用,请联系作者。
    • 相同方式共享的条件:在本文档基础上演绎、修改的作品,应当继续以知识共享署名 4.0 国际许可协议进行许可。

More Repositories

1

all-of-frontend

你想知道的前端内容都在这
JavaScript
5,256
star
2

Dream

我是 yck,✍️ 这里是写博客以及记录学习的地方
JavaScript
1,610
star
3

awesome-frontend-source-interpretation

从源码层面,剖析前端主流技术的底层实现原理。
JavaScript
1,286
star
4

Chat-Buy-React

Client for beginners to learn, built with React / Redux / Node
JavaScript
1,020
star
5

Front-end-knowledge

前端知识集锦
822
star
6

awesome-fe-study-source

:octocat: 获取前端学习资料,随时充电。加入前端学习小组,尽在公众号「前端真好玩」!
520
star
7

today-i-learned

记录今天学了什么
509
star
8

FE-advance-road

进阶资深前端开发
Vue
467
star
9

webpack-demo

从入门到真实项目配置,每个 commit 基本都对应一小节
CSS
235
star
10

learn-react-essence

:octocat:React 原理
189
star
11

fullstack-project

免费真全栈教学项目,包含前端、后端、Web3 技术栈,全部用前沿技术栈开发。B 站直播 + 录播
TypeScript
132
star
12

per-moniteur

一个方便获取各类性能指标及 Web Vitals 的库。
TypeScript
107
star
13

toy-micro

微前端轮子
JavaScript
85
star
14

My-wheels

Write wheels.
JavaScript
81
star
15

Vue-StudyMaps

使用 Vue.js 开发的聚合应用。通过爬虫抓取平时浏览的网站,省去逐个点开网页的时间。
JavaScript
74
star
16

wonder-editor

微信公众号编辑器
TypeScript
30
star
17

web3-study-resource

29
star
18

elephant-design

React H5 组件库
JavaScript
28
star
19

TitleNavBar

Objective-C
23
star
20

learning-english

23
star
21

wtf-ts-type

TS 国家体操队队员入选门槛要求
TypeScript
22
star
22

js-algorithms-routine

JS 刷算法套路
21
star
23

cli

吃透前端工程化:工程脚手架研发
20
star
24

web3-zero-to-master

TypeScript
17
star
25

chive-daily

韭菜日记了解下
15
star
26

fucking-frontend-client

fucking frontend 前端
TypeScript
14
star
27

react-useful-hooks

useful hooks for React
JavaScript
12
star
28

slide

个人外部分享 PPT 合集
11
star
29

easy-ui

使用 Vue 写的基础组件库
JavaScript
8
star
30

how-js-work

JavaScript
8
star
31

puzzle

TypeScript
7
star
32

LeetCode-JS

TypeScript
6
star
33

tgm

hooks 版 axios
6
star
34

my-data-analyze-road

我的数据分析学习之路
5
star
35

KieCycleScrollView

Swift 版图片轮播器
Swift
4
star
36

MVVMTest

MVVM的一次实践 Swift版
Swift
4
star
37

KieSun

3
star
38

ydoc

文档站点
TypeScript
3
star
39

wx-example

JavaScript
2
star
40

hooks

react custom hooks
JavaScript
2
star
41

fast-create

TypeScript
2
star
42

Rust-study

Rust
2
star
43

StudyCode

平时练习仓库
JavaScript
2
star
44

frontendKnowledges

JavaScript
2
star
45

Study-Go-together

2
star
46

fucking-sourcecode

1
star
47

types-install

JavaScript
1
star
48

learn-english-guide

1
star