Skip to content

认识 preload ​

当你在 plugin.json 文件配置了 preload 字段,指定的 js 文件将被预加载,该 js 文件可以调用 Node.js API 的本地原生能力和 Electron 渲染进程 API。

为什么需要 preload ​

在传统的 web 开发中,为了保持用户运行环境的安全,JavaScript 被做了很强的沙箱限制,比如不能访问本地文件,不能访问跨域网络资源,不能访问本地存储等。

ZTools 基于 Electron 构建,通过 preload 机制,在渲染线程中,释放了沙箱限制,使得用户可以通过调用 Node.js 的 API 来访问本地文件、跨域网络资源、本地存储等。

preload 的定义 ​

preload 是完全独立于前端项目的一个特殊文件,它应当与 plugin.json 位于同一目录或其子目录下,保证可以在打包插件应用时可以被一起打包。

preload js 文件遵循 CommonJS 规范,因此你可以使用 require 来引入 Node.js 模块,此部分可以参考 Node.js 文档。

前端使用 preload ​

只需给 window 对象自定义一个属性,前端就可直接访问该属性。

preload.js

javascript
const fs = require("fs");

window.customApis = {
  readFile: (path) => {
    return fs.readFileSync(path, "utf8");
  },
};

preload js 规范 ​

由于 preload js 文件可使用本地原生能力,为了防止开发者滥用各种读写文件、网络等能力,ZTools 规定:

  • preload js 文件代码不能进行打包/压缩/混淆等操作,要保证每一行代码清晰可读。
  • 引入的第三方模块也必须清晰可读,在提交时将源码一同提交,同样不允许压缩/混淆。