Babel 7 的一个小技巧：base64 转换-JavaScript中文网-JavaScript教程资源分享门户

在现代前端开发中，使用 ES6 及以上版本的 JavaScript 已经变成了行业标准。但是，由于不同的浏览器以及 Node.js 版本之间的兼容性差异，我们往往需要使用 Babel 将我们的 ES6+ 代码编译成 ES5 以兼容更多平台。

在 Babel 7 中，我们可以使用一个小技巧来进一步压缩我们的代码，即将常量编码成 base64 形式。这在一些特殊情况下非常有用，例如代码中包含一些不常用的常量值，不但可以减小代码的体积，也增加了代码的安全性，因为在 base64 形式下很难被直接识别。

为什么使用 base64

在 Babel 的插件中，我们经常需要使用一些常量值，例如字面量字符串或数值。这些常量值在转换为代码之前，往往需要通过一个变量来存储。例如：

const str = 'hello world';

上述代码中，我们使用了一个 const 变量来存储字符串 'hello world'，在编译后的代码中，这个值会被写成字面量形式。但是，如果这个字符串是很长的话，就会导致代码体积变大。

对比一下，如果我们将这个字符串以 base64 形式编码，可以将其压缩至更小的体积。而且，在一些情况下，这种方法还可以增加代码的安全性，因为以 base64 形式编码的字符串，很难被直接识别出其真正的含义。

如何使用 base64

代码中使用 base64 就是将常量值进行编码，然后在解析代码时，再将编码后的值解码回来。在 JavaScript 中，我们可以使用 btoa() 和 atob() 来进行 base64 编码和解码。

以下是一个基本的例子：

const str = 'hello world';
const base64Str = btoa(str); // 编码为 base64
console.log(base64Str); // 输出：aGVsbG8gd29ybGQ=

// ...

const decodeStr = atob(base64Str); // 解码为原始字符串
console.log(decodeStr); // 输出：hello world

当我们用 Babel 编译上述代码时，会得到以下结果：

var str = 'hello world';
var base64Str = btoa(str); // 编码为 base64
console.log(base64Str); // 输出：aGVsbG8gd29ybGQ=

// ...

var decodeStr = atob(base64Str); // 解码为原始字符串
console.log(decodeStr); // 输出：hello world

可以看到，编码的实现非常简单，只需引入以下 JavaScript 库：

var btoa = require('btoa');
var atob = require('atob');

然后，我们就可以使用 btoa() 和 atob() 来实现我们的 base64 转换了。

实践中的应用

除了上面提到的静态字符串以外，在需要使用表格等数据结构的场景中，base64 也有很好的应用。

例如，我们用以下数组表示一个简单的表格：

const tableData = [
  ['Name', 'Age', 'Gender'],
  ['Tom', 25, 'Male'],
  ['Jack', 30, 'Male'],
  ['Lucy', 28, 'Female']
];

如果直接在代码中写入这个表格，会使得代码很长，不美观，也不利于维护。因此，我们可以将表格数据以 base64 形式编码，并存储在变量中。

const tableData = [
  atob('TmFtZQ=='), // Name
  atob('QWdl'), // Age
  atob('R2VuZGVy') // Gender
  // 省略部分行
];

这样，在代码中使用这个表格时，只需解码即可。

console.table(tableData);

总结

利用 base64 编码是一种优雅而简单的方式，可以减小代码量，增加代码安全性。在实际开发中，我们可以将一些静态数据（例如文本、表格等）编码后嵌入代码中，或者将一些敏感数据（例如加密密钥）编码后存储在代码中。这种技巧能让我们的代码看起来更简洁，便于维护，同时也增加了代码的安全性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/65ab749badd4f0e0ff51a799