Create React App文档说明（一）

最新推荐文章于 2025-09-29 10:45:16 发布

翻译最新推荐文章于 2025-09-29 10:45:16 发布 · 1.5k 阅读

文章标签：

#create-react-app #React #React CLI

本文深入探讨React应用的配置细节，包括脚本使用、浏览器兼容性、代码调试、资源体积分析、HTTPS配置、CSS Modules、Sass预处理语言、样式初始化、SVG组件化及代码分割等关键主题。

可用的脚本

npm run eject

不可逆操作，将配置从项目依赖中移除，从而将配置项直接暴露给用户，便于自定义配置的修改，然而官方并不推荐这样做，很可能会导致一些部署问题的出现。

浏览器支持情况

默认支持所有现代浏览器，如果需要支持 Internet Explorer 9, 10, and 11 需要 polyfills ，解决方法可以使用 react-app-polyfill 。

react-app-polyfill

npm install react-app-polyfill
Internet Explorer 9
1. import 'react-app-polyfill/ie9'; // This must be the first line in src/index.js
2. 导入 ie9 将默认包含 ie10、ie11
支持的特性
1. Promise (for async / await support)
2. window.fetch (a Promise-based way to make web requests in the browser)
3. Object.assign (a helper required for Object Spread, i.e. { ...a, ...b })
4. Symbol (a built-in object used by for...of syntax and friends)
5. Array.from (a built-in static method used by array spread, i.e. [...arr])

如果需要更多的新特性并支持ie9，比如 Map、Set 等

// These must be the first lines in src/index.js
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';

配置浏览器支持情况

创建工程后，默认在 package.json 下会包含浏览器支持信息，比如：

"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}

该配置控制编译后输出的 JavaScript 代码，使得编译后的代码与指定的浏览器兼容

该配置并不会为你自动导入 polyfills ，如果你需要兼容低版本浏览器，仍需自行导入 polyfills

当修改了 browserslist 配置，可能我们的配置并没有生效，这是因为 babel-loader 没有检测到 package.json 中的改变，一个最简单的解决方式就是直接删除掉 node_modules/.cache_ 文件夹，重新编译

VSCode中展示代码检查结果

安装 ESLint plugin
在项目根目录下创建 .eslintrc.json 文件
1. ```
{
  "extends": "react-app"
}
```
如果使用了 TypeScript，那默认的 ESLint 不再生效，它本身是不支持 TypeScript 的

启用 TypeScript ESLint ，在 .vscode/settings.json 下添加以下内容，没有该文件请自行创建

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    { "language": "typescript", "autoFix": true },
    { "language": "typescriptreact", "autoFix": true }
  ]
}

如果进一步修改了 .eslintrc.json 文件，这些更改只会影响编辑器自身行为，不会影响终端和浏览器中的 lint 输出，这是 Create React App 有意提供了一组最常见的错误规则

如果想强制改变编码风格，可以考虑使用 Prettier 来取代 ESLint

编辑器中启动代码调试

VSCode

首先需要安装最新版本的 VSCode 和 Chrome Debugger Extension 插件

在 .vscode 文件夹下新建 launch.json 配置文件，内容如下

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

上述配置的 URL 需要根据项目中的实际配置需要进行更改

最后通过运行 npm run start 启动应用，同时启动 debug 即可进行调试

分析打包资源体积

主要用来帮助我们找到冗余代码的来源

npm install --save source-map-explorer

在 package.json 中 scripts 下新增一行如下

 "scripts": {
+    "analyze": "source-map-explorer 'build/static/js/*.js'",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

在生产模式下打包后运行分析脚本
1. npm run build
2. npm run analyze

开发模式下使用HTTPS

这个特性在 react-scripts@0.4.0 及以上版本下可用

在特定场景下我们可能会遇到这种情况，比如访问一个接口，但是该接口只为 HTTPS 提供服务。

具体配置就是将 HTTPS 环境变量设置为 true ，然后通过 npm run start 重启 dev server

Windows（cmd.exe）

set HTTPS=true&&npm start

你没看错，中间缺乏的空格是被故意去掉的

Windows（Powershell）

($env:HTTPS = "true") -and (npm start)

Linux,macOS（Bash）

HTTPS=true npm start

注意：服务器将使用自签名证书，因此您的Web浏览器在访问该页面时几乎肯定会显示警告，忽略即可

CSS Modules

这个特性在 react-scripts@2.0.0 及以上版本下可用

主要用来避免不同文件中样式命名冲突，只要将 CSS 样式文件的扩展名改为 .module.css 即为开启，针对预处理语言同样适用

使用CSS预处理语言Sass

这个特性在 react-scripts@2.0.0 及以上版本下可用

create-react-app 已经内置了 sass-loader，因此只需安装 node-sass 便可以使用 Sass 预处理语言了。

npm install node-sass --save

安装后，重命名项目中的 *.css 为 *.scss 即可

要在 Sass 文件之间共享变量，可以使用 Sass 导入，比如：

@import 'styles/_colors.scss'; // assuming a styles directory under src/
@import '~nprogress/nprogress'; // importing a css file from the nprogress node module

如果导入 node_modules_ 下的样式文件，必须以前缀 ~ 开头

当然我们也可以不使用 ~ 符号，转而使用 SASS_PATH 变量

比如设置了 SASS_PATH=node_modules:src，那么便可以向下面这样使用

@import 'styles/colors'; // assuming a styles directory under src/, where _colors.scss partial file exists.
@import 'nprogress/nprogress'; // importing a css file from the nprogress node module

该变量规定的查找路径

配置方式：在项目根目录下添加一个 .env 文件，将 SASS_PATH=node_modules:src 放进去即可

windows 系统下进行如下设置

SASS_PATH=./node_modules;./src

样式初始化

使用 create-react-app 创建的项目默认加入了 CSS Reset 的功能，只需要在 index.css 或者 App.css （官方推荐最佳位置）中 @import-normalize; 即可，重复导入将会被移除

比如在 index.css 中引入

@import-normalize; /* bring in normalize.css styles */

/* rest of app styles */

还可以通过项目的 browserslist 控制 normalize.css的哪些部分使用

当 browserslist的的设置是 last 3 versions：

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

当 browserslist的的设置是last 2 versions：

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

组件中添加 SVGs

这个特性在 react@16.3.0 及以上版本与 react-scripts@2.0.0 及以上版本下可用

可以将 SVG 直接作为React组件导入进来使用

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  
    {/* Logo is an actual React component */}
    
  
);

ReactComponent 告诉 Create React App 要得到一个渲染 SVG 的React 组件，而不是拿到SVG的名字

代码分割

使用动态 import() 来实现代码分割，该方法时 stage 3中的提案，import() 函数将模块名称作为参数并返回一个 Promise 。

比如：

`moduleA.js`

const moduleA = 'Hello';

export { moduleA };

`App.js`

import React, { Component } from 'react';

class App extends Component {
  handleClick = () => {
    import('./moduleA')
      .then(({ moduleA }) => {
        // Use moduleA
      })
      .catch(err => {
        // Handle failure
      });
  };

  render() {
    return (
      
        Load
      
    );
  }
}

export default App;