Skip to main content

Scaffolding

基本概念

当前以及未来的前端开发，一定是: 组件化/模块化
- 有利于团队协作开发
- 便于组件的复用:提高开发效率、方便后期维护、减少页面中的余代码
如何划分组件
- 业务组件:针对项目需求封装的
  - 普通业务组件没有啥复用性，只是单独拆出来的一个模块J@2 通用业务组件具备复用性]
- 功能组件:适用于多个项目例如: UI组件库中的组件
  - 通用功能组件
因为组件化开发，必然会带来“工程化”的处理也就是基于webpack等工具 rvite/rollup/turbopack..·J+
- 实现组件的合并、压缩、打包等

因为组件化开发，必然会带来“工程化”的处理
- 也就是基于webpack等工具 rvite/rollup/turbopack...J
- 实现组件的合并、压缩、打包等
- 代码编译、兼容、校验等+

create-react-app基础运用

安装脚手架
- $ npm i create-react-app -g
- mac前面要设置sudo
检查安装情况
- $ create-react-app --version
基于脚手架创建React工程化的项目
- $ create-react-app 项目名称
- 项目名称要遵循npm包命名规范: 使用“数字、小写字母、”命名

项目关键目录&文件
node modules
src: 所以后续编写的代码，几乎都放在SRC下
index.js
public : 放页面模板
index.html
package.json

一个React项目中，默认会安装
- react: React框架的核心
- react-dom:React视图染的核心基于React构建WebApp (HTML页面)
- react-native: 构建和染App的
- react-scripts:脚手架为了让项目目录看起来净-些，把webpack打包的规则及相关的插件/LOADER等都隐藏到了- node_modules目录下，react-scripts就是脚手架中自己对打包命令的一种封装，基于它打包，会调用node_modules中的webpack等进行处理!!

scripts

  "scripts": {
    "start": "react-scripts start", // 启动
    "build": "react-scripts build", // 构建
    "test": "react-scripts test", // 测试
    "eject": "react-scripts eject" // 暴露出所有webpack配置文件
  },

基本概念
create-react-app基础运用
scripts