# fed-e-task-02-01

**Repository Path**: lorixiang/fed-e-task-02-01

## Basic Information

- **Project Name**: fed-e-task-02-01
- **Description**: Part 2 前端工程化实战
模块一 开发脚手架及封装自动化构建工作流
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-12-11
- **Last Updated**: 2020-12-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# fed-e-task-02-01

#### 介绍
Part 2 前端工程化实战
模块一 开发脚手架及封装自动化构建工作流

#### 简答题答案以及说明

##### 1、谈谈你对工程化的初步认识，结合你之前遇到过的问题说出三个以上工程化能够解决问题或者带来的价值。

工程化是遵循一定的标准和规范，通过工具提高效率，降低成本的手段。前端项目工程化主要解决的问题有：

1. 传统语言或语法的弊端：想使用  ES6+ 新特性，但有兼容问题，想使用 Less、Sass 等增强 CSS 编程性，但运行环境不支持；
2. 无法使用模块化或组件化：想提高可维护性；
3. 重复的机械式工作：部署上线前需要手动压缩代码及资源文件，部署过程需要手动上传代码；
4. 代码风格统一、质量保证：多人协作开发无法硬性统一代码风格，从仓库 拉取 的代码质量无法保证；
5. 依赖后段服务接口支持：部分功能开发需要等待后段服务接口提前完成；
6. 整体依赖后段项目等。

一切以提高效率降低成本质量保证为目的的手段都属于工程化。但要注意工程化不等于某个工具，工程化的核心不是工具，工具只是手段，项目应该先有一个整体规划，然后决定用哪些工具。

前端工程化可以体现在项目流程的各个环节上，从创建项目，到编码阶段，到测试阶段，到提交和部署阶段，都各有不同的解决方案，这里从我经历过的一个项目举例说明：

1. 项目创建：早期框架从 angular 1.x 换成 vue 2.x 后，创建项目的方式由手动从 index.html 开始创建换成了 vue-cli 脚手架一键生成项目基础架构，再从该基础上定制项目所需要的配置等，提高了开发效率。
2. 模块化和组件化：之前项目对公共资源如正则校验、全局变量等定义位置较为混乱，历史记录管理、用户信息管理等代码耦合过高，单个页面元素过多等……经过重构，项目结构清晰，即使是新入职的员工也能快速上手，提高了可维护性。
3. 繁琐的部署步骤：重构之前的项目，公共包和每个模块需要单独压缩，手动上传到远程，由于项目有多个环境（测试、演练、灰度、生产），每次需要依次上传，导致很多重复繁琐的工作，曾被戏称为“无情的上传工具”。现在通过重构和 webpack 工具解决了重复打包和压缩、以及多次上传的问题，工作效率大大提升，且降低了手动出错的几率。



##### 2、你认为脚手架除了为我们创建项目结构，还有什么更深的意义？

脚手架除了创建项目基础结构外，更深的含义是为了提供项目约定和规范。

在项目开发阶段，有很多相同点，如相同的组织结构、开发范式、模块依赖、工具配置，甚至一些基础代码，搭建新项目时脚手架可以帮助减少大量的重复性工作。



#### 编程题

##### 1、概述脚手架实现的过程，并使用 NodeJS 完成一个自定义的小型脚手架工具

前端脚手架的工作流程为：

1. 通过命令行交互询问一些预设问题
2. 根据回答的结果结合模板文件生成项目结构

那实现一个脚手架流程为：

1. 在项目根目录下通过 `npm init ` 初始化 `package.json`，并通过 bin 字段指定 cli 项目的入口文件（如 `cli.js`）
2. 
   node cli 应用入口文件必须要有特定文件头 `#!/usr/bin/env node`
3. Linux 或 maxOS 系统需要修改此文件的读写权限 为 755 `chmod 755 cli.js`
4. 安装 `inquirer` 模块，在 node 中发起命令行交互询问，自定义预设的问题
5. 如果需要用到模版，则在项目根目录下新建 `templates` 模板，模板文件可以使用 EJS 
6. 根据用户回答预设问题的结果，结合模板，生成基础结构
7. npm link 将项目 link 到全局，则可以在本地任何文件夹下使用该脚手架

实现的脚手架工具见 [./code/scaffolding/](./code/scaffolding/) 文件夹，测试方法如下：
1. 在 [./code/scaffolding/simple-lori-cli/](./code/scaffolding/simple-lori-cli/) 下执行 `yarn`，后运行 `yarn link` 将项目链接到全局
2. 在 [./code/scaffolding/test-scaffolding/](./code/scaffolding/test-scaffolding/) 或其他任何文件夹下运行 `simple-lori-cli` 回答预设问题选择模板后得到相应项目结构

##### 2、尝试使用 Gulp 完成项目的自动化构建，并提交一个项目说明文档

代码实现及说明文档见 [./code/gulp/](./code/gulp/) 文件夹