create-react-app 初始化 React 工程，配置工具鏈，以及如何改多頁應用

在新建一個react工程的時候，對於新手或者不需要非常複雜的配置的時候，直接使用create-react-app新建一個專案是最佳選擇。

然而事實上create-react-app大多數還是幫我們簡化了webpack的配置，對於一個稍微大型的工程，或者需要多人協作的工程來說，工具鏈的配置也是必不可少的。比如提交程式碼前格式化驗證，git提交資訊的驗證，已經儲存自動做格式化等等。

本文介紹了create-react-app建立的專案配置相關工具鏈，以及針對於vscode的相關配置。

初始化工程

執行create-react-app指令碼

npx create-react-app levi-web --template typescript

開啟專案，整理目錄，刪除自動化測試的相關包和檔案，修繕package.json

工具鏈配置

新增huksy做提交前的各種操作

yarn add husky -D

yarn husky install

npm set-script prepare "husky install" // 此處需要npm7+，7以下可手動設定

新增commitlint，規範commit-msg

yarn add @commitlint/config-conventional @commitlint/cli -D

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

新增prettier,讓程式碼更美觀

yarn add --dev --exact prettier

echo {}> .prettierrc.json

// .prettierrc.json(參考)
{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": false,
  "singleQuote": false,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false,
  "tabWidth": 2
}

// .prettierignore 
build
coverage

npm set-script lint "prettier --write ." // 此處同樣需要npm7+

yarn add lint-staged -D

npx husky add .husky/pre-commit "npx lint-staged"

// package.json
{
    "lint-staged": {
        "**/*": "prettier --write --ignore-unknown"
    }
}

修改eslint,使其能夠和prettier更好的配合

yarn add eslint-config-prettier eslint-plugin-prettier -D

// package.json
"eslintConfig": {
  "extends": [
    ...
    "prettier", // It turns off all ESLint rules that are unnecessary or might conflict with Prettier
    "plugin:prettier/recommended" // Runs Prettier as an ESLint rule and reports differences as individual ESLint issues.
  ]
},

配置stylelint(暫時先不要吧，後續看情況補充)
vscode配置settings.json(工作區)
通過此配置，程式碼儲存的時候自動執行eslint的修復動作，由於配置了eslint-plugin-prettier，讓prettier成為了eslint的rule，這樣便使得儲存程式碼的時候，程式碼不僅按照eslint自動修復了，同時也按照prettier自動修復了
```
{
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
      "source.fixAll.stylelint": true
  },
  "eslint.validate": [
      "javascript",
      "javascriptreact",
      "typescript",
      "typescriptreact",
      "json"
  ]
}
```

IDE(vscode)配置

擴充套件程式中新增 ESLint, Prettier - Code formatter, Stylelint(暫時可不加), EditorConfig for VS Code
配置settings.json(工作區)
通過此配置，程式碼儲存的時候自動執行eslint的修復動作，由於配置了eslint-plugin-prettier，讓prettier成為了eslint的rule，這樣便使得儲存程式碼的時候，程式碼不僅按照eslint自動修復了，同時也按照prettier自動修復了
```
{
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
      "source.fixAll.stylelint": true
  },
  "eslint.validate": [
      "javascript",
      "javascriptreact",
      "typescript",
      "typescriptreact",
      "json"
  ]
}
```

新增.editorconfig，為了不同IDE行為保持一致，注意規則不要和prettier衝突，以下作為參考

root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
# end_of_line: set to lf, cr, or crlf to control how line breaks are represented.
end_of_line = lf
# set to true to ensure file ends with a newline when saving and false to ensure it doesn't.
insert_final_newline = true
# set to true to remove any whitespace characters preceding newline characters and false to ensure it doesn't.
trim_trailing_whitespace = true

到此，恭喜你已經完成了一個工具鏈的配置，後面改多頁應用是擴充套件內容一般專案用不到

改多頁應用

使用yarn eject，輸入y
```
yarn eject
```
src目錄中複製一份index.tsx，該名為admin.tsx，作為第二個入口檔案
修改public/index.html名稱為template.html，並把所有的引用到這個地址的地方改一下(這裡可以不改名稱，只是為了防止產生歧義)
修改config/paths.js
修改config/webpack.config.js
修改entry和output
複製HtmlWebpackPlugin並修改
註釋掉WebpackManifestPlugin
修改scripts目錄下的start和build檔案
這一步其實不改也無妨，為了增加專案的健壯性，可以改一下

恭喜你，到此為止，多頁應用也修改完成了，可以試著訪問專案，訪問`index.html`和`admin.html`啦

加入群聊，一起交流前端技術吧~