create-react-app initializes the React project, configures the toolchain, and how to change the multi-page application

When creating a new react project, it is the best choice to use create-react-app to create a new project directly for newbies or those who do not need very complicated configuration.

However, in fact create-react-app most of them still help us simplify the configuration of webpack , for a slightly larger project, or a project that requires multi-person collaboration, the configuration of the toolchain is also necessary indispensable. For example, formatting verification before submitting code, verification of git submission information, automatic formatting after saving, etc.

This article introduces the project configuration related toolchain created by create-react-app , and the related configuration for vscode .

initialization project

• Execute the create-react-app script

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

• Open the project, organize the directory, delete related packages and files for automated testing, and repair package.json

Toolchain Configuration

• Add huksy do various operations before submitting

   yarn add husky -D

   yarn husky install

   npm set-script prepare "husky install" // 此处需要npm7+，7以下可手动设置

• Added commitlint , spec 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"'

• Add prettier to make the code more beautiful

   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"
      }
  }

• Modify eslint to make it work better with 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.
    ]
  },

• Configure stylelint (don't need it for now, it will be added later depending on the situation)

• vscode configuration settings.json (workspace)
  Through this configuration, the repair action of eslint is automatically executed when the code is saved. Due to the configuration of eslint-plugin-prettier , the prettier becomes the rule of eslint, so that when the code is saved, the code is not only automatically repaired according to eslint, At the same time, it is also automatically repaired according to prettier.

   {
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "json"
    ]
  }

IDE (vscode) configuration

• Add ESLint , Prettier - Code formatter , Stylelint (temporarily optional), EditorConfig for VS Code

• Configure settings.json (workspace)

  Through this configuration, the repair action of eslint is automatically performed when the code is saved. Because of the configuration of eslint-plugin-prettier , the prettier becomes the rule of eslint, so that when the code is saved, the code is not only automatically repaired according to eslint, At the same time, it is also automatically repaired according to prettier.

   {
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "json"
    ]
  }

• Add .editorconfig , in order to keep the same behavior as different IDE , pay attention not to conflict with prettier , the following is for reference

   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

At this point, congratulations that you have completed the configuration of a toolchain, and later changing the multi-page application is to extend the content, and the general project does not use it

Modify multi-page applications

• Use yarn eject and enter y

   yarn eject

• Copy a copy of index.tsx in the src directory, the name is admin.tsx, as the second entry file
• Modify the name of public/index.html to template.html, and change all references to this address (you can leave the name unchanged here, just to prevent ambiguity)

• Modify config/paths.js

  

• Modify config/webpack.config.js

  Modified entry and output
  

  Copy HtmlWebpackPlugin and modify
  

  Comment out WebpackManifestPlugin
  

• Modify the start and build files in the scripts directory

  In fact, it is okay to not change this step. In order to increase the robustness of the project, you can change it
  

Congratulations, so far, the multi-page application has also been modified, you can try to access the project, visit index.html and admin.html

Join the group chat and exchange front-end technology together~