利用create-react-app搭建react项目的基本流程

样式小白

已于 2022-10-22 23:32:38 修改

阅读量2.8k

点赞数 3

分类专栏： React 文章标签： react.js 前端 javascript

于 2022-10-22 23:22:24 首次发布

本文链接：https://blog.csdn.net/weixin_50643343/article/details/127467952

版权

React 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

create-react-app是FaceBook的React团队官方出的一个构建React单页面应用的脚手架工具；它本身集成了Webpack

首先，每个项目的搭建都是很重要的，只要搭建的完整那么之后的操作也不会出现太多的问题，在此总结一下create-react-app脚手架的搭建流程以及常用的第三方组件库引入、路由等

1、创建项目

1:使用npx
npx create-react-app react-basic
2:使用npm
npm init react-app react-basic
3:使用yarn
yarn create react-app react-basic

npx create-react-app react-mobile-app --template typescript (如果需要使用typescript则使用这个命令)

出现以下内容即创建成功（这里我使用的是typescript）

start指令用于启动开发者服务器

build指令用于打包项目

test指令用于测试

eject指令用于抽离配置文件

npm start 命令即可运行

目录结构

2、是否抽离文件

create-react-app v2 默认支持 ts 以及sass 以及css的模块化，如果使用 sass作为css预处理器，那么不需要抽离配置文件

2.1、抽离情况

1）npm run eject或cnpm run eject 或yarn eject指令抽离配置文件会出现一个config文件夹

执行命令后之后进行webpack进行二次封装

集成一些css预处理器

npm i less less-loader -D

npm i node-sass -D

npm i stylus stylus-loader -D

然后再/config/webpack.config.js 的

找到以下的代码段，找不到就通过 Ctrl+f 输入style files regexe快速定位

在这里加入配置

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
const stylusRegex = /\.stylus/;
const stylusModuleRegex = /\.module\.stylus/;

再次通过Ctrl+f输入"postcss" loader applies autoprefixer to our CSS快速定位

加入配置代码

{
          test: lessRegex,
            exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
                  modules: {
                    mode: 'icss',
                  },
                },
                'less-loader'
              ),
                // Don't consider CSS imports dead code even if the
                // containing package claims to have no side effects.
                // Remove this when webpack adds a warning or an error for this.
                // See https://github.com/webpack/webpack/issues/6571
                sideEffects: true,
        },
            {
            test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
                  modules: {
                    mode: 'local',
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'less-loader'
              ),
          },

此处只写了一个less的,stylus一样（此处第一次写react的小伙伴可能看不懂，没关系其实我们几乎不使用抽离文件的方式）

2）配置@解析别名

react-basic/config/webpack.config.js

alias: {
  '@': path.resolve('src'), 
    // Support React Native Web 搜索此关键词快速定位
    // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
    'react-native': 'react-native-web',
      // Allows for better profiling with ReactDevTools
      ...(isEnvProductionProfile && {
      'react-dom$': 'react-dom/profiling',
      'scheduler/tracing': 'scheduler/tracing-profiling',
    }),
      ...(modules.webpackAliases || {}),
},

如果ts项目，还需要在tsconfig.json中加入配置

{
"compilerOptions": {
 "target": "es6", // ts代码以es5为标准
 "lib": [
   "dom",
   "dom.iterable",
   "esnext"
 ],
 "paths": {
   "@/*": ["./src/*"]
 },
 "allowJs": true,
 "skipLibCheck": true,
 "esModuleInterop": true,
 "allowSyntheticDefaultImports": true,
 "strict": true,
 "forceConsistentCasingInFileNames": true,
 "noFallthroughCasesInSwitch": true,
 "module": "esnext",
 "moduleResolution": "node",
 "resolveJsonModule": true,
 "isolatedModules": true,
 "noEmit": true, 
 "jsx": "react-jsx"
},
"include": [
 "src",
 "src/**/*" 
]
}

下面我们测试，index.tsx

更改之后没有报错即为成功，至此我们的抽离文件操作终于结束了

2.2、不抽离的情况

配置别名

npm i @craco/craco -D

npm i @types/node -D

项目根目录中创建 craco 的配置文件：craco.config.ts(如果没有用到ts则为js后缀名)

const path = require('path')
module.exports = {
webpack: {
 alias: {
   '@': path.resolve(__dirname, 'src')
 }
}
}

更改package.json中的运行命令

"scripts": {
"start": "craco start",
"build": "craco build"
"test": "craco test"
}

3、封装axios（根据实际情况需不需要axios请求，我写项目的时候常用的就是axios，所以整理出来）

此处没有基础的小伙伴看的一定很晕，可以先去axios官网学习一下基础知识

// src/utils/request.ts
// 1.引入axios
import axios from 'axios'

// 2.项目环境
// 生产环境 process.env.NODE_ENV === 'production'  npm run build
// 测试环境 ？
// 开发环境 process.env.NODE_ENV === 'devlopment   npm run start
const isDev = process.env.NODE_ENV === 'development'

// 3.给axios添加默认选项
// 设置跨域是否需要携带凭证
axios.defaults.withCredentials = false
// axios.defaults.timeout = 6000 // 6秒超时时间
// axios.defaults.baseURL = isDev ? '基准地址' : '基准地址'

// 4.自定义axios
const ins = axios.create({
  baseURL: isDev ? '基准地址' : '基准地址',
  timeout: 6000
})


// 5.设置拦截器
// 请求的拦截器 所有的请求在开始之前先执行请求拦截器，再执行自己的请求
ins.interceptors.request.use((config) => {
  // 设置请求的loading显示 --- 使用组件不必要  ----  js模块显示
  // 设置token，一般token传递给后端通过 请求头传递 config.headers.token = ''
  return config
}, (err) => {
  return Promise.reject(err)
})

// 响应拦截器 所有的接口返回值先执行响应拦截器，再返回自己的响应的数据
ins.interceptors.response.use((response) => {
  // 关闭loading动画  --- 使用组件不必要 ----  js模块隐藏
  // 验证token，如果验证通过，返回数，如果验证不通过，直接跳转到登录页面
  return response
}, (err) => Promise.reject(err))

// 6.暴露自定义axios
export default ins

4、跨域问题

如果项目只有一个服务器，package.json如下配置

"proxy": "使用的请求基准地址"

如果有多个服务器，首先要安装http-proxy-middleware

npm i http-proxy-middleware -S

然后创建src/setupProxy.js 并放内容：

const { createProxyMiddleware } = require('http-proxy-middleware'); // 此处不使用import语法

module.exports = function (app) {
  
  app.use('/代理名字', createProxyMiddleware({
      target: '请求的基准地址',
      changeOrigin: true,
      pathRewrite: {
        '^/代理名字': ''
      }
    })
  );
}

5、路由和状态管理器

此处内容较多，状态管理器也较多，只分享一下安装的命令近期单独整理一篇关于路由和状态管理器的文章、

路由

npm i react-router-dom -S

状态管理器

npm i redux -S
npm i redux react-redux -S
npm i redux react-redux redux-thunk -S
npm i redux react-redux redux-saga -S
npm i redux react-redux redux-thunk immutable redux-immutable -S
npm i redux react-redux redux-saga immutable redux-immutable -S
npm i mobx mobx-react -S

6、组件库的引入(此处写的Ant-design)