大前端进阶-工程化

概述

前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化，标准化，主要目的是为了提高效率和降低成本。

目前，前端项目越来越复杂化和多元化，但是随着变化而来的就是如下问题：

• 传统语言或语法有弊病。虽然ES6及后续版本提出很多解决方案，但是由于环境的支持程度不同，需要进行大量重复性的适配工作。
• 无法模块化，组件化。简单来说，模块化指的是将一个文件拆分成多个相互独立的小文件，使用的时候再按照一定的规则加载和拼接。组件化是指将UI拆分成一个个功能独立单一的结构单元。
• 存在大量的重复的机械性工作。如项目的构建，发布等。
• 代码风格不统一，无法保证质量。
• 严重依赖后端接口支持。
• 其他问题。

前端工程化为上述问题提供了成熟的解决方案，作为使用者，可以更加关注业务逻辑的实现，也就提高了效率，降低了成本。

脚手架工具

创建项目的第一步就是利用脚手架工具创建项目模版，目前流行的框架均提供了脚手架工具，如react的create-react-app，vue的vue-cli。这些脚手架工具不仅构建了统一的项目结构，同时提供了语法转换、模块化组件化、代码风格检查、单元测试、自动构建部署等方案。

Yeoman是一种开源的脚手架工具，其相比vue-cli专门用于vue项目不同，其更加灵活，可以基于不同的generator生成不同的项目。因此本篇文章将从Yeamon入手，探索如何搭建脚手架。

使用Yeoman创建项目

• 安装yo： npm install -g yo。
• 根据想要创建的项目类型使用相应generator，我们创建一个webapp，因此使用generator-webapp：npm install -g generator-webapp（Yeoman提供了generator查找命令，可一键查找安装）。
• 在项目根文件夹下执行：yo webapp。

创建自定义Generator

使用Yeoman创建自定义脚手架，就是创建generator。

• 安装generator-generator: npm install generator-generator。

generator-generator是可用于生成generator模版，运行yo generator可创建模版项目，项目结构如下：

.
├── generators/
│   └── app/
│       ├── index.js
│       └── templates/
│           └── dummyfile.txt
├── .editorconfig
├── .eslintignore
├── .gitattributes
├── .gitignore
├── .travis.yml
├── .yo-rc.json
├── LICENSE
├── README.md
├── package.json
└── __tests__/
    └── app.js

主要逻辑在index.js中，templates文件夹包含所有模版文件。

• index.js文件导出一个继承自Generator的类，其包含了一些配置，控制台交互，文件操作等方法。

const Generator = require('yeoman-generator');
module.exports = class extends Generator {
  // 执行控制台与用户的交互
  prompting() {
    const prompts = [
      {
        type: 'input',
        name: 'name',
        message: 'What is your Project Name?',
        default: 'cus-project'
      }
    ];

    return this.prompt(prompts).then(props => {
      // 保存用户的输入或者选择
      this.props = props;
    });
  }

  // 执行文件操作
  writing() {
    this.fs.copyTpl(
      // 源文件
      this.templatePath('dummyfile.txt'),
      // 目标文件
      this.destinationPath('test.txt'),
      this.props
    )
  }
  // 自动安装依赖
  install() {
    this.npmInstall();
  }
};

可以在模版文件中用<%=name %>使用用户props。

• 将编写的包上传到npm，此处由于我们是测试，可以使用：npm link。
• 在需要创建项目的文件夹下执行yo customeGeneratorName(如我们的项目名为generator-test，此处就应该是test)。

实现自定义脚手架工具

从自定义generator示例中可以看出，实现一个简单的脚手架主要是实现以下两个方面的内容：

1. 实现与用户之间的交互（控制台交互）。
2. 实现文件的模版替换和复制操作。

在实现自定义脚手架工具之前，得需要了解下面内容：

• 如何在npm包中添加可执行文件？

在npm包的pakage.json文件中添加bin属性，bin的值是一个对象：

{
    // 键表示命令，值表示在终端输入命令后执行的文件
    "create-custom": "index.js"
}

当项目中install这个包的时候，命令会注册到全局或者./node_modules/.bin/目录里。

在执行文件的开头需要加上`#!/usr/bin/env node`，否则不会被识别。

• inquirer

inquirer用于快速创建交互式命令行。其基本使用如下：

#!/usr/bin/env node
const inquirer = require('inquirer')
// 设置问题
inquirer.prompt([
    {
        type: 'input', // 问题类型
        name: 'name', // 数据属性名
        message: '名称', // 提示信息
        default: 'Rogan' // 默认值
    },
    {
        type: 'list',
        name: 'data',
        message: '选择语言',
        choices: [
            {
                name: 'javascript', value: 1
            },
            {
                name: 'go', value: 2
            }
        ]
    }
]).then(answers => {
    // 处理结果
    console.log(answers)
})

