前端工程化

前端面临的问题

使用ES6，但是兼容有问题
想要使用Less/Sass/PostCSS增强前端CSS的编程性，但是运行环境不支持
模块化提高代码可维护性，但是不能支持
上线前资源压缩
代码规范问题
部分功能只有后台开发才能让前端开发，依赖后端

工程化变表现

一切以提高效率、降低成本、质量保证为目的手段都使工程化

创建：脚手架
编码：代码格式化、编码效率
预览：热更新、Mock、Source Map
代码提交：项目整体检查
部署：自动发布

注意，工程化不是某个工具，工具化只是实现工程化的方式，如vue-cli。node对前端工程化起了非常大的作用

脚手架

快速搭建项目骨架

常见脚手架：vue-cli、angular-cli、Yeoman、Plop

Yeoman

老牌强大的脚手架，可以创建任何类型的项目，不针对某一项目，这是优点也是缺点。

这里我们先试着安装一个Generator的脚手架，然后使用这个脚手架创建一个node项目的基本结构

首先全局安装yarn，如果不安装的话，使用npm

npm install -g yarn

然后使用yarn全局安装Yeoman

yarn global add yo   //这里相当于npm install yo -g 注意，如果报的错是环境变量的话那么，要查看是放对了盘

之后，试着针对node_module,生成一个generator-node

yarn global add generator-node

切换到指定文件夹里面，然后运行

yo node

然后就可以选择配置了，一直回车，最后Yeoman会自动安装生成一个node项目的基础结构。

总结就是

](imgchr.com/i/DBRlan)

Sub Generator

有时在已有项目创建特定文件，就可使用sub generator，这里尝试将上面的my-module改成cli应用,在上面项目文件执行

yo node:cli

执行完成之后，就可以作为全局的命令执行了

yarm link //本地模块link到全局范围
npm install //加载模块依赖
my-module --help

不是每一个generator 都有自己生成器，需要自己去官方文档查看

Yeoman总结

Yeoman使用一般遵循几个步骤

[

针对步骤2，找到合适的Generator是在[yeoman.io/generators/]: yeoman.io/generators/…

例如想要创建网页应用，先在官网上面搜web app

[

发现有webapp这个选项，然后执行安装语句

yarn global add generator-webapp

创建项目文件夹，然后执行

yo webapp

然后根据自己的需要选择选项

创建自己的Generator

会使用别人的脚手架之后，我们尝试自己来一个属于自己的生成器，首先，创建一个文件夹，来安装自定义文件的generator

//在新文件夹中使用
yarn init
//然后使用,
yarn add yeoman-generator

然后可以用VScode打开文件夹，在根目录下面生成一个generators/app/index.js文件，文件夹层级如下图，这里作为Genrator的核心入口，这个Generator类当作是Generator的核心入口，需要导出一个继承自Yeoman-generator的类型。

//此文件为generator的核心入口
//需要导一个继承自 Yeoman Generator的类型
//Yeoman Generator 在工作时会自动调用生命周期方法
//可以通过父类提供的一些方法实现
// 一些功能，例如文件写入

const Generator = require('yeoman-generator')

module.exports = class extends Generator {
  writing(){//自动生成阶段调用此方法
     this.fs.write(
     this.destinationPath('temp.text'),
     Math.random().toString()
     )
  }
}

保存,然后使用

npm link

将模块映射到全局范围，然后就可以使用模块了。创建一个新文件夹，用来测试新建的脚手架

yo sample

就可以发现生成了包含随机数的temp.txt文件

使用模板创建文件

但是只使用上面这种手动创建的方式在需要创建比较复杂的项目的时候就比较难了，这时候我们可以使用模板来创建文件。

先创建在原来generator-sample里的generator/app文件夹里面生成一个templates，之后在里面创建一个foo.txt文件，在里面写上我们的模板

这是一个模板文件
内部可以使用 EJS 模板标记输出数据
像： <%= title %>

<% if (success) { %>
哈哈哈

<% }%>

然后将app文件夹下面的index.js改为以下内容

//此文件为generator的核心入口
//需要导一个继承自 Yeoman Generator的类型
//Yeoman Generator 在工作时会自动调用生命周期方法
//可以通过父类提供的一些方法实现
// 一些功能，例如文件写入

const Generator = require('yeoman-generator')

module.exports = class extends Generator {
  writing(){
    //模板创建文件方式
    
    //模板文件路径
    const tmpl  = this.templatePath('foo.txt')
   	//输出路径
    const output = this.destinationPath('foo.txt')
	//上下文
    const context = { title: 'Hellow huang',success:true}
	//运行创建的函数
    this.fs.copyTpl(tmpl,output,context )
  }
}

使用 npm link映射到全局，然后新创建一个文件夹，在里面运行

yo sample

发现生成了文件foo.txt如下：

[

接受用户输入

上面，我们已经实现了，利用模板创建文件，但是这还不够，我们要接受用户输入来动态创建想要的东西。我们修改原来的index.js成为下面这样

const Generator = require('yeoman-generator')

module.exports = class extends Generator {
  prompting(){// Yoman在询问环节会调用此方法
    //可以调用用户的prompt()方法发出对用户命令行的询问
    return this.prompt({
       type: 'input',  //表示交互类型为输入
       name: 'name', //输入之后得到的关键字为name
       message:'your project name', //提示
       dafault: this.appname //默认值
    })
    .then(answers=>{
      // answers=>{name:'input value'}
     this.answers = answers //将结果挂到this上面去
    })
    .catch()
  }
  writing(){//自动生成阶段调用此方法
    //模板文件方式
    
    //模板文件路径
    const tmpl  = this.templatePath('foo.txt')
    
    const output = this.destinationPath('foo.txt')

    const context = this.answers //赋值

    this.fs.copyTpl(tmpl,output,context )
  }
}

改变foo.txt内容如下

这是一个模板文件
内部可以使用 EJS 模板标记输出数据
像： <% =name %>

保存，然后就可以试着使用了交互实现项目动态创建了

快捷键

cd ..返回上级文件

mkdir 文件名创建文件

命令行使用code .可以快速打开文件

前端工程化（一）