React项目的搭建及配置

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

前言

最近接手了一个react写的H5项目，项目框架之前被人搭建了一点，但是很不完善，所以基本又重构了一遍。项目是用create-react-app创建的，用了最新的 React18 和 React-router V6,但是没有用Typescript，由于接受的时候静态页面都写完了也就没换。 这里浅浅的总结一下吧。

项目初始化

关闭strictMode模式

在根目录中index.js文件默认采用了<React.StrictMode>模式，这样的话组件在开发模式 useEffect会调用2次，严格模式检查仅在开发模式下运行， 它们不会影响生产构建。

配置webpack

首先运行 npm run eject命令, eject是单向操作，不可逆。此命令会删除项目中单独的构建依赖项，并将所有配置文件和依赖项复制到项目中。你会发现项目中多了 config、 scripts 文件package.json中也会多了很多依赖，之后我们就可以对项目进行个性化定制了。

这里主要进行了alias别名配置，方便我们在项目中import文件

• alias配置

  在 config/webpack.config.js文件中，我们搜索到alias配置项然后配置就行 这里 @ 操作符就是别名， path.appSrc 是 config/paths.js中配置的 src 的路径，或者你也可以使用 '@': path.resolve(__dirname, '../src') 自己配置。配置好别名后在写代码的时候你会发现没有路径提示，我们还要配置一下。

• 路径提示

  根目录下新建 jsconfig.json 文件，path 配置如下

  {
    "compilerOptions": {
      "experimentalDecorators": true,
      "baseUrl": "./",
      "paths": {
        "@/*": ["src/*"]
      }
    },
    "exclude": ["node_modules", "dist"]
  }
  
  

• sass采用vw 移动端适配

在React中，使用sass写样式文件会遇到样式冲突的问题，我们一般采用${name}.module.scss进行处理，但是这样的话我们引入时就需要使用下面的方式

import styles from './${name}.module.scss'
......
return (
    ......
    <div className={styles.styleName}></div>
)

由于接手项目时已经采取了在组件根元素添加样式类名来防止样式冲突，所以就没有采取这种方式。 下面我们介绍一下vw 适配的添加 在全局样式文件中定义$vw变量：

$device_width: 375;
$vw: (100vw / $device_width);

使用 npm install sass-resources-loader --save 引入依赖，之后配置webpack

由于没有采用module.scss方法，所以配置在了sassRegex的配置中，而不是sassModuleRegex

参考链接：

# 超详细讲解H5移动端适配