react 实战-现代web开发的工程搭建(进阶)

1.讲什么?

讲架构:会提到很多架构的东西:SDK分层设计,隔离设计,工程架构设计

2.讲亮点

怎么去讲一些细节,有亮点的事情.

3.讲全栈

Node端,server,埋点SDK,插件的编写

亮点是什么?

具有一定的思考,技术难度,解决了什么问题

 基于业务,封装公共能力,解决业务中的标准问题,并推广派生;

使用工程化手段,解决一些流程或研发逻辑,标准的问题;

你搞了一个东子,这个东西之前行业没有,并解决了问题.

第一课

Mono仓库

为什么要构建monorepo,它是什么?

Monorepo的含义:

Monorepo是软件开发策略的一个分支,mono表示单支,repo是repository

意思是:多个项目用一个代码库来管理依赖关系

多仓Monorepo缺点,也就是mono做了什么

1.更好的代码复用,可以让所有的项目代码,都集中在单一仓库,易于抽离公共的业务组件或工具;

2.整体的构建,测试逻辑统一,方便协作.

Mono的构建方式

Lerna

更倾向于去做版本的一些管理;

没有库之间的软链,你要自己去写.

npm/yarn/pnpm

会给你做软链;

但是没有严格的包管理.

主要步骤

初始化工程

1. mkdir react-code

2. cd react-code && pnpm init

手动创建pnpm-workspace.yaml文件

packages:

  - "packages/**"

手动创建文件夹

包安装方法

全局安装:pnpm add xxx -D -w;

局部安装:pnpm add  -D --filter package-name;

内部安装:pnpm add text-util --filter text-pro

   如果要自己构建:

   packages/libs/ text-util : npm link

   packages/apps/text-pro:npm link text-util

安装测试环境

安装eslint与配置

1.pnpm add eslint -D -w

2.npx eslint --init

安装prettier与配置

pnpm add prettier -D -w

新建一个.prettierrc.json的配置

.prettierrc.json起作用,我们要安装一下VScode插件

prettier

Prettier:一般多用于代码的美化

Eslint:一般多用于代码的检测

    prettier可能和eslint有冲突

安装typescript

tsc   ts-loader   @babel/preset-typescript 的区别

 ts-loader 

他在内部调用了typescript的官方编译器tsc,所以ts-loader 和tsc 是可以公用tsconfig.json

@babel/preset-typescript

只会给你做编译,不会做类型检查

所以我们要用类型检查,就要用tsc的配置

总结

一个大型的项目,我们一般不用tsc生成代码,仅仅做类型检查

没有babel,tsc+ts-loader

有babel,@babel/preset-typescript+tsc类型检查

Ts安装

我们用tsc--init,创建一个ts的典型配置tsconfig.json

见上课讲解

再安装一下插件

安装React 

安装依赖项

前端的方案

构建的方案

Bundle - 包

一般是指产物,main.xxx.js,这个是把所有文件合并在一起的,形成了一个bundle;

Chunk - 桩

一般指的是一个"构建流程",静态分析的过程中,从入口的依赖树,形成一个叫chunk;

import()=>

Module - 模块

从构建的角度说,一个文件就是一个模块

Channel

一般是和uri挂钩的,代表唯一的地址

Bundled方案

前端工程打包:最终的结果,是形成一个js,

前端工具/组件库打包:

webpack,rollup

Bundleless方案

import $ from 'jquery'

const $=require(jquery)

Gulp,ts

落地:

项目的工程,使用webpack,构建bundled方案;

项目的组件库,使用rollup+多入口,构建bundleless方案.

css方案

基于什么样的背景

有哪些选项

为什么选择这个

Css in js方案

Emotion

 Styled-component

RN 

Css module方案

Webpack的css-loader,可以配置bem规范

block-element__modified

search-card

Utility-css方案

Tailwindcss

Windicss

组件方案

自建组件和第三方组件怎么选?

Headless 和 styled怎么选?

很多时候,antd的样式,和设计师的规范不一致,!important?

很多时候,组件的能力都差不多,但是布局和样式差别很大,不得不重写.

answer:

我们这个项目,比较重视相同的功能的多种布局能力,同时设计师的风格和现在主流的组件库差别比较大.

Headless的方案+Tailwindcss+Css module

状态方案

Zustand

Solid

Redux

Mobx

Recoil

微前端方案

Iframe

Module faderation

Web components

code split 

Single-spa  qiankun  wujie   microapp