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"