认识preload.js

提示

当你在plugin.json 中配置了preload字段时，preload.js文件会自动被加载。

为什么需要preload.js

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

uTools 基于 Electron 构建，通过 preload 机制，在渲染线程中，释放了一些沙箱限制，使得用户可以通过调用 nodejs 的 API 来访问本地文件、网络、本地存储等。

preload.js 的定义

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

preload.js 为 commonjs 模块，因此你可以使用 require 来导入外部模块，此部分可以参考 Node.js 文档。

使用 nodejs api

请查看 nodejs api

使用 preload.js

uTools 为 preload.js 提供了一个与前端渲染线程通信的快捷对象，window，你只需要给 window 添加一个自定义属性，就可以在渲染线程直接访问该属性对应的值。

preload.js

const fs = require("fs");

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

App.jsx

import { useEffect, useState } from "react";
export default function App() {
  const [file, setFile] = useState("");
  useEffect(() => {
    window.customApis.readFile("./README.md").then((data) => {
      setFile(data);
    }
  }, []);

  return (
    <div>
      <pre>{file}</pre>
    <div>
  )
}

模板插件应用

在 preload.js 中，保留了一个特殊的属性 exports，当你的插件应用被识别成 模板插件应用 时，该属性将被作为模板插件应用运行时的入口。

模板插件应用详情请查看 模板插件应用

关于何时会被识别成模板插件应用，请查看 使你的插件应用成为模板插件应用

preload.js 的规范

由于 preload.js 内部可以调用很多系统 API，为了防止开发者滥用各种读写文件、网络等 API，uTools 规定：

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