前端脚手架工具

这是我参与更文挑战的第9天，活动详情查看： 更文挑战

• 当你准备开发一个新项目时，在写代码之前，你可能会碰到的问题：

  • 准备好一个项目的基础开发设施,需要投入大量时间和精力
  • 较短时间內配置一个技术栈完整、辅助功能丰富、兼顾不同环境下构建优化目标的项目基础代 ，需要开发人员在工程领域长久的知识储备与实践总结
  • 不同的项目需求和团队情况,需要根据不同的现状使用不同的基础设施

使用脚手架工具的好处

• 快速生成项目的基础代码
• 使用脚手架工具生成的项目模板通常时经过经验丰富的开发者提炼和检验的
• 脚手架工具支持使用自定义模版，可以根据项目中的实际经验总结、定制一个脚手架。
• 对于日常的前端开发流程，项目内哪些部分属于通用基础设施呢？

  • 进入开发需要做的准备

    • 需要有package.json（基础配置文件)
    • 选择使用npm或yarn作为包管理器
    • 确定项目技术栈，在明确后选择安装相关依赖包并在src目录中建立相应的入口文件
    • 选择构建工具，webpack,vite,vue cli等
    • 打通构建流程，安装与配置各种loader、插件及其他配置项
    • 优化构建流程，针对开发/生成环境的不同特点进行各自优化
    • 选择和调试辅助工具，例如代码检查工具和单元测试工具，安装相应依赖并调试配置文件
    • 检查各主要环节的脚本是否正常工作，编写说明文件README.md

常见脚手架

• Create-React-App
  • 官网
  • Create React App 是一个官方支持的创建 React 单页应用程序的方法。它提供了一个零配置的现代构建设置。
  • 快速开始

    npx create-react-app my-app
    cd my-app
    npm start
复制代码

• Vue Cli

  • 官网
  • Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
    • 通过 @vue/cli 实现的交互式的项目脚手架。
    • 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
    • 一个运行时依赖 (@vue/cli-service)，该依赖：

    可升级；

    • 基于 webpack 构建，并带有合理的默认配置；
    • 可以通过项目内的配置文件进行配置；
    • 可以通过插件进行扩展。
    • 一个丰富的官方插件集合，集成了前端生态中最好的工具。
    • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
  • 快速开始

  npm install -g @vue/cli
  # OR
  yarn global add @vue/cli
  
  vue create hello-world
  复制代码

• Vite

  • 官网
  • Vite (法语意为 “快速的”，发音 /vit/) 是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。

• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可以输出用于生产环境的优化过的静态资源。

• Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

  • 快速开始

      npm init @vitejs/app
  复制代码

• 以上所述是给大家介绍的详解JS的递归函数，希望对大家有所帮助