ECMA进阶1之从0~1搭建react同构体系项目1

ES6项目实战

前期介绍

SSR

当页面首次加载时候，spa只会返回空节点，内容都是空的，而ssr会将页面的骨架，内容等提前加载出来，提高效率。
spa首屏加载很慢。

SSR:利于首屏加载
CSR:(spa)不利于首屏加载，页面结构为空节点

本次项目可以执行在浏览器，也可以执行在客户端中

pnpm 包管理工具

1. 构建速度快
2. 支持 monorepo
3. 高效率利用磁盘空间
4. 安全性比较高

package.json

1. build:run-s => npm-run-all 执行多个npm脚本（可并行、串行）
   build:server
   build:client
   以上两个并行执行
2. “preinstall”: “npx only-allow pnpm” 对安装包有限制，只能使用pnpm
3. 包的分析，借助analyze插件分析包依赖的大小，可优化包的体积

项目搭建

初始化配置

npm init

引入encode-fe-lint

npm install encode-fe-lint -gencode-fe-lint -g

encode-fe-lint init

选择 React项目(TypeScript)，只需要prettierrc

encode-fe-lint-scan:对代码进行扫描
encode-fe-lint-fix:对当前代码进行修复

pre-commit:触发代码扫描
commit-msg:触发扫描

package.json:

基础环境的配置

1. 修改package.json
2. react-> 使用 babel 通过babel插件 babel.config.js或者 .babelrc将jsx、tsx代码转译
3. tsconfig相关的配置
4. postcss 给css能力增强
5. webpack配置（client端、server端）：用的cross-env

修改package.json

• 全局：
  • 去掉version -> private:“true”
  • 去掉 main
• scripts脚本：
  • 去掉 test
  • 增加
    “preinstall”: “npx only-allow pnpm”,
    “prepare”: “husky install”,
    “init”:“pnpm install”,
• engines
  • “node”: “>=12”,
    “npm”:“>=6”
• 引入依赖devDependencies,dependencies

引入好后执行命令安装：

pnpm run init

如果报关于husky的错，执行下面代码再重新安装

git init

{"name": "es6-demo","private": "true","description": "","scripts": {"preinstall": "npx only-allow pnpm","prepare": "husky install","init":"pnpm install","encode-fe-lint-scan": "encode-fe-lint scan","encode-fe-lint-fix": "encode-fe-lint fix"},"engines": {"node": ">=12","npm":">=6"},
"devDependencies": {...},"dependencies": {...},"author": "echo","license": "ISC","husky": {"hooks": {"pre-commit": "encode-fe-lint commit-file-scan","commit-msg": "encode-fe-lint commit-msg-scan"}}
}

babel相关

• 创建babel.config.js文件
  

module.exports = (api) => {const isWeb = api.caller((caller) => caller && caller.target === "isWeb");return {presets: [["@babel/env",  //解决高版本语法但是低版本不能兼容的问题],"@babel/typescript",["@babel/react",{runtime: "automatic",  //对jsx解析有两个版本：1.传统的React.createElement 将jsx转为虚拟dom// 2.classic},],],//预设  [react相关的预设]           //插件是对一些api的实现，例如不支持async/await的浏览器将他们的实现提前加载进来plugins: ["@loadable/babel-plugin", "@babel/plugin-transform-runtime"],env: {development: {  // react-refreshplugins: isWeb ? ["react-refresh/babel"] : undefined,},},};
};

tsconfig相关

tsc -init

{"compilerOptions": {"sourceMap": true,"target": "es5",  //目标环境 es5"module": "commonjs","lib": ["dom", "dom.iterable", "esnext"],"jsx": "react-jsx",// Specify module resolution strategy: "node" (Node.js) or "classic" (TypeScript pre-1.6)"moduleResolution": "node",// Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports.// Implies "allowSyntheticDefaultImports". Recommended by TS"esModuleInterop": true,// Skip type checking of declaration files. Recommended by TS"skipLibCheck": true,// Disallow inconsistently-cased references to the same file. Recommended by TS"forceConsistentCasingInFileNames": true,// Do not emit outputs"noEmit": true,// Raise error on expressions and declarations with an implied "any" type"noImplicitAny": false,// Report errors on unused locals"noUnusedLocals": true,// Report errors on unused parameters"noUnusedParameters": true,// Report error when not all code paths in function return a value"noImplicitReturns": true,// Report errors for fallthrough cases in switch statement"noFallthroughCasesInSwitch": true}
}

postcss相关

创建postcss.config.js文件

module.exports={plugins:[require('autoprefixer')]
}

package.json:

"browerslist":[">1%","last 2 versions"],

适配以下浏览器：

补充scripts脚本

webpack配置

建立webpack目录

base.config.ts

client.config.ts

server.config.ts

src环境

server端：

使用express启动一个服务，再返回一个html回去
将数据放到window上

client端

1. 从window上获取数据__INITIAL_STATE__。避免client再加载首屏数据
2. createStore用到redux/toolkit，它是state和router的集合
3. 渲染客户端入口 到 react-view上

路由

1. 使用Helmet，因为支持client和server

Home

使用ErrorBoundary使得代码变得健壮性

构建过程

1. 选择什么生态（Vue、React）
   React
2. 依赖
   react react-dom react-router redux
3. 构建工具的选择
   webpack、rollup、vite
4. webpack、plugins、loaders
5. 开始构建

SSR的好处

1. 利于seo
2. 利于首屏渲染
3. server输出html，client加载 js 补全事件，两者结合才能实现快速渲染，正常交互