问题选项中的类型包含如下：

1. input: 输入文本
2. number: 输入数字
3. confirm: 是否选择 (y/n)
4. list: 选择列表
5. rawlist: 带编号的选择列表
6. expand: 带缩写选择列表
7. checkbox: 多选
8. password: 密码
9. editor:文本编辑器

• ejs模版语法

ejs是一种高效的嵌入式JavaScript模板引擎。

let ejs = require('ejs')
ejs.render(`
       选择的语言有<%= languages.join(',')%>
    `, {
    languages: ['php', 'javascript']
})

• fs

fs是node内置的模块，用于文件的操作。

通过上面几个工具就可以实现简单的脚手架工具，实现目标：获取用户的选择，根据选择编译模版并生成项目。

在index.js文件中：

#!/usr/bin/env node
const inquirer = require('inquirer')
const fs = require('fs')
const ejs = require('ejs')
const path = require('path')

const choices = [
    { name: 'javascript', value: 1 },
    { name: 'php', value: 2 },
    { name: 'go', value: 3 }
]
// 实现命令行交互
inquirer.prompt([
    {
        type: 'checkbox',
        name: 'lang',
        message: '选择语言',
        choices
    }
]).then(answers => {
    // 获取交互内容
    const choiced = answers.lang.map(item => {
        let lan = choices.find(l => l.value === item)
        return lan.name
    })
    // 获取模版文件夹所在路径
    const templatesDir = path.join(__dirname, 'templates')
    // 获取当前命令行执行文件夹路径
    const destDir = process.cwd()
    // 读取模版文件夹下的所有文件
    fs.readdir(templatesDir, function (err, files) {
        if (err) {
            throw err
        }

        files.forEach(file => {
            // 编译模版文件
            ejs.renderFile(path.join(templatesDir, file), { lang: choiced }, (err, result) => {
                if (err) throw err
                // 将编译后的内容拷贝到当前命令行执行文件夹下
                fs.writeFileSync(path.join(destDir, file), result)
            })
        })
    })
})

在模版index.html中：

<html>
    <header></header>
    <body>
        <div>
            用户选择： <%= lang.join(',')%>
        </div>
    </body>
</html>

使用plop

和Yeoman不同，plop是一个在项目内使用的，可以快速创建指定格式文件的脚手架工具，如在vue编程过程中，每次创建.vue文件，均需要在文件中手动输入template，script，style三个节点，可以利用此工具一键生成文件，减少大量的重复工作。
使用步骤如下：

• 安装依赖包 npm install --save-dev plop
• 在根目录下创建plopfile.js文件，该文件可用于注册命令。

module.exports = function (plop) {
    // 设置生成器
    plop.setGenerator("create-vue-file", {
        description: "创建vue模版文件",
        // 命令行交互
        prompts: [
            {
                type: 'input',  // 交互类型
                name: 'name',   // 参数名称
                message: '请输入vue文件名称', // 交互提示
                default: 'VueFile'
            },
            {
                type: 'input',
                name: 'path',
                message: '请输入文件创建目录'
            }
        ],
        // 交互完成后执行的动作
        actions: [
            {
                type: 'add', // 动作类型: 表示添加文件
                path: '{{ path }}/{{ name }}.vue', // 根据用户输入获取文件路径
                templateFile: 'templates/vue.hbs' // 模板文件地址， 使用hbs文件
            }
        ] // 执行操作
    })

}

• 添加模版文件，在templates文件加下添加vue.hbs模版文件

<template>
    <div class="{{name}}-container">

    </div>
</template>
<script>
    export default {
        name: {{ name }}
    }
</script>
<style>
    .{{name}}-container {
        
    }
</style>

• 添加npm scripts

在package.json文件的scripts属性下添加："plop": "plop"

• 执行命令

在命令行执行: npm run plop create-vue-file。
根据提示输入文件名和文件路径，最终会生成文件如下：

自动构建

gulp

要想使用gulp，需要下面两个步骤：

1. 安装gulp包：npm install gulp --save-dev。
2. 在项目下创建gulpfile.js文件，该文件中注册相应任务等。

基本使用

在gulpfile中添加任务

// gulp要求所有任务均为异步任务，需要通过调用done函数标识任务完成
exports.foo = done => {
    console.log("foo task")
    done()
}

const gulp = require('gulp')
// 在老的版本中，需要通过task方法定义任务
gulp.task("bar", done => {
    console.log("bar task")
    done()
})

在命令行中执行npm run gulp foo，即可执行对应的任务。

组合任务

gulp提供了两个用于组合任务的函数：series和parallel，前者表示串行任务，即多个任务会依次执行。后者表示并行任务，即多个任务会同时执行。

const { series, parallel } = require('gulp')

