create-react-app 項目基本配置

目錄

• 開發
  • eslint配置
  • 代碼調試
  • 自動格式化代碼pretty
  • 隔離開發組件
  • 分析Bundle包大小
• 樣式和資源
  • SASS
  • postcss/autoprefixer
  • PostCSS Normalize
  • 添加圖片，字體和文件
    • 添加svg
  • Loading .graphql Files
  • 使用public文件夾
    • 何時使用
  • 代碼拆分
• 構建APP
  • 導入
    • Absolute Imports
  • 調整bootstrap樣式
  • 添加 TypeScript
  • 添加自定義環境變量
    • 在HTML中使用
    • 在 .env 中添加開發環境變量
• 設置開發代理
  • 手動配置代理
    • fetch/axios

You need to put any JS and CSS files inside src, otherwise Webpack won’t see them.

webpack只負責管理src文件夾下的內容，因此只能在src文件夾下創建子文件夾進行開發

Only files inside public can be used from public/index.html.

只有public文件夾下的內容能夠被index.html引用

需要安裝react-app-polyfill 才能夠使用es6+的語法

When editing the browserslist config, you may notice that your changes don't get picked up right away. This is due to an issue in babel-loader not detecting the change in your package.json. An easy solution is to delete the node_modules/.cache folder and try again.

開發

eslint配置

要讓eslint支持ts，在vscode中需要如下配置：

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

擴展eslint

• 基於基礎配置對eslint進行擴展，否則會出現一些難以預料的問題
• 當集成ts時，最好對ts文件單獨配置一個override對象

{
  "eslintConfig": {
    "extends": ["react-app", "shared-config"],
    "rules": {
      "additional-rule": "warn"
    },
    "overrides": [
      {
        "files": ["**/*.ts?(x)"],
        "rules": {
          "additional-typescript-only-rule": "warn"
        }
      }
    ]
  }
}

代碼調試

vscode

在根目錄的.vscode文件夾中，添加launch.json文件

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

自動格式化代碼pretty

npm install --save husky lint-staged prettier

package.json 增加配置

+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  }

接下來，我們在 package.json 中添加一個 'lint-staged' 字段，例如：

  "dependencies": {
    // ...
  },
+ "lint-staged": {
+   "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
+     "prettier --single-quote --write",
+     "git add"
+   ]
+ },
  "scripts": {

隔離開發組件

storybook styleguidist

分析Bundle包大小

npm install --save source-map-explorer

package.json中·"script"添加

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

運行

npm run build
npm run analyze

樣式和資源

普通css文件 Button.css 模塊化 Button.module.css

我們建議不要在 <AcceptButton> 和 <RejectButton> 組件中使用同一個 .Button CSS 類，而是使用自己的 .Button 樣式創建一個 <Button> 組件，<AcceptButton> 和 <RejectButton>都可以渲染（但 不是繼承）。

SASS

要在 Sass 文件之間共享變量，可以使用 Sass 導入@import語法。

.env 中配置SASS_PATH變量，用 : 分隔，例如 path1:path2:path3，以指定sass加載目錄

postcss/autoprefixer

通過 Autoprefixer 自動添加瀏覽器前綴

.b {
  /* autoprefixer: off */
  transition: 1s; /* will not be prefixed */
}

.c {
  /* autoprefixer: ignore next */
  transition: 1s; /* will not be prefixed */
  mask: url(image.png); /* will be prefixed */
}

PostCSS Normalize

將各瀏覽器元素樣式標准化

只需要在項目的app.css/index.css文件中引入

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

/* rest of app styles */

添加圖片，字體和文件

直接在 JavaScript 模塊中 import 文件

要減少對服務器的請求數，導入小於 10,000 字節的圖片將返回 data URI 而不是路徑。 這適用於以下文件擴展名：bmp ，gif ，jpg ，jpeg 和 png 。

添加svg

可以直接導入 SVG 作為 React 組件。

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo 是一個實際的 React 組件 */}
    <Logo />
  </div>
);

ReactComponent 導入名稱是特殊的，它告訴 Create React App 你想要一個渲染 SVG 的 React 組件，而不是它的文件名。

導入的svg組件可以設置一個title prop來增加可訪問性

Loading .graphql Files

使用public文件夾

如果將文件放入 public 文件夾，Webpack 將 不會 處理它。相反，它將被復制到構建文件夾中。要引用 public 文件夾中的資源，需要使用名為 PUBLIC_URL 的特殊變量。

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

只有 %PUBLIC_URL% 前綴才能訪問 public 文件夾中的文件。

使用缺點：

• public 文件夾中的所有文件都不會進行后處理或壓縮。
• 在編譯時不會調用丟失的文件，並且會導致用戶出現 404 錯誤。
• 結果文件名不包含內容哈希值，因此你需要添加查詢參數或在每次更改時重命名它們（，以便清除瀏覽器緩存）。

何時使用

• 你需要在構建輸出中具有特定名稱的文件，例如 manifest.webmanifest 。
• 你有數千張圖片，需要動態引用它們的路徑。
• 你希望在打包代碼之外包含一個像 pace.js 這樣的小腳本。
• 某些庫可能與 Webpack 不兼容，你沒有其他選擇，只能將其包含為 <script> 標記。

代碼拆分

此項目設置支持通過 動態import() 進行代碼拆分。

使用react router進行代碼拆分

構建APP

導入

import export export default

Absolute Imports

可以通過在根目錄的jsconfig.json或tsconfig.json中配置，如果文件不存在則可以自行創建：

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

調整bootstrap樣式

添加 TypeScript

添加自定義環境變量

你必須以 REACT_APP_ 開頭創建自定義環境變量。除了 NODE_ENV 之外的任何其他變量都將被忽略。更改任何環境變量都需要重新啟動正在運行的開發服務器。

將在 process.env 上為你定義這些環境變量。例如，名為 REACT_APP_SECRET_CODE 的環境變量將在你的JS中公開為 process.env.REACT_APP_SECRET_CODE 。

在HTML中使用

你還可以在 public/index.html 中以 REACT_APP_ 開頭訪問環境變量。 例如：

<title>%REACT_APP_WEBSITE_NAME%</title>

在 .env 中添加開發環境變量

要定義永久環境變量，請在項目的根目錄中創建名為 .env 的文件：

REACT_APP_SECRET_CODE=abcdef

設置開發代理

在 package.json 中添加 proxy 字段，例如：

  "proxy": "http://localhost:4000",

沒有 text/html accept 標頭的任何無法識別的請求都將被重定向到指定的 proxy（代理服務器）。

手動配置代理

fetch/axios

使用fetch時，在ie中需要使用react-app-polyfill