preload.js

当你在 plugin.json 中配置了 preload 属性，将载入对应的预加载脚本。

在传统的 web 开发中，所有的 javascript 脚本都在浏览器沙盒中运行，权限被严格限制，所能实现的功能非常有限。

通过 preload.js 能够帮你突破沙盒限制，进入一个崭新的 JavaScript 世界。

preload.js 是一个特殊且单独的文件，不需要与其他业务代码编译在一起，在此文件中可以访问 nodejs、electron、uTools 提供的 api，并挂载到 window 对象中，你其他的普通 javascript 代码就可以访问这些 api。

 // 开发者可以暴露自定义 API 供后加载脚本使用

// preload.js 中使用 nodejs
const { readFileSync } = require('fs')

window.readConfig = function () {
  const data = readFileSync('./config.json')
  return data
}	


// index.html 后加载的内容可以使用 window.readConfig() 方法，但不能使用 Node.js 特性
console.log(window.readConfig()) // 正常执行
console.log(readFileSync('./config.json')) // 报错

通过这种机制可以获得强大的底层能力，配合 html、css 丰富的表现力，完全可以按你理想中的样子去设计程序。

但是，更强大的能力如果不受约束就会伴随着更大风险，在使用预加载脚本时，应该时刻注意只提供必要且最小权限的 api 供后加载脚本使用。

（如果你想把插件应用提交到 utools 插件应用市场供其他用户下载使用，preload.js 必须是明文代码，且精简清晰可读）

如何使用nodejs的api

编写preload.js 并使用CommonJs的方式引入nodejs的api

例如：使用nodejs读取本地文件

function readFileAsync(filePath, encoding) {  
  return new Promise((resolve, reject) => {  
    require('fs').readFile(filePath, encoding, (error, data) => {  
      if (error) {  
        reject(error);  
      } else {  
        resolve(data);  
      }  
    });  
  });  
}  

window.services = {
  readFile: (inputPath, encoding = 'utf8') => {
    return readFileAsync(inputPath, encoding)
  }
}

渲染器进程通过调用挂载的方法：window.services.readFile 获得了浏览器沙盒之外的文件读取能力

获取更多nodejs的能力请查阅: nodejs官方API文档

如何使用第三方库

通过源码方式使用第三方库

第三方库引入

下载第三方库源码并复制到项目的/public目录下

例如: 邮件发送库 nodemailer: https://github.com/nodemailer/nodemailer

cd public && git clone https://github.com/nodemailer/nodemailer

第三方库使用

编写preload.js 并使用CommonJs的方式引入

const nodemailer = require('./nodemailer')


const _setImmediate = setImmediate
process.once('loaded', function() {
  global.setImmediate = _setImmediate
})

const sendMail = ()  => {
  let transporter = require('./nodemailer') .createTransport({
      host: 'smtp.qq.com',
      port: 465,
      secure: true, 
      auth: {
        user: 'aaa@qq.com',
        pass: 'xxx' 
      }
    });

  
  let mailOptions = {
    from: 'aaa@qq.com',
    to: 'bbb@gmail.com',
    subject: 'Sending Email using Node.js',
    text: 'That was easy!'
  };
  
  transporter.sendMail(mailOptions, function(error, info){
    if (error) {
      console.log(error);
    } else {
      console.log('Email sent: ' + info.response);
    }
  });
}

window.services = {
  sendMail: () => {
    return sendMail()
  }
}

渲染器进程通过调用挂载的方法：window.services.sendMail获得了第三方库的能力

如何使用electron的api

编写preload.js 并使用CommonJs的方式引入electron的api

获取更多electron的能力请查阅: electron官方API文档