五、脚手架

1.yarn语法

1.下载yarn

npm/cnpm i yarn -g

2.配置淘宝镜像

yarn config set registry https://registry.npm.taobao.org

3.查看版本信息

yarn -v

4.基本指令

npm/cnpm	yarn
npm/cnpm init -y	yarn init -y
npm/cnpm install	yarn install 或 yarn
npm/cnpm install 模块名	yarn add 模块名
npm/cnpm uninstall 模块名	yarn remove 模块名
npm/cnpm install 模块名 --save/-S	yarn add 模块名
npm/cnpm install 模块名 --save-dev/-D	yarn add 模块名 --dev
npm/cnpm install 模块名 -g	yarn global add 模块名 切记global必须是前面
npm config list	yarn global dir/list

2.cra脚手架

react脚手架种类

脚手架	作用
CRA	方式创建react框架（官方基于webpack
MY-CLI	自己搞的方式 发布到NPM官网 让所有人下载 webpack前端自动构建工具
DVA	方式创建react框架（前端自动构建工具 ->封装 主要是redux+saga+fetch+routes
UMI	方式创建react框架（也可以说基于dva、路由机制、layout机制、后端路由机制等

1.下载cra

npm/cnpm i create-react-app -g

2.创建项目

create-react-app 项目名

或者
npx create-react-app 项目名

npx不需要你去-g下载直接给你生成框架代码

3.启动项目

yarn start

4.配置index.js

// 导入模块 createRoot
import {createRoot} from 'react-dom/client'
// 导入根组件
import App from './App'
// 创建root对象
const root=createRoot(document.querySelector('#root'))
// 渲染
root.render(<App/>)

5.配置跨域

1.安装中间件

yarn add http-proxy-middleware@0.19.1 -D

2.src下创建setupProxy.js

src/setupProxy.js

const proxy = require("http-proxy-middleware");

module.exports = function (app) {
    app.use(
        proxy("/api", {
            target: "", // 目标服务器网址
            changeOrigin: true, // 是否允许跨域
            secure: false, // 关闭SSL证书验证HTTPS接口
            pathRewrite: {
                "^/api": "", // 重写路径请求
            },
        })
    );
};

3.vite脚手架

3.1 创建项目

1.运行指令

npm create vite

2.选择相应的配置

$ npm create vite
   
√ Project name: ... test
√ Select a framework: » React
√ Select a variant: » TypeScript  或者JavaScript

3.下载依赖

$ yarn 
// 或者
$ npm i

3.2 配置tsconfig.json

tsconfig.json

{
  "compilerOptions": {
    "target": "es5", // 指定 ECMAScript 版本
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ], // 要包含在编译中的依赖库文件列表
    "allowJs": true, // 允许编译 JavaScript 文件
    "skipLibCheck": true, // 跳过所有声明文件的类型检查
    "esModuleInterop": true, // 禁用命名空间引用 (import * as fs from "fs") 启用 CJS/AMD/UMD 风格引用 (import fs from "fs")
    "allowSyntheticDefaultImports": true, // 允许从没有默认导出的模块进行默认导入
    "strict": true, // 启用所有严格类型检查选项
    "forceConsistentCasingInFileNames": true, // 不允许对同一个文件使用不一致格式的引用
    "module": "esnext", // 指定模块代码生成
    "moduleResolution": "node", // 使用 Node.js 风格解析模块
    "resolveJsonModule": true, // 允许使用 .json 扩展名导入的模块
    "noEmit": true, // 不输出(意思是不编译代码，只执行类型检查
    "jsx": "react-jsx",
    "sourceMap": true, // 生成相应的.map文件
    "declaration": true, // 生成相应的.d.ts文件
    "noUnusedLocals": true, // 报告未使用的本地变量的错误
    "noUnusedParameters": true, // 报告未使用参数的错误
    "experimentalDecorators": true, // 启用对ES装饰器的实验性支持
    "incremental": true, // 通过从以前的编译中读取/写入信息到磁盘上的文件来启用增量编译
    "noFallthroughCasesInSwitch": true 
  },
  "include": ["**/*.tsx"],
  "exclude": ["node_modules", "build"] // *** 不进行类型检查的文件 ***}
}

3.3 配置跨域

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
    plugins: [react()],
    server: {
        host: "0.0.0.0", //使用当前的IP地址，没有这个就是以localhost作为本地地址
        port: 3000, //端口号为3000
        open: false, //是否在默认浏览器中自动打开该地址
        proxy: {
            //使用代理
            "/api": {
                //当有 /api开头的地址是，代理到target地址
                target: "http://39.107.231.173:3004", // 需要跨域代理的本地路径
                changeOrigin: true, //是否改变请求源头
                rewrite: (path) => path.replace(/^\/api/, ""), // 路径重写
            },
        },
    },
});