认识前端工具链（一）之脚手架

认识前端工具链（一）

前端工具链综述

工具链在前端领域扮演着很重要的角色。如何为Javascript生产环境构建去构建一套工具链，来覆盖前端各个开发环节，是我们需要了解学习的。而一套高效的工具链体系，对于每一个前端团队来说都有着至关重要的意义，它不仅可以提高团队的开发效率，还可以在一定程度上规范前端开发的各个环节，进而为团队节省一些人员协作和调整的成本。

综上，前端工具链旨在友好开发体验，提升开发团队开发效率。

而要构建一个工具链，首先我们先要了解在前端开发领域有哪几个环节：

• 项目初始化
• 开发、调试、构建
• 单元测试
• 发布

所以一个前端工具链，它大致都会包含上面这一系列功能。而一个典型的示例就类似于下面：

• Yeoman
• Webpack
• Mocha
• 发布系统

我们可以将进而将它总结成下面几块：

• 脚手架
• 构建⼯具
• 测试工具
• 发布系统

而上了规模的团队也都会针对以上的流程，制定一个工具链，并将它包装成一个黑盒形式，让程序员在每个环节只需要运行简单命令行，即可进入开发流程。

而从整体上了解工具链相关的知识体系，熟悉其大致结构以及运作方式，也是十分重要的。

所以，下面这里是本人将对于工具链相关基础知识的一些整理。这一篇我们首先来介绍的是，工具链中的脚手架。

脚手架

所有的工具的开端就是我们的脚手架，但脚手架和工具链并不是一回事，我们可以将gennerator称为脚手架。

什么是脚手架？

做开发的，当然对于脚手架这个词并不陌生，按照我的理解，脚手架是构建一个标准项目模板的生成器。

我们每次开发新的项目，我们都要使用对应类型项目的脚手架，去初始化一个新项目，它会一个通用的目录结构，配置好我们所需要的工作环境。

常见的脚手架有：

• Vue的脚手架：vue-cli
• Angular的脚手架：angular-cli
• React的脚手架：create-react-app

如何创建脚手架？

具体脚手架并不是凭空产生的，即脚手架也有它的gennerator。

Yeoman是现在社区比较流行的脚手架生成器，即gennerator的gennerator，通过Yeoman的这个框架可以轻易的开发一个能够初始化项目创建模板的工具。

官网的介绍如下：

Yeoman是一个通用的脚手架系统，允许创建任何类型的应用程序。它允许快速开始新项目并简化现有项目的维护。

Yeoman 的使用

1. 基本使用

• 空文件夹，npm init ，安装yeoman依赖
• 包名必须为generator开头

// package.json
{
   
  "name": "generator-toolchain",
  "version": "1.0.0",
  "description": "",
  "main": "gennerator/app/index.js",
  "scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
   
    "yeoman-generator": "^4.13.0"
  }
}

• 目录结构

|—— package.json
|—— generators
		|——— app
			|—— index.js
			|—— templates
				|—— index.html

• 拓展生成器代码：
  Yeoman提供了一个基本生成器，您可以扩展它来实现自己的行为。该基本生成器将添加您希望简化任务的大多数功能。
  在生成器的index.js文件中，以下是扩展基本生成器的方法：

// gennerators/app/index.js
var Generator = require('yeoman-generator');

module.exports = class extends Generator {
   
    // 覆盖构造函数
    constructor(args, opts) {
   
      super(args, opts);
    }
  // 添加自己的功能
    method1() {
   
      this.log('method 1 just ran');
    }
    method2() {