【Javascript系列】Terser通过调用API来实现代码的压缩和优化功能

起源

书接 上回，对Terser的功能做了一个初步的探索。在官方的主页上，有API和CLI二种调用方式。下面先介绍API的调用方式。

通过API来调用

Terser官方对于API的调用示例如链接: Terser API Reference。下面我们通过几个文件来实验

minify.js

#!/usr/bin/env node
'use strict'

const fse = require('fs-extra')
const { minify } = require("terser");

// Global functions:

// terser minify - pms.libv3.js
(minify({"pms.libv3.js": fse.readFileSync("pms.libv3.js", "utf-8")}, {})).then(res => {
    fse.writeFileSync("pms.libv3.min.js", res.code, "utf-8");
});

pms.libv3.js

function osmpTempKVPairs() {
  return {
    set: function(k, v) {
      localStorage.setItem(k, v);
    },
    get: function(k) {
      return localStorage.getItem(k);
    }
  }
}

API调用过程中的一个隐含的技术点 - 异步调用和Promise对象

细心的同学肯定发现了，minify()函数调用和fse.wirteFileSync()函数调用，没有按常规的方式一行一行的直接按顺序调用，而是以(minify()).then()的方式里进行回调。

原因是minify是一个异步函数，它在被调用后，就直接返回了，返回值是一个Promise对象。如果这个时候，顺序去调fse.writeFileSync()，会报错，因为minify还没有执行完压缩和优化的过程（尤其当文件比较大的时候，官方示例中没有提到）

所以，正确的做法是，在调用minify()之后 ，正确的方式是获取minify()的返回值Promise对象，继续调用Promise()对象的then()方法，在方法里写入压缩和优化后的代码到min.js文件。

官方文档中的一个有点容易忽略和混淆的地方

关于Promise

一个 Promise 必然处于以下几种状态之一：

• 待定（pending）：初始状态，既没有被兑现，也没有被拒绝。（如上文日志中的Pending状态）
• 已兑现（fulfilled）：意味着操作成功完成。
• 已拒绝（rejected）：意味着操作失败。

.then() 方法最多接受两个参数；第一个参数是 Promise 兑现时的回调函数（如上文中代码里的res），第二个参数是 Promise 拒绝时的回调函数。每个 .then() 返回一个新生成的 Promise 对象，可被用于链式调用。

MDN文档中对于Promise的说明，同时也有详细参考的例子。 : Promise 对象表示异步操作最终的完成（或失败）以及其结果值

各位同学自行打开链接查看。如果 有不明白的，随时给我留言，有问必回。