ES6（ECMAScript 6），也称 ES2015，是 JavaScript 的新语法标准。它带来了许多新特性，如箭头函数、模板字符串、解构赋值、Promise、类等等。在前端开发领域，掌握 ES6 几乎成为了必备技能。今天，我们将通过一个 Serverless 实战项目，快速入门 ES6。
背景
本文的例子是一个基于腾讯云 Serverless 的应用，核心功能是将用户上传的图片压缩后存储。在实现过程中，我们将使用到 ES6 中的模板字符串、Promise、解构赋值等功能。
准备工作
我们需要准备好腾讯云账号，并在控制台创建一个 COS 对象存储和一个 SCF 函数，这里不再赘述。接下来，我们需要安装一些必要的工具，包括：
- Node.js 和 NPM：这是我们后续使用的主要工具，可以在官网下载安装。
cos-nodejs-sdk-v5：腾讯云 COS SDK for Node.js，可以使用 NPM 安装：npm install --save cos-nodejs-sdk-v5。serverless-js-runtime：用于在腾讯云 Serverless 中支持 Node.js 运行时的插件，可以使用 NPM 安装：npm install --save serverless-js-runtime。uglify-es：用于压缩图片的工具，可以使用 NPM 安装：npm install --save uglify-es。
步骤
1. 配置 Serverless 函数
在控制台中，在您的 Serverless 服务中进入 Function 页面，在左侧导航中的触发器管理中为函数添加触发器。我们会选择对象存储 COS类型，并设置如下参数：
- 事件类型：选择
cos:ObjectCreated:*，表示当 COS 中上传文件后触发函数。 - Bucket 名称：选择您创建的 COS Bucket。
- 前缀匹配：可以填写空格，表示监听 Bucket 中所有对象创建事件。
- 后缀匹配：选择 JPG 和 PNG 文件，即
.jpg和.png。
2. 编写 Serverless 函数
打开您的编辑器，创建 index.js 文件。这个文件会是我们的 Serverless 函数的主体代码，用于压缩图片并将其存储到 COS 中。在顶部，我们将使用 require 函数导入 SDK 和第三方工具：
const COS = require('cos-nodejs-sdk-v5');
const UglifyJS = require("uglify-es");
const JsRuntime = require("serverless-js-runtime");
const runtime = new JsRuntime();接下来，我们编写主体代码。我们将遍历图片文件列表，使用UglifyJS.minify函数压缩图片并上传到 COS 中。代码如下：
// www.javascriptcn.com code example
exports.main = async (event, context) => {
const cos = new COS({
SecretId: context.credentials.secretId,
SecretKey: context.credentials.secretKey,
SecurityToken: context.credentials.token,
Region: context.region,
});
const result = {
success_count: 0,
failed_count: 0,
errors: []
};
for (const record of event.Records) {
const bucket = record.cos.bucket.name;
const key = record.cos.object.key;
const stream = await cos.getObject({Bucket: bucket, Key: key});
const sourceBuffer = await runtime.stream2Buffer(stream.Body);
try {
const resultBuffer = UglifyJS.minify(sourceBuffer);
await cos.putObject({
Bucket: bucket,
Key: `compressed/${key}`,
Body: resultBuffer.code,
});
result.success_count++;
} catch (error) {
result.failed_count++;
result.errors.push(error);
}
}
return result;
};在这段代码中，我们首先将 COS 客户端初始化，并定义了一个 result 变量用于存储执行结果。接着，我们遍历 COS 触发器传入的图片列表，使用cos.getObject方法获取图片数据，并使用serverless-js-runtime提供的stream2Buffer方法将图片数据转换为 Buffer。然后，我们使用UglifyJS.minify方法压缩图片，并将结果使用cos.putObject方法存储到 COS 中。最后，我们返回执行结果。
3. 完善 Serverless 函数
在代码中，我们可以使用 ES6 的许多特性来简化代码。比如，我们可以使用解构赋值获取传入的事件数据：
exports.main = async ({ Records: records }, context) => {
// ...
for (const { cos: { bucket: { name: bucket }, object: { key } } } of records) {
// ...
}
// ...
};我们还可以使用字符串模板化简化代码，将图片存储路径设置为一个子目录：
await cos.putObject({
Bucket: bucket,
Key: `compressed/${key}`,
Body: resultBuffer.code,
});最后，我们可以使用 Promise 来优化代码。比如，我们可以使用 Promise.all 让压缩和上传并行执行：
// www.javascriptcn.com code example
await Promise.all(records.map(async ({ cos: { bucket: { name: bucket }, object: { key } } }) => {
const stream = await cos.getObject({ Bucket: bucket, Key: key });
const sourceBuffer = await runtime.stream2Buffer(stream.Body);
try {
const resultBuffer = UglifyJS.minify(sourceBuffer);
await cos.putObject({
Bucket: bucket,
Key: `compressed/${key}`,
Body: resultBuffer.code,
});
result.success_count++;
} catch (error) {
result.failed_count++;
result.errors.push(error);
}
}));结语
在这篇文章中，我们通过一个 Serverless 实战项目，快速入门了 ES6。当然，本文只是 ES6 的冰山一角，还有许多其他特性和用法需要深入学习和掌握。但相信通过这篇文章，您已经能够感受到 ES6 带来的便利和简洁，为您的开发工作带来了更多的可能性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d6d4f6a941bf7134cb43b3