Create React App文檔說明（一）

可用的腳本

npm run eject

不可逆操作，將配置從項目依賴中移除，從而將配置項直接暴露給用戶，便于自定義配置的修改，然而官方并不推薦這樣做，很可能會導致一些部署問題的出現。愛掏網 - it200.com

瀏覽器支持情況

默認支持所有現代瀏覽器，如果需要支持 Internet Explorer 9, 10, and 11 需要 polyfills ，解決方法可以使用 react-app-polyfill 。愛掏網 - it200.com

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 提供服務。愛掏網 - it200.com

具體配置就是將 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 預處理語言了。愛掏網 - it200.com

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 。愛掏網 - it200.com

比如：

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，只有在按鈕點擊的時候才會被加載進來