// 创建两个异步任务，由于这两个异步任务并没有被导出，因此不能被gulp调用
const task1 = done => {
    setTimeout(() => {
        console.log("task1 ...")
        done()
    }, 1000)
}
const task2 = done => {
    setTimeout(() => {
        console.log("task2 ...")
        done()
    }, 1000)
}

// 定义串行任务，只有task1执行完成后（done方法被调用，意味着执行完成），task2才会执行
exports.foo = series(task1, task2)
// 定义并行任务，可同时执行
exports.bar = parallel(task1, task2)

异步任务

gulp提供了多种定义异步任务的方式：

// 最常见的利用回调函数
exports.callbak = done => {
    setTimeout(() => {
        console.log("callback ...")
        done()
        // done(new Error())
    }, 1000)
}
// 同样支持返回一个promise对象
exports.promise = () => {
    return new Promise((resolve, reject) => {
        console.log('promise ...')
        resolve() // 标识成功
        // reject(new Error()) //标识失败
    })
}

// 支持async await
exports.async = async () => {
    await new Promise((resolve, reject) => {
        console.log('async ...')
        resolve() // 标识成功
        // reject(new Error()) //标识失败
    })
}

const fs = require('fs')
// 由于构建操作大部分针对的是文件操作，因此也执行返回文件流
exports.stream = () => {
    let readStram = fs.createReadStream('package.json')
    let writeStream = fs.createWriteStream('text.txt')
    readStram.pipe(writeStream)
    // 相当于在steam的end事件中执行done方法
    return readStram
}

文件流处理过程

gulp是一种基于流的构建系统，因此最根本的是文件流的处理。最基础的文件流处理过程可以分为三个步骤：输入，处理，输出。

