Create React App文档说明（一）

可用的脚本

npm run eject

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

浏览器支持情况

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

react-app-polyfill

2. npm install react-app-polyfill

3. Internet Explorer 9

   1. import 'react-app-polyfill/ie9'; // This must be the first line in src/index.js

   2. 导入 ie9 将默认包含 ie10、ie11

4. 支持的特性

   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])

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

   1. // 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中展示代码检查结果

2. 安装 ESLint plugin

3. 在项目根目录下创建 .eslintrc.json 文件

   1. {
        "extends": "react-app"
      }
      

4. 如果使用了 TypeScript，那默认的 ESLint 不再生效，它本身是不支持 TypeScript 的

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

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

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

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

编辑器中启动代码调试

VSCode

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

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

   1. {
        "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 即可进行调试

分析打包资源体积

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

2. npm install --save source-map-explorer

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

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

4. 在生产模式下打包后运行分析脚本

   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;

这会将 moduleA.js 作为一个独立的 chunk，只有在按钮点击的时候才会被加载进来