Create React App無eject配置

Create React App如下簡稱爲CRA

建立項目

npx create-react-app my-app
複製代碼

由於默認是用yarn安裝，因此建議後面也用yarn安裝依賴

打包成相對路徑配置

在package.json中增長：

"homepage": "."
複製代碼

eslint配置成airbnb風格

1. 安裝eslint-config-airbnb:

yarn add eslint-config-airbnb -D
複製代碼

2. 項目下增長.eslintrc.json文件： 其實直接在package.json中把eslintConfig下extends改爲airbnb也能夠，可是考慮到後面可能要自定義一些配置項，以及會增長ts和tsx配置，仍是加文件較好： .eslintrc.json：

{
  "extends": [
    "react-app",
    "airbnb"
  ],
  "rules": {
    "react/jsx-filename-extension": 0
  }
}
複製代碼

注意：須要安裝VSCode的ESLint插件，纔會在寫代碼時候校驗提示

api的baseUrl配置

1. 項目下增長.env.development文件：

REACT_APP_API_URL=http://10.234.216.150:7300
複製代碼

2. 項目下增長.env.production文件：

REACT_APP_API_URL=http://abcefg.com
複製代碼

3. js中代碼中引用：

const baseUrl = process.env.REACT_APP_API_URL;
複製代碼

這樣，開發環境的baseUrl就是「http://10.234.216.150:7300」，生產環境的就是「abcefg.com」。

注意：環境變量都必須以REACT_APP_爲前綴，不然會被忽略。

注意：若是想在開發環境自定義api變量，建議不要直接修改.env.development文件，這個文件是給團隊開發用的，請新增.env.development.local文件進行配置私用，這個文件也會自動被git忽略（CRA設置的），不用提交。其餘一些配置文件還有好多，我以爲暫時用不到的。

增長 staging 環境配置：

有時候，光開發環境和生產環境配置還不夠，由於還有測試環境。就須要加一個staging配置，這個稍微有些複雜。

1. 安裝env-cmd包

yarn add env-cmd
複製代碼

2. 項目下增長.env.staging文件

REACT_APP_API_URL=http://staging.abcdefg.com
複製代碼

3. 其實這時候在package.json中scripts下增長"build:staging"便可

{
  scripts: {
    "build:staging": "env-cmd .env.staging npm run build",
  }
}
複製代碼

可是這樣打出來的包也是在build文件夾下面。 若是想打包到另一個文件夾下面，繼續看下面 4. 項目下新建buildStaging.js文件：

const fs = require('fs-extra');
const childProcess = require('child_process');

const buildFolderExist = fs.existsSync('./build');
const buildStagingFolderExist = fs.existsSync('./buildstaging');
// 備份build文件夾
if (buildFolderExist) {
  fs.renameSync('./build', './build-tttttemp');
}
// build staging環境
if (buildStagingFolderExist) fs.removeSync('./buildstaging');
childProcess.execSync('env-cmd .env.staging npm run build');
fs.renameSync('./build', './buildstaging');
// 還原build文件夾
if (buildFolderExist) {
  fs.renameSync('./build-tttttemp', './build');
}
複製代碼

5. package.json中scripts下改寫"build:staging"：

"build:staging": "node buildStaging.js",
複製代碼

這樣運行yarn run build:staging時候就會自動打包測試環境到buildstaging文件夾下 6. 最終scripts樣子：

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject",
    "build:staging": "node buildStaging.js",
    "build:all": "npm run build:staging && npm run build"
  },
複製代碼

其中build:all是同時打包生產環境和測試環境

直接引用src下模塊設置（absolute path，和alias相似）

通常都是經過alias配置的，可是CRA不支持，爲何去問做者。

項目下面增長jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "jsx": "preserve"
  }
}
複製代碼

這裏baseUrl設置，有兩個做用（我本身測試的）。

1. vscode會讀取這個值做爲根目錄去查找模塊
2. 只能設置爲src，由於CRA會讀取這個值並添加webpack的resolve配置裏做爲打包依賴路徑，若是不是src或者node_modules，啓動項目會報錯只支持這倆值。node_modules配不配無所謂，始終會被添加

jsx的設置，是由於不設置的話，import一個jsx文件，沒法連接過去（cmd+左鍵）

若是有eslint，請在eslint中rules中加配置項：

不配的話，eslint會報錯找不到相關模塊（雖然能正常使用了）

// 關閉對mi，api，utils的import檢驗，其餘的必定要報錯，防止濫用
    'import/no-unresolved': ['error', { ignore: ['mi', 'api', 'utils'] }],
複製代碼

這樣的話，只有引用mi、api、utils這三個模塊，eslint纔不會報錯。

注意：也能夠經過配置setting選項（eslint-plugin-import的配置），讓src下的全部模塊引用都不報錯，但不是我想要的，我不想讓項目人員濫用這個功能。

使用

以前是經過 import { xxx } from '../../../mi'這樣引用公共組件

如今只須要import { xxx } from 'mi'