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

sky124380729發表於2022-04-27

在新建一個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

    image.png

  • 修改config/webpack.config.js

    修改entryoutput
    image.png

    複製HtmlWebpackPlugin並修改
    image.png

    註釋掉WebpackManifestPlugin
    image.png

  • 修改scripts目錄下的start和build檔案

    這一步其實不改也無妨,為了增加專案的健壯性,可以改一下
    image.png

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

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

f78794c03d51f6390186a2489ba5ec4.jpg

相關文章