脚手架工具

脚手架工具

目前，前端项目越来越复杂化和多元化，但是随着变化而来的就是如下问题：

• 传统语言或语法有弊病。虽然ES6及后续版本提出很多解决方案，但是由于环境的支持程度不同，需要进行大量重复性的适配工作。
• 无法模块化，组件化。简单来说，模块化指的是将一个文件拆分成多个相互独立的小文件，使用的时候再按照一定的规则加载和拼接。组件化是指将UI拆分成一个个功能独立单一的结构单元。
• 存在大量的重复的机械性工作。如项目的构建，发布等。
• 代码风格不统一，无法保证质量。
• 严重依赖后端接口支持。
• 其他问题。

前端工程化为上述问题提供了成熟的解决方案，作为使用者，可以更加关注业务逻辑的实现，也就提高了效率，降低了成本。

前端工程化的发起者

脚手架的本质作用

创建项目基础结构·提供项目规范和约定

​ 相同的组织结构

​ 相同的开发范式

​ 相同的模块依赖

​ 相同的工具配置

​ 相同的基础代码

举个例子

​ IDE创建项目的过程就是一个脚手架的工作流程

​ 集成开发环境（IDE，Integrated Development Environment ）是用于提 供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用 户界面等工具

前端脚手架

​ 内容概要：

• 脚手架的作用
• 常用的脚手架工具
• 通用脚手架工具剖析
• 开发一款脚手架

常用的脚手架工具

React.js项目 -> create-react-app

Vue.js项目 -> vue-cli

​ Angular项目 -> angular-cli

​ Yeoman

Plop

Yeoman基本使用

在全局范围安装yo

npm install yo --global

#or yarn global add yo

安装对应的generator

npm install generator-node --global

#or yarn global add generator-node

通过yo运行generator

cd path/to/project-dir //进入项目所在目录

mkdir my-module

cd my-module

yo node

常规使用步骤

​ 1.明确你的需求
2. 找到合适的Generator
3. 全局范围安装找到的Generator
4. 通过Yo运行对应的Generator
5. 通过命令行交互填写选项
6. 生成你所需的项目结构