const fs = require('fs')
const { Transform } = require('stream')
exports.file = () => {
    // 获取输入流
    let read = fs.createReadStream('package.json')
    // 获取输出流
    let write = fs.createWriteStream('text.txt')
    const transform = new Transform({
        transform: (chunk, encoding, callback) => {
            const input = chunk.toString()
            // 针对输入的文件内容进行转换操作
            const output = input.replace(/\s+/g).replace(/\/\*.+?\*\//g)
            callback(null, output)
        }
    })
    // 通过管道的方式定义整个文件操作
    read
        .pipe(transform) // 处理输入
        .pipe(write) // 输出
    return read
}

gulp针对文件流读写操作提供了src和dest两个更为强大的方法获取文件读写流，而文件转换操作一般是基于插件完成，通过安装不同的插件，实现不同的文件转换。

const { src, dest } = require('gulp')
const cleanCss = require('gulp-clean-css')
const rename = require('gulp-rename')
exports.default = () => {
    return src('src/*.css') //获取src文件夹下的所有css文件
        .pipe(cleanCss()) // 处理一：将css文件压缩
        .pipe(rename({ extname: '.min.css' })) // 处理二： 替换文件的后缀名
        .pipe(dest('dist')) // 将处理后的文件输入到指定的文件夹
}

常用实例

本实例目标是通过gulp实现css，js，html编译构建，图片和字体压缩转换。

样式编译

将指定目录下的scss文件转换为css文件。

const { src, dest } = require('gulp')
const sass = require('gulp-sass')
const style = () => {
    return src('src/assets/styles/*.scss', { base: 'src' }) // base属性表示保存源文件从src文件夹开始的文件结构
        .pipe(sass({
            // 指定转换后css显示规则：outputStyle表示结束}放在新的一行
            outputStyle: "expanded"
        }))
        .pipe(dest('dist'))
}

module.exports = {
    style
}

脚本编译

将js中使用的es新特性转换为旧的语法。

const { src, dest } = require('gulp')
const babel = require('gulp-babel')
const script = () => {
    return src('src/assets/scripts/*.scss', { base: 'src' }) // base属性表示保存源文件从src文件夹开始的文件结构
        .pipe(babel({
            // 指定具体的转换工具
            presets: ['@babel/preset-env']
        }))
        .pipe(dest('dist'))
}
module.exports = {
    script
}

html模板编译

将html模板文件编译成可以正常工作的html文件。

const { src, dest } = require('gulp')
// html模板使用的swig模板，因此引入相应转换插件
const swig = require('gulp-swig')
const page = () => {
    return src('src/*.html', { base: 'src' }) // base属性表示保存源文件从src文件夹开始的文件结构
        .pipe(swig({
            // 指定编译模板时使用的变量
            data: { name: 'test' }
        }))
        .pipe(dest('dist'))
}

module.exports = {
    page
}

图片压缩及字体拷贝

站点图片在使用前可以通过压缩方式，去除无用的头文件等，减小文件体积。

const { src, dest } = require('gulp')
const imagemin = require('gulp-image')
const image = () => {
    // ** 表示文件夹下的所有文件
    return src('src/assets/images/**', { base: 'src' }) // base属性表示保存源文件从src文件夹开始的文件结构
        .pipe(imagemin())
        .pipe(dest('dist'))
}

const font = () => {
    // ** 表示文件夹下的所有文件
    return src('src/assets/fonts/**', { base: 'src' }) // base属性表示保存源文件从src文件夹开始的文件结构
        // 由于字体文件夹下可能有图片，因此也压缩一下
        .pipe(imagemin())
        .pipe(dest('dist'))
}
module.exports = {
    image,
    font
}

清空编译文件

在编译之前，需要删除历史编译文件。

const del = require('del')
const clean = () => {
    // 返回的是promise对象，所以可以直接返回
    return del(['dist'])
}
module.exports = {
    clean
}

添加开发服务器

添加开发服务器将有助于开发阶段查看效果及调试。

const browserSync = require('browser-sync')
const bs = browserSync.create()
const serve = () => {
    bs.init({
        notify: false, // 去除站点启动成功提示
        port: 8080, // 指定站点端口号
        open: true, // 站点启动完成之后是否自动打开浏览器
        files: ['dist/**'], // 添加文件变化监听
        server: {
            // 指定站点文件根目录
            baseDir: 'dist',
            // 添加路由，解决非dist目录下的文件引用
            routes: {
                '/node_modules': 'node_modules'
            }
        }
    })
}
module.exports = {
    serve
}

监视变化

对文件变化添加监视，当开发时文件发生变化后，可以自动完成构建及浏览器刷新工作。

const { watch } = require('gulp')
const browserSync = require('browser-sync')
const bs = browserSync.create()
const serve = () => {
    // watch方法用于监视文件变化，当文件发生变化后，可以执行对应的构建
    watch('src/assets/styles/*.scss', style)
    watch('src/assets/scripts/*.js', script)
    watch('src/*.html', page)
    // 由于复制字体和图片压缩对于开发阶段没有意义，而且会增加服务器负担，所以去掉对其监视。
    // watch('src/assets/images/**', image)
    // watch('src/assets/fonts/**', font)
    bs.init({
        notify: false, // 去除站点启动成功提示
        port: 8080, // 指定站点端口号
        open: true, // 站点启动完成之后是否自动打开浏览器
        files: ['dist/**'], // 添加文件变化监听
        server: {
            // 指定站点文件根目录
            baseDir: ['dist', 'src'], // 提供数组，当dist中没有找到相应图片或者字体资源时，会自动去src目录下查找
            // 添加路由，解决非dist目录下的文件引用
            routes: {
                '/node_modules': 'node_modules'
            }
        }
    })
}
module.exports = {
    serve
}

其他依赖文件

<link rel="stylesheet" href="/node_moduls/bootstrap/dist/css/bootstrap.css" />
如果在模板文件依赖于node_modules文件夹下的文件，那么编译完成的html就因为dist目录下没有该文件而报错。
解决方案是利用useref插件和构建注释解决：

• 首先添加构建注释：

    <!--build:css assets/styles/vendor.css-->
    <link rel="stylesheet" href="/node_moduls/bootstrap/dist/css/bootstrap.css" />
    <!--endbuild-->

build和endbuild注释之间的所有资源文件将会被打包到 assets/styles/vendor.css，同时将上述代码替换为：
<link rel="stylesheet" href="assets/styles/vendor.css" />

• 添加useref编译任务：

const { src, dest } = require('gulp')
const userefPlugin = require('gulp-useref')
const ifplugin = require('glup-if')
const uglify = require('glup-uglify')
const cleanCss = require('glup-clean-css')
const htmlmin = require('glup-htmlmin')
const useref = () => {
    return src('dist/*.html', { base: 'dist' })
        .pipe(userefPlugin({
            // 指定资源文件查找路径
            searchPath: ['dist', '.']
        }))
        // 分别压缩js，css，html代码
        .pipe(ifplugin(/\.js$/, uglify()))
        .pipe(ifplugin(/\.css$/, uglify()))
        .pipe(ifplugin(/\.html$/, uglify()))
        .pipe(dest('release'))
}
module.exports = {
    useref
}

整合

上面的多个章节，分别实现了自动化构建的不同方面，整合在一起就可以实现一个自动化构建的功能，在整合时，需要完善下面两个方面：

• 插件自动加载

gulp提供了gulp-load-plugins插件，可以自动加载所有已经npm install安装的gulp插件。

const plugin = require('gulp-load-plugins')
// 可以通过plugin.sass的方式引入gulp-sass插件
// plugin.sass

• 整合零散任务

利用series和parallel可以将多个零散任务组装到一起，实现一个完整的构建工作流。

const compile = parallel(style, script, page)
const build = series(
    clean,
    parallel(
        series(compile, useref),
        image,
        font
    )
)
const develop = series(compile, serve)
module.exports = {
    compile,
    build,
    develop
}