Spark AR —— 分割脚本为多个文件【脚本】

本文已参与掘金创作者训练营第三期「高产更文」赛道，详情查看：掘力计划｜创作者训练营第三期正在进行，「写」出个人影响力。

Spark AR 是 Facebook 免费创作 AR 作品的平台，使用户能够为 Facebook 和 Instagram 创建交互式增强现实体验，超过 40 万名创作者，190个国家/地区，使用 Spark AR 来创作自己的AR作品

由于该软件无需任何编码知识即可使用，因此任何人现在都可以在 AR 世界中几乎没有经验地制作下一个疯狂式传播的 Instagram AR 特效，引领世界潮流。

专门的 AR 滤镜设计师单价甚至可达到 1000 美元到 3 万美元不等。

在 Spark AR Studio 中，你可以将脚本分割为多个文件。当您有大型脚本或想要组织文件时，这可能很有用。

如何分割脚本

您所需要做的就是不断添加脚本文件资源。每个文件将在其独立的作用域内执行，不能与另一个文件共享全局变量。这也意味着脚本控制台（Console）不再能够访问脚本文件中的全局变量。

您可以通过标准的 JavaScript import/export 语法在文件之间共享变量。

导出一个变量

你可以使用以下任何一种:

// in file1.js

// This variable will not be visible in the scripting console
// Other files can't have access to this variable
var localVariable = 10

// To make symbols available to other files or scripting console

// Use export keyword
export function functionName() {}
export class ClassName {}

// Or use module.exports
module.exports = {
functionName,
ClassName
};

// export default syntax is also supported
export default function defaultFunction() {}
            

在其他文件中引用符号

只需使用相对路径引用您想要的文件。所有文件将驻留在同一个文件夹中。

// in file2.js

const {
  functionName,
  ClassName 
} = require("./file1.js");

import defaultFunction, {
  functionName,
  ClassName,
} from "./file1.js";

不需要指定“主”入口文件。构建系统将找到文件之间的任何依赖项，并按顺序执行它们。

脚本控制台

脚本控制台不再能够访问脚本文件中的全局变量。

要访问脚本控制台中的变量，需要从脚本文件中导出该变量。

这对于单个脚本文件是完全支持的。

对于多个脚本文件，只有最后出现在资产树（Asset Tree）中的文件导出的变量才可以从控制台访问。

贴片（Patch）与 JavaScript 的桥接

到贴片编辑器的桥接，与之前一样，桥接变量在所有脚本文件中共享

异常

我们使用源映射（Source maps）将错误消息从生成的脚本文件重新映射到用户编写的原始文件中的原始位置。