關於建立React App的8個有趣事實

你所知道的一些事情，你可能不知道的一些事情

Create React App是搭建React項目的快速方法。這樣咱們能夠重點放在代碼上，而不是構建工具上。

事實1：可使用單個命令建立完整項目

這個神奇的命令能夠經過如下三種方式之一調用：

npx create-react-app my-app
npm init react-app my-app
yarn create react-app my-app

Facebook保證其全部基礎組件（Webpack，Babel，ESLint，Jest等）能夠無縫地協同工做。

開箱即用，將設置如下腳本：

npm start: 在開發模式下運行該應用程序，而後打開 http://localhost:3000 在瀏覽器中查看它。

npm run build: 將用於生產的應用程序構建到build文件夾，該版本已精簡併準備部署。

npm test: 以交互方式運行測試觀察程序。它運行與自上次提交以來更改的文件相關的測試。

事實2：React項目能夠從特定模板開始

前面的命令能夠用一個特定的模板定製：

npx create-react-app my-app --template [template-name]
npm init react-app my-app --template [template-name]
yarn create react-app my-app --template [template-name]

若是你想從TypeScript的React項目開始，只需使用模板 cra-template-typescript。默認模板爲 cra-template。

若是您想利用社區資源，請訪問此網站，當前有170個模板。

事實3：一個依賴項是Create React應用程序的第一原則，這個構建依賴項不在devDependencies部分

一個依賴關係是三個Create React App哲學中的第一個。你能夠在如下 package.json 中找到此構建依賴項嗎？

{
  "name": "my-react-app",
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

在 package.json 中，有三個依賴項，沒有 devDependencies，這個依賴在哪裏？

它是react-scripts！

根據NPM依賴項定義，構建依賴項，即react-scripts，應該是一個devDependency。然兒，它與 react 和react-dom 一塊兒在依賴項部分中。

實際上，react-scripts 是 devDependency。因爲某些實際緣由，Facebook自從react-scripts 1.0.8起就將其做爲依賴項。

事實4：無需配置是Create React App的第二個理念——但這不是零配置

Create React App爲開發和生產構建都設置了合理的配置。開發人員能夠專一於編寫代碼，能夠不進行任何配置。

下面是開箱即用的源代碼目錄樹。咱們實際上找到了一個配置文件 .gitignore，它用於github的源代碼版本控制。

my-react-app/
  node_modules/
  public/
    favicon.ico
    index.html 
    logo192.png
    logo512.png
    manifest.json
    robots.txt
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg
    serviceWorker.js
  .gitignore
  package-lock.json
  package.json
  README.md

事實5：Jest可使用絕對路徑。

Jest是Create React App的默認測試運行程序。默認狀況下，Jest在__tests__ 文件夾，.test.js 文件或 .spec.js 文件的 .js 文件中運行全部測試用例。

這是來自Create React App的 App.test.js。該測試用例使用相對路徑：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});

若是將App更改成使用絕對路徑，以下所示，此測試用例將中斷：

import React from 'react';
import ReactDOM from 'react-dom';
import App from 'App';
it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});

能夠經過添加 modulePaths 選項來修復它：

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --modulePaths=src",
    "eject": "react-scripts eject"
  },
}

若是您使用react-app-rewired，還能夠經過配置config-overrides.js來修復它：

module.exports = {
  jest: config => {
    config.moduleNameMapper = {
      '^@(.*)$': '<rootDir>/src$1'
    };
    return config;
  },
};

事實6：建立React應用程序能夠處理CORS（跨域資源共享）錯誤

你是否遇到如下錯誤？

Fetch API cannot load http://myhost.com:4000/api/todos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

當API使用與Web服務器不一樣的主機或端口時，此錯誤將阻止您的應用程序運行。

經過在 package.json 中添加代理配置，Create React App提供瞭解決此問題的方法：

{
  「proxy」: 「http://myhost.com:4000",
}

此代理選項支持HTTP，HTTPS和WebSocket鏈接。

若是有多個API服務器怎麼辦？

替代解決方案須要安裝 http-proxy-middlewar：

npm install --save http-proxy-middleware

另外，在根目錄中建立並配置 src/setProxy.js。如下是 src/setProxy.js 的示例。對 /api1/x 的調用將轉發到 http://myhost1:4000/api1/x，而對 /api2/y 的調用將轉發到 http://myhost2:5000/api1/y。

const proxy = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api1',
    proxy({
      target: 'http://myhost1:4000',
      changeOrigin: true,
    })
  );
  app.use(
    '/api2',
    proxy({
      target: 'http://myhost2:5000',
      changeOrigin: true,
    })
  );
};

事實7：建立React應用程序能夠配置要支持的瀏覽器

開箱即用，能夠在 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"
    ]
  }

此配置控制Babel如何將JavaScript轉換爲與指定的瀏覽器兼容，以進行生產和開發。查看https://browserl.ist以獲取有...。

對於Create React App的默認瀏覽器列表配置，生產代碼的目標是92%的瀏覽器：

對於Create React App的默認瀏覽器列表配置，開發代碼的目標是26%的瀏覽器：

事實8：能夠分析生成的bundle包

Create React App隱藏了不少細節和複雜性。生成最終bundle包後，您是否有興趣分析其空間使用狀況？

source-map-explorer 使您可以經過源映射分析和調試空間使用狀況。安裝source-map-explorer：

npm install --save source-map-explorer

添加分析腳本：

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

生成並運行分析命令：

npm run build
npm run analyze

而後，bundle的使用狀況將顯示在默認瀏覽器中：

---

本文首發於微信公衆號《前端外文精選》，關注即送大禮包，準能爲你節省很多錢！