前端工程化-脚手架工具(1)

爱财
317 阅读6分钟

概述

随着前端应用功能要求不断提高、业务逻辑日益复杂。前端技术变得不可或缺, 全面发展, 从传统网站到H5、 移动APP、 桌面应用、 小程序。 前端行业对前端从业人员的要求越来越高。

写demo, 套模版, 调页面, 刀耕火种的方式已经不符合当前对开发效率的要求。

前端工程化, 前端工程师必备的手段。

前端工程化是指遵循一定的标准和规范, 通过工具提高效率、降低成本的一种手段.

开发遇到的问题 -〉 工程化解决的问题

  • 传统语言语法带来的弊端 - 无法使用 ES 新语法提高效率, 兼容问题 , 无法使用 less、 sass 提高 css 编程性, 开发环境不支持
  • 无法使用模块化, 组件化 - 使用模块化、组件化提高项目的可维护性, 运行环境不支持
  • 重复式的机械式的工作 - 上线前的重复性工作: 手动压缩文件、上传代码至服务器, 手动操作容易意外
  • 代码风格统一, 质量保证 - 多人协作, 无法硬性要求代码风格, 从仓库pull回来的代码质量无法保障
  • 依赖后端接口服务支持 - 具体功能需要等待后端接口服务提前完成才能具体编码
  • 整体依赖后端服务

工程化表现

一切以提高效率、降低成本、质量保证为目的的手段都属于工程化。一切重复的工作都应该被自动化。

  • 创建项目: 脚手架 创建项目结构、创建特定类型文件
  • 编码: 格式化代码、代码风格校验、编译、构建、打包
  • 预览测试: Web Sever/Mock 、 Live Reloading/HMR 、 Source Map
  • 提交: Git Hooks 、 Lint-taged 、 持续集成
  • 部署: CI/CD 、 自动发布

工程化不等于具体的工具

  • 部分工具过于强大, 导致很多新手认为, 有了工具就相当于实现了工程化。
  • 工具不是工程化的核心, 工程化是对项目整体的规划或架构, 工具是实现工程化的手段。

gongchenghua.png

  • 脚手架工具, 其实是特定类型的项目,官方给出的集成化方案, 如 创建项目、约定项目结构、热更新服务、代码风格校验、编译文件等, 可以认为是一些成熟的工程化集成。

gongchenghua-fangan.png

vue-cli: 特定类型项目官方给出的集成式工程化方案, 创建项目以及规定项目结构、提供一些工具:热更新, 编译vue文件等

工程化与node

工程化 powered by node.js, 让JavaScript 有了新的舞台,node 让前端行业进行了工业革命 ,我们用到的工具几乎都是由 node 开发的,前端工程化由 node 强力驱动的。

脚手架工具开发

概述

脚手架工具: 前端工程化的发起者,自动创建项目基础文件的工具。

脚手架的本质作用: 除了创建项目基础结构、创建文件,更重要的是给开发者提供了一些项目的约定和规范。快速搭建特定类型的项目骨架, 然后基于骨架完成后续开发工作：

  • 相同的组织结构
  • 相同的开发范式
  • 相同的模块依赖
  • 相同的工具配置
  • 相同的代码基础

对于一些语言来说, IDE 创建项目的过程就是脚手架的工作流程, 前端项目创建过程中, 前端技术选型多样, 没有一个统一的标准, 所以前端脚手架并没有集成在某个工具中, 而是以独立的工具存在. 本质上脚手架的目标都是为了解决创建项目过程中复杂的工作.

常用的脚手架工具

目前成熟的前端脚手架工具大都是为了特定的项目类型服务的,如：React -> create-react-app; Vue -> vue-cli; Angular -> augular-cli;

实现方式大同小异么都是根据提供的信息, 创建对应的项目结构. 适用于自身所服务的类型项目. 还有一种通用的项目脚手架工具, 根据一套模版生成一个对应的项目结构, 如 Yeoman, 比较灵活, 容易扩展。

除了创建项目时需要的脚手架工具, 还有在项目开发时,创建特定类型文件的脚手架, 如 Plop, 创建一个模块/组件所需要的文件, 相对于我们手动去创建, 脚手架提供了更加稳定、便捷的操作方式. 脚手架工具多种多样, 我们可以关注有代表性的工具深入探究。

yarn

简介

THE WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS. 一款用于创造现代化 web 应用的脚手架工具。 不同于 vue-cli , Yeoman 更像一个脚手架的运行平台。 我们可以通过 Yeoman 搭配不同的 Genarator 创建任何的类型的项目. 也就是我们可以创建自己的 Genarator 定制自己的脚手架。 在专注基于框架开发的人严重, Yeoman 过于通用, 导致不够专注.

yeoman001.png

yeoman002.png

基本使用

生成项目结构

  • 全局安装 yo
// 全局安装 yo
yarn global add yo
npm install yo --global
  • 安装对应的 generator Yeoman 需要搭配特定的 generator 才可以使用. 我们想要使用 yarn 创建项目, 必须要找到对应项目类型的 Generator. 例如 我们生成一个 node-module 的项目,我们可以使用 generator-node 模块.
yarn global add generator-node
npm install generator-node --global
  • 通过 yo 运行 generator
make dir my-module
yo node

yo-node.png

生成特定文件

有时候我们并不需要创建完整的项目结构, 我们可能需要在已有的项目基础之上,创建一些某些特定类型的文件, 如我们给一个已有的项目结构生成 readme,或者我们给原有的项目添加 bable、eslint 配置文件, 这些配置文件都有一些基础代码, 手动写的话很容易配错.这些需求我们可以通过生成器自动生成,利用 Sub Generator 特性去实现。

在项目下运行一个特定的 Sub Generator 命令生成对应的文件. 使用 generator-node 提供的子集生成器 cli 生成 cli 应用需要的文件。

需要注意的是并不是所有的 Generator 都提供子集生成器, 需要看官方文档确定是否提供子集生成器.

yo node:cli

yo-sub.png

yo-sun-=eizhi.png

本地模块通过 yarn link 到全局范围

yo-sub-wancheng.png

使用总结 yeoman 是一款通用型的脚手架工具, 我们几乎可以使用它创建任何类型的项目

  • 明确你的需求, 什么类型的项目
  • 根据需求找到何时的 generator
  • 全局范围安装找到 generator
  • 通过 yo 运行对应的 generator
  • 通过命令行交互填写选项
  • 生成所需要的项目结构
avatar
文章
阅读
粉丝