Figma插件开发：如何用JavaScript读取插件目录下的本地文件？

你在开发Figma插件时遇到的问题很典型——Figma插件的运行环境和普通网页JS不同，不能直接用浏览器的File构造函数读取本地文件，也不需要用<input type='file'/>这种网页端的文件选择方式。要读取插件目录内的文件，得用Figma插件环境支持的方法：

步骤1：确保文件被包含在插件包中 #

首先要在插件的manifest.json里，把需要读取的文件（比如folder/File.xml）添加到files字段中，这样Figma打包插件时会把这个文件一起包含进去：

{
  "name": "你的插件名称",
  "id": "插件ID",
  "api": "1.0.0",
  "main": "code.js",
  "files": [
    "folder/File.xml"
  ]
}

步骤2：用fetch读取插件内的文件 #

Figma插件环境支持标准的fetch API，可以直接通过相对路径读取插件包内的文件，示例代码如下：

async function readPluginFile(filePath: string): Promise<string> {
  const response = await fetch(filePath);
  if (!response.ok) {
    throw new Error(`无法读取文件：${filePath}，状态码：${response.status}`);
  }
  return await response.text();
}

// 调用示例
readPluginFile("folder/File.xml")
  .then(content => {
    console.log("文件内容：", content);
  })
  .catch(err => {
    console.error("读取文件出错：", err);
  });

为什么原来的代码不行？ #

你参考Java写的new File("folder/File.xml")在JS里完全不适用：

• 浏览器/Figma插件环境中的File构造函数，是用来在内存中创建新的文件对象，不是读取本地磁盘上的现有文件。
• Figma插件运行在沙箱中，没有直接访问本地文件系统的权限，但可以访问插件自身包内的资源文件，这时候fetch是官方推荐的方式。

内容的提问来源于stack exchange，提问作者Ed Ipser