❤React体系09-初始化配置

1、配置craco

（1）认识craco

在 React 官方搭建的项目中，你可以通过修改 webpack 配置文件来配置路径别名。通常，官方搭建的项目使用的是 Create React App（CRA），它默认隐藏了 webpack 的配置，但是你可以使用 craco 或 react-app-rewired 这样的工具来修改 webpack 配置

这里我们使用的是 craco

craco可以帮助我们可以自己配置启动的webpack，或者一些环境变量等等，允许我们在不 eject 的情况下，对 Create React App 默认配置进行灵活的定制和覆盖

（2）安装craco

yarn add @craco/craco --save

官方修改webpack需要暴露出来webpack配置,给项目配置webpack内容。必须在package.json中

npm run eject

下载完成后，我们需要在启动环境中替换为craco

（3）在package.json之中配置craco

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

（4）在项目根目录下面创建craco.config.js

文件名字不能写错。默认采用craco来加载项目，读取这个文件。

可以在这个文件中配置webpack相关的内容

// craco.config.js

module.exports = {
    webpack: {
      configure: (webpackConfig) => {
        const alias = {
          // 添加你的路径别名配置
          '@': path.resolve(__dirname, 'src'),
          '@components': path.resolve(__dirname, 'src/components'),
          '@utils': path.resolve(__dirname, 'src/utils'),
          // 更多的别名配置...
        };
  
        // 将别名配置合并到 webpack 配置中
        webpackConfig.resolve.alias = { ...webpackConfig.resolve.alias, ...alias };
  
        return webpackConfig;
      },
    },
  };

现在我们试试配置的别名的使用

在项目中使用路径别名来导入模块

import RegisterPage from '@/pages/register.js'

结果我们发现控制台报错：

报错日志如下图：path is not defined

导入补充完善path这个模块

const path = require("path");

ok 项目启动正常!

2、路径别名配置 @

但是这个时候我们发现@却无法提示，补充完善一下，这个时候我们的提示就可以正常显示出来

根目录下新建jsconfig.json 文件进行配置

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

CRA版本可以配置craco.config.js

craco.config.js

const alias = {
          // 添加你的路径别名配置
          '@':path.resolve(__dirname, 'src/'),
          '@components': path.resolve(__dirname, 'src/components'),
          '@utils': path.resolve(__dirname, 'src/utils'),
          // 更多的别名配置...
  };
// 将别名配置合并到 webpack 配置中
webpackConfig.resolve.alias = { ...webpackConfig.resolve.alias, ...alias };

return webpackConfig;

3、配置打包预览配置

打开项目yarn build打包以后，项目多了一个build文件夹

打开预览一下，发现都是报错，提示我们文件的地址找不到

这个时候我们可以配置一下我们的package.json文件

package.json文件配置如下：

"homepage": "./",

再次打开，配置显示正常！

4、配置环境变量

（1）react内置环境

先来了解一下什么是React给我们提供的环境变量

create-react-app 创建的项目有内置的环境变量 NODE_ENV，可通过 process.env.NODE_ENV 读取它。

NODE_ENV 默认有三个可能的值，分别是 development, test 和 production, 对应开发，测试，生产环境。

运行 yarn start, NODE_ENV 的值为 development;

yarn test 则是 test;

yarn build 则对应 prodution

所以我们就可以为不同的环境配置不同的环境变量

连接的后台接口变量是这样子的：

‘[http://接口的开发环境ip:端口]’

注意点

配置的名字必须是REACT_APP_xxx这种形式和开头才可以

原因： react 只读取 REACT_APP 开头的变量，其他的不认识，会被 React 忽略

（2）创建.env.development（开发环境）文件

# 开发环境
ENV = 'development'
REACT_APP_TITLE="开发环境";
REACT_APP_BASE_API ="http://localhost:8888";

（3）创建.env.production（生产环境）文件

# 生产环境
ENV = 'development'
REACT_APP_TITLE="生产环境";
REACT_APP_BASE_API ="http://localhost:8888";

然后我们检测一下自己的配置的环境变量有没有生效，其实这里只需要简单打印就可以看到。

console.log(process.env,"环境变量");

（4） 安装使用 cross-env 配置打包开发环境和测试环境

package.json 中配置脚本：在 package.json 文件中，使用 cross-env 设置不同的环境变量

yarn add cross-env --dev

配置package.json中打包命令

"scripts": {
    "build": "craco build",
    "start": "cross-env ENV=development craco start",
    "build:dev": "cross-env ENV=development craco build", // 用于开发环境
    "build:prod": "cross-env ENV=production craco build",// 用于生产环境
},

（6）查看

本地启动，可以发现我们的开发环境变量已经正常了

打包以后查看这个时候，我们的生产环境变量也正常了