react-cli详解

一、react-cli介绍

React-CLI是一个基于Webpack和Babel的React项目构建工具，提供了快速初始化项目，本地开发和打包发布等功能。其旨在简化React应用的开发、调试、测试和部署流程，并提供一些预置设置让用户快速上手。

React-CLI可以让您零配置地快速搭建一个React项目，也可以根据需要选择自定义配置来构建更符合您需求的应用程序，同时支持TypeScript、Sass、Less、CSS in JS等插件，并提供了很多灵活的扩展接口，可以为开发者节约大量时间和精力。

二、react-cli能处理配置文件吗

React-CLI支持基于Webpack的配置文件，您可以通过向React-CLI传递一个JavaScript配置文件来自定义Webpack的构建、开发和发布行为。React-CLI会使用您提供的配置文件来覆盖默认配置。

以下是一段自定义React-CLI配置文件的示例：

{
  "webpack": {
    "dev": {
      "entry": {
        "app": [
          "./src/index.js"
        ]
      }
    },
    "prod": {
      "entry": {
        "app": [
          "./src/index.js"
        ]
      },
      "output": {
        "filename": "[name].[chunkhash].js",
        "chunkFilename": "[name].[chunkhash].js"
      }
    }
  }
}

React-CLI还支持通过配置`.env`文件来设置环境变量，可以根据不同的环境变量配置不同的行为，例如API地址、端口号等。

三、react-cli的使用方法

React-CLI的安装非常简单：

npm install -g create-react-app

安装完成后，您可以使用`create-react-app`命令来创建一个基于React-CLI的应用程序：

npx create-react-app my-app
cd my-app
npm start

该命令将自动生成一个React应用程序的基本文件结构、配置文件和启动脚本，并自动启动一个开发服务器提供实时预览。

React-CLI还提供了许多有用的脚本命令，您可以使用以下命令来启动测试、打包发布应用程序：

npm test // 启动测试
npm run build // 打包发布应用程序

React-CLI通过内置了Webpack、Babel和ESLint等工具，为开发者提供了很多便利。例如：通过`npm run eject`命令将React-CLI的默认配置暴露出来，然后可以自由地选择你需要的配置来自定义React应用程序的构建和开发行为。

四、插件和扩展

React-CLI提供了丰富的插件和扩展接口，让您可以根据自己的需要进一步定制React应用程序的构建过程和开发工作流程。例如：

1、TypeScript支持：

React-CLI支持使用TypeScript作为开发语言，只需使用`--typescript`选项创建新项目即可：

npx create-react-app my-app --typescript

2、CSS预处理器：

除了React-CLI默认支持的CSS样式，您还可以使用Sass、Less、CSS in JS等预处理器来扩展CSS的功能。只需安装相应的插件即可：

npm install --save node-sass
npm install --save less
npm install --save styled-components

在安装完成后，可以在React组件中使用Sass或Less语法来编写样式，并使用CSS in JS库来进行更高级的样式编写，例如styled-components：

// 示例：
import styled from 'styled-components';

const Button = styled.button\`
  background-color: \${props => props.primary ? 'blue' : 'white'};
  color: \${props => props.primary ? 'white' : 'blue'};
  padding: 1rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
\`;

function App() {
  return (
    Click Me!
  );
}

3、自定义配置：

如前所述，您可以创建一个自定义的Webpack配置文件，也可以通过`react-scripts`插件提供的`eject`命令将默认配置暴露出来进行编辑。除此之外，您还可以使用其他插件和工具来自定义React应用程序的构建和开发流程。

例如，您可以使用`react-app-rewired`来覆盖create-react-app内置的Webpack配置：

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

然后，您可以在项目根目录下创建一个`config-overrides.js`文件，做一些自定义的Webpack配置，例如修改默认端口、添加alias等：

// 示例：
const path = require('path');

module.exports = function override(config, env) {
  // 修改默认端口
  config.devServer.port = 3001;

  // 添加alias
  config.resolve.alias = {
    '@': path.resolve(__dirname, 'src/')
  }

  return config;
};

修改完成后，您需要修改`package.json`中的`scripts`字段为：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

现在您可以通过自定义的Webpack配置文件来定制React-CLI的构建、运行和测试行为。

五、总结

React-CLI是一个功能强大、易于使用、高度可定制的React开发工具，它提供了方便的配置、快速的初始化、灵活的扩展和强大的工具集，让React应用程序的开发更加快速、高效和容易。