大前端进阶-工程化

概述

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

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

  • 传统语言或语法有弊病。虽然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。
根据提示输入文件名和文件路径,最终会生成文件如下:
企业微信20200729043033.png

自动构建

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提供了两个用于组合任务的函数:seriesparallel,前者表示串行任务,即多个任务会依次执行。后者表示并行任务,即多个任务会同时执行。

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
}
阅读 159

推荐阅读