This is the 9th day of my participation in Gwen Challenge

  • When you are preparing to develop a new project, you may run into the following questions before writing code:

    • It takes a lot of time and effort to get the infrastructure ready for a project
    • To configure a project base generation with complete technology stack, rich auxiliary functions, and consideration of optimization objectives in different environments in a short time requires long-term knowledge reserve and practice summary of developers in the engineering field
    • Different project requirements and team situations require different infrastructures based on different realities

Benefits of using scaffolding tools

  • Quickly generate the base code for the project
  • Project templates generated using scaffolding tools are usually refined and validated by experienced developers
  • Scaffolding tools support the use of custom templates to customize a scaffold based on actual experience in the project.
  • For the day-to-day front-end development process, what parts of the project are common infrastructure?

    • Preparation needed to enter development

      • Need package.json (base configuration file)
      • Choose NPM or YARN as the package manager
      • Determine the project technology stack, install the dependency packages and create the corresponding entry files in the SRC directory
      • Choose build tools, WebPack, Vite, Vue CLI, etc
      • Through the construction process, install and configure various Loaders, plug-ins, and other configuration items
      • Optimize the build process for different characteristics of the development/build environment
      • Select and debug AIDS, such as code review tools and unit testing tools, install dependencies and debug configuration files
      • Check whether the script of each major link works normally and prepare the instruction file readme.md

Common scaffolding

  • Create-React-App
    • website
    • Create React App is an officially supported method for creating React single-page applications. It provides a modern build setup with zero configuration.
    • Quick start
    npx create-react-app my-app
    cd my-app
    npm start
Copy the code

  • Vue Cli

    • website
    • Vue CLI is a complete system for rapid development based on vue.js, providing:
      • Interactive project scaffolding via @vue/ CLI.
      • Zero configuration prototype development through @vue/ CLI + @vue/ CLI-service-global.
      • A runtime dependency (@vue/cli-service) that:

      Can upgrade

      • Built on WebPack with reasonable default configuration;
      • It can be configured through the configuration file in the project;
      • Extensions can be made through plug-ins.
      • A rich collection of official plug-ins that integrate the best tools in the front-end ecosystem.
      • A fully graphical user interface for creating and managing vue.js projects.
    • Quick start
    npm install -g @vue/cli
# OR
yarn global add @vue/cli

vue create hello-world
Copy the code

  • Vite

    • website
    • Vite (French for “fast”, pronounced /vit/) is a new front-end build tool that dramatically improves the front-end development experience. It mainly consists of two parts:

  • A development server that provides rich built-in features based on native ES modules, such as surprisingly fast module hot update (HMR).

  • A set of build instructions that use Rollup to package your code and that are pre-configured to output optimized static resources for production.

  • Vite is intended to provide out-of-the-box configuration, while its plug-in API and JavaScript API provide a high degree of extensibility and complete type support.

    • Quick start
        npm init @vitejs/app
Copy the code

  • The above is to introduce the detailed solution of JS recursive function, I hope to help you