create-react-app开发常用配置教程

下面是针对“create-react-app开发常用配置教程”的完整攻略：

1、create-react-app是什么？

create-react-app 是 React 官方推出的一个用于创建 React 项目的 CLI 工具，它可以帮助我们快速构建一个完整的 React 项目，无须进行配置，只需一条命令即可生成整个应用架构。create-react-app 使用 webpack 进行打包，支持最新的 ES6/ES7 语法，并且内置了各种开发和构建工具，比如 Jest、Prettier、ESLint 和开发服务器等。

create-react-app 能够为我们提供一个标准的、规范的 React 开发环境，可以使我们更加专注于业务开发。

2、安装 create-react-app

通过 npm 可以全局安装 create-react-app，安装完毕之后，我们就可以通过 create-react-app 命令创建一个 React 项目：

npm install -g create-react-app
create-react-app my-app

3、常用配置

在项目创建之后，我们可能需要对应用做一些常用配置，这些配置包括：

3.1、更改默认端口

默认情况下，create-react-app 启动的应用运行在 localhost:3000 上，如果您需要更改默认端口，可以在 package.json 文件中添加如下配置：

"scripts": {
  "start": "set PORT=4000 && react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

注意，在 Windows 中使用set命令可以设置环境变量。

3.2、使用 SASS

create-react-app 默认是不支持 SASS 的，但是我们可以通过如下命令来添加 SASS 支持：

npm install --save node-sass

安装完毕之后，我们需要在 src 目录下新建一个名为 App.scss 的文件（当然也可以在其他文件中引用），通过这个文件的导入，就可以直接使用 .scss 格式的样式表了。

4、示例说明

4.1、更改默认端口

如果您需要将应用的默认端口更改为 4000，可以按照如下步骤进行：

1. 打开项目的 package.json 文件；
2. 找到“scripts”配置段；
3. 在“start”命令之前添加一个设置端口的命令：“set PORT=4000 &&”；
4. 保存文件并关闭。

这时您再次启动应用时，就会发现它运行在了 localhost:4000 上。

4.2、使用 SASS

如果您需要在应用中使用 SASS，则需要按照如下步骤进行：

1. 在项目的根目录下运行如下命令安装 node-sass：npm install --save node-sass；
2. 在 src 目录下新建一个名为 App.scss 的文件；
3. 在 App.js 文件中，将 import './App.css'; 修改为 import './App.scss';；
4. 尝试在 App.scss 文件中编写您的样式。

这时您再次启动应用，就可以使用 SASS 样式表了。

以上就是 create-react-app 开发常用配置的完整攻略。