前端工程化-自动化构建

96 阅读1分钟

前端工程化中的自动化构建是指可以让机器自动完成开发阶段中,把编写的源代码自动编译成生产环境可以运行的代码,这个转换可以也称为自动化构建工作流。

自动化构建的目的是为了让编码可以脱离运行环境兼容性的问题,开发阶段可以使用更加高效、规范的语法

例如用EMSrcipt新的特性、sass编写样式、模板引擎来渲染页面,这些不能被浏览器直接支持,需要用自动化构建工具把代码转换成可以执行的代码。这样就可以在编码时可以用更加高效方式,提高编码效率

NPM Script

NPM Script是实现自动化构建最简单的方式,可以将需要执行的命令,在package.json的script里面添加对应的命令,让自动化构建命令跟随项目更新

自动化构建的核心

代码构建的过程是将原来代码里的文件读取,然后经过对应的处理(语法转换、代码压缩),再将处理后的结果写入对应的位置

```
const fs = require('fs')const { Transform } = require('stream')const read = fs.createReadStream('main.css')const write = fs.createWriteStream('tmp.css')// 文件转换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)
```