Part2 前端工程化

文章内容输出来源：拉勾教育大前端训练营

前端工程化

• 工程化≠某个工具
• 目的:
  • 使用脚手架工具自动搭建项目提高效率,
  • 约定项目目录解构,统一代码风格,自动化部署.降低维护成本,
  • 提交项目代码前进行代码检查,提交log日志格式限制.保证项目质量

脚手架

• 用来自动创建项目文件的工具,新建项目的时候避免重复工作

yeoman

yeoman 使用前的准备

• 确认npm,node 的版本,我使用的是node 12.18.3 npm 6.14.6
• npm i yarn -g 安装yarn 1.22.4(npm也可以)
• yarn global add yo 安装yeoman 3.1.1
• npm
  • 查看当前镜像 npm config get registry
  • 修改淘宝镜像 npm config set registry http://registry.npm.taobao.org/
• yarn
  • 环境变量配置
  • npm i yarn -g 安装yarn
  • yarn global bin (查看yarn的安装目录,复制安装目录 添加到系统的环境变量Path中)
  • yarn config get registry 查看当前镜像
  • yarn config set registry http://registry.npm.taobao.org/ 修改淘宝镜像

yeoman

• Yeoman搭配不同的Generator创建任何类型的项目,意在精简开发过程,帮助开发者快速开启一个新项目的工具集,通过脚手架工具（yo），构建工具（grunt gulp等）和包管理器（npm bower等）的配合使用让开发者专注于业务的逻辑
• 使用
  - 下载项目目录模板yarn add generator-XXX (generator-node)
  - 自定义generator 的命名必须是generator-开头后面可以自拟
  - yo xxx 运行
• 实践 >https://www.cnblogs.com/zhuzy/p/13433704.html

plop

• 用于创建项目中相同类型的文件,提升开发效率
• yarn add plop --dev 安装plop到项目中