create-react-app 项目配置全解析

create-react-app 是基于 React 的官方脚手架工具，使用 create-react-app 可以快速构建一个 React 应用，并且默认已经配置了一些开发所需的基础配置，可以省去我们自己手动配置的过程。

安装

使用 create-react-app 前需要先全局安装该工具，使用以下命令进行安装：

npm install -g create-react-app

创建项目

使用 create-react-app 创建一个项目非常简单，只需在命令行中执行以下命令：

create-react-app <项目名>

例如，创建一个名为 my-app 的项目：

create-react-app my-app

项目目录结构

执行上述命令后，create-react-app 会自动创建一个基于 React 的项目，该项目的目录结构如下：

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

其中，public/ 目录存储项目入口文件和其他静态文件，src/ 目录存储项目的源代码。

配置文件

create-react-app 为我们封装了 webpack 配置，如果我们需要修改一些 webpack 的配置项，那么需要使用 eject 命令将配置文件暴露出来，并且此操作是不可逆的，执行后将不能回滚，因此在 eject 前需要确认操作。

使用以下命令执行 eject 操作：

npm run eject

执行上述命令后，create-react-app 会将隐藏的配置文件暴露出来，暴露后会多出一个名为 config 的目录，该目录中存储了 webpack 配置相关的文件。

示例说明

以下为两个配合 create-react-app 使用的示例。

示例一

假设我们现在需要在项目中引入 antd 库，我们可以使用以下命令进行安装：

npm install antd --save

安装完成后，我们需要在项目中引入该库，具体操作如下：

在 index.js 中添加以下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

然后在 App.js 中使用 antd 的组件：

import React, { Component } from 'react';
import { Button } from 'antd';

class App extends Component {
  render() {
    return (
      <div>
        <Button type="primary">Button</Button>
      </div>
    );
  }
}

export default App;

示例二

假设我们需要在项目中使用 sass 预处理语言，我们可以使用以下命令进行安装：

npm install node-sass sass-loader --save-dev

安装完成后，在 config/webpack.config.js 添加以下代码：

const sassRegex = /\.scss$/,
      sassModuleRegex = /\.module\.scss$/;

// ...

// 添加 sass 和 scss 文件处理
{
    test: sassRegex,
    exclude: sassModuleRegex,
    use: [
      isEnvDevelopment && 'style-loader',
      isEnvProduction && MiniCssExtractPlugin.loader,
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 2,
        },
      },
      {
        loader: require.resolve('sass-loader'),
        options: {
          implementation: require('node-sass'),
        },
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            autoprefixer({
              flexbox: 'no-2009',
            }),
          ],
        },
      },
    ].filter(Boolean),
},
{
    test: sassModuleRegex,
    use: [
      isEnvDevelopment && 'style-loader',
      isEnvProduction && MiniCssExtractPlugin.loader,
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 2,
          modules: {
            getLocalIdent: getCSSModuleLocalIdent,
          },
        },
      },
      {
        loader: require.resolve('sass-loader'),
        options: {
          implementation: require('node-sass'),
          sassOptions: {
            modules: true,
          },
        },
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            autoprefixer({
              flexbox: 'no-2009',
            }),
          ],
        },
      },
    ].filter(Boolean),
},

添加完成后，我们可以在项目中使用 scss 文件了，例如在 App.js 中添加以下代码：

@import './App.module.scss';

.App {
  font-family: sans-serif;
  text-align: center;
}

$font-size: 32px;

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: $font-size;
  margin-top: $font-size;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

$primary-color: #1890ff;

.Button {
  background: $primary-color;
  border: none;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background: lighten($primary-color, 10%);
  }
}

注意：如果修改了以上配置后，需要重新执行 npm start 才能生效。