create-react-app常用自定义配置教程示例

创建React应用的过程需要配置很多东西，create-react-app就是专门为我们搭建React应用而设计的CLI工具，可以帮助我们快速构建React应用，省去了很多配置的麻烦。但是有时候我们也需要在create-react-app的基础上进行一些自定义配置，本文将详细讲解create-react-app常用自定义配置教程示例。

1. 添加SASS支持

CSS是构建网站必不可少的样式表语言，而SASS则是CSS的一种超集，提供了更多的功能和语法。在create-react-app应用中，我们可以通过一些配置来让其支持SASS。

步骤

1. 安装依赖包

在create-react-app应用的根目录下执行以下命令：

npm install node-sass
npm install sass-loader

这里我们使用的是node-sass和sass-loader这两个依赖包，它们分别提供scss文件编译和webpack loader。

1. 修改webpack配置文件

要修改webpack配置文件，我们可以使用react-scripts的两种方式之一，eject或者rewire。这里我们采用rewire的方式来修改webpack配置文件。

在create-react-app应用的根目录下安装react-app-rewired和customize-cra两个依赖包：

npm install react-app-rewired customize-cra --save-dev

然后在根目录下新建一个config-overrides.js文件，在这个文件中实现我们的配置。下面是一份示例：

const { override, addWebpackModuleRule } = require('customize-cra');

module.exports = override(
  addWebpackModuleRule({
    test: /\.scss$/,
    use: [
      {
        loader: 'sass-loader'
      }
    ]
  })
);

这里我们使用了sass-loader，只要在rules中增加一条新的规则，就可以将SCSS文件编译成CSS文件。

1. 修改样式文件类型为SCSS

在create-react-app应用中，默认使用CSS作为样式文件的扩展名，我们需要将其修改成SCSS。在src目录下新建一个styles目录，在styles目录下新建一个App.scss文件，将你原来写在App.js中的CSS样式代码复制到App.scss中。最后，将App.js改名成App.jsx，并在其中引用App.scss。

示例

我们可以新建一个HelloWorld组件，在组件的根目录下新建一个HelloWorld.scss文件。然后编写以下样式：

.hello-world {
  font-size: 24px;
  color: #f44336;
}

接着在HelloWorld.jsx中引入这个样式文件：

import React from 'react';
import './HelloWorld.scss';

const HelloWorld = () => {
  return (
    <div className="hello-world">
      Hello World!
    </div>
  );
}

export default HelloWorld;

最后，我们可以在App.jsx中引入HelloWorld组件：

import React from 'react';
import HelloWorld from './components/HelloWorld/HelloWorld';

const App = () => {
  return (
    <div>
      <HelloWorld />
    </div>
  );
}

export default App;

现在启动create-react-app应用，你就可以在页面上看到Hello World!字样，字体为红色，大小为24px。

2. 使用装饰器

装饰器是一种用来修饰类、方法和属性的语法特性，可以让代码更加优雅和简洁。在create-react-app应用中，默认并不支持装饰器，但是我们可以通过一些配置来让其支持装饰器。

步骤

1. 安装依赖

在create-react-app应用的根目录下执行以下命令：

npm install @babel/plugin-proposal-decorators --save-dev

@babel/plugin-proposal-decorators是一个Babel插件，可以将装饰器语法转换成ES5的语法，从而让create-react-app应用支持装饰器。

1. 修改Babel配置

在根目录下新建一个.babelrc文件，然后在其中添加以下配置：

{
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ]
  ]
}

这里我们启用了@babel/plugin-proposal-decorators插件，并设置了legacy为true，表示启用类装饰器。

1. 注册装饰器

我们来举一个使用装饰器的例子。假设我们需要给一个组件增加样式，有两种方式：

1. 在组件中添加style属性，并设置样式；
2. 在组件上加一个高阶组件，返回一个增加了样式的组件。

这两种方式都不够优雅，在这里我们可以使用装饰器来实现。我们可以创建一个样式修饰器，接收一个样式对象作为参数，然后返回一个增加了样式的组件。下面是一份示例：

import React, { Component } from 'react';

const decorateWithStyle = style => Component => {
  return class extends React.Component {
    render() {
      const classNames = [];

      for (const [key, value] of Object.entries(style)) {
        if (value) {
          classNames.push(key);
        }
      }

      const className = classNames.join(' ');

      return <div className={className}><Component {...this.props} /></div>;
    }
  };
};

export default decorateWithStyle;

这个装饰器接收一个样式对象作为参数，我们可以使用classnames库来组合样式类名，然后返回一个新的组件。

我们可以在组件的定义前面加上@decorateWithStyle({ color: true })这个装饰器，从而给组件增加一个color样式。完整代码如下：

import React, { Component } from 'react';
import decorateWithStyle from './decorators/decorateWithStyle';
import './HelloWorld.scss';

const HelloWorld = () => {
  return (
    <div className="hello-world">Hello World!</div>
  );
};

export default decorateWithStyle({ color: true })(HelloWorld);

示例

我们可以在create-react-app应用中新建一个HelloWorld组件，并在组件中使用装饰器。在组件的根目录下新建一个HelloWorld.scss文件，并编写以下样式：

.hello-world {
  font-size: 24px;
}

.hello-world.color {
  color: #f44336;
}

然后新建一个decorators目录，在decorators目录下新建一个decorateWithStyle.js文件，将以下代码复制进去：

import React, { Component } from 'react';
import classnames from 'classnames';

const decorateWithStyle = style => Component => {
  return class extends React.Component {
    render() {
      const classNames = classnames(style);

      return <div className={classNames}><Component {...this.props} /></div>;
    }
  };
};

export default decorateWithStyle;

接着，在HelloWorld.jsx文件中引入这个装饰器：

import React, { Component } from 'react';
import decorateWithStyle from '../decorators/decorateWithStyle';
import './HelloWorld.scss';

const HelloWorld = () => {
  return (
    <div className="hello-world">Hello World!</div>
  );
};

export default decorateWithStyle({ color: true })(HelloWorld);

现在启动create-react-app应用，在页面上你可以看到，Hello World!字样为红色。