typescript - 在 Electron 的预加载脚本中使用 typescript

Question

我使用 electron-forge 的 react-typescript 模板构建了一个 Electron 应用程序，这意味着它使用 electron-prebuilt-compile，根据 the only documentation I can find应该只是工作。

index.html 包含可以正常工作的 typescript ，正如所宣传的那样。但我也在使用 webview tag使用预加载脚本，以显示外部网站并对其进行修改。这是我正在使用的代码:

<webview id="webview" preload="./preload.ts" webpreferences="contextIsolation, webSecurity=no" src="https://example.com"></webview>

这个预加载脚本相当复杂，我很想为此使用 typescript。但它显然被解析为 javascript，任何类型的注释都会导致语法错误。有没有技巧可以使用 typescript 进行这项工作？如果我必须手动调用转译器，如何将其与 Electron 锻造的构建过程集成？

tl;博士 :尽管 typescript 在其他地方“正常工作”，但预加载脚本被解析为 javascript，我也想在这里使用 typescript

Answer 1

您可以在预加载文件(或任何文件)中使用 TypeScript。只需导入 ts-node 在导入任何 TypeScript 代码之前对其进行打包和配置。

例如，制作 index.js文件包含:

require('./require-hooks')
module.exports = require('./entry') // this is your TypeScript entry point.

然后在你的 require-hooks.js文件配置 ts-node(ts-node 是一个实时编译 TypeScript 的 require 钩子(Hook)，并为后续运行提供缓存):

// ability to require/import TypeScript files
require('ts-node').register({
  typeCheck: false, // faster, no type checking when require'ing files. Use another process to do actual type checking.
  transpileOnly: true, // no type checking, just strip types and output JS.
  files: true,

  // manually supply our own compilerOptions, otherwise if we run this file
  // from another project's location then ts-node will use
  // the compilerOptions from that other location, which may not work.
  compilerOptions: require('./tsconfig.json').compilerOptions,
})

请注意，您可以在其中放置各种 require 钩子(Hook)，例如，您可以执行 require('path/to/file.ts') 之类的操作。 , require('path/to/file.tsx') , require('path/to/file.jsx') , require('path/to/file.png') , require('path/to/file.mp3')等，您可以在其中定义用于处理某些类型文件的 Hook (在某些方面类似于 Webpack，但 Hook 到 Node 的内置 require 函数)。例如， @babel/register 是通过 Babel 运行 JS 文件的钩子(Hook)， asset-require-hook 是一个要求 Hook ，允许您导入 Assets ，如 JPG 文件， yaml-hook 让您 require .yaml文件。编辑:更多: css-modules-require-hook 用于导入 CSS 模块和 module-alias 用于创建别名，如使用 WebPack。

pirates lib 是一个流行的工具，用于制作自己的 require 钩子(Hook)，尽管我也发现在没有库的情况下手动制作钩子(Hook)很容易。例如，您可以覆盖 Module.prototype.require实现一些简单的钩子(Hook):

const path = require('path')
const url = require('url')
const Module = require('module')
const oldRequire = Module.prototype.require

function toFileURL(filePath) {
  return url.format({
    pathname: filePath,
    protocol: 'file:',
    slashes: true,
  })
}

Module.prototype.require = function(moduleIdentifier) {
  // this simple hook returns a `file://...` URL when you try to `require()`
  // a file with extension obj, svg, png, or jpg.
  if (['.obj', '.png', '.svg', '.jpg'].some(ext => moduleIdentifier.endsWith(ext))) {
    const result = String(toFileURL(path.resolve(path.dirname(this.filename), moduleIdentifier)))

    result.default = result
    return result
  } else {
    return oldRequire.call(this, moduleIdentifier)
  }
}

然后在其他文件中，

const fs = require('fs')
const img = require('path/to/foo.jpg')

console.log(img) // file:///absolute/path/to/foo.jpg
document.createElement('img').src = img

您甚至可以将电话移至 document.createElement('img').src = img进入您的覆盖 require方法自动执行并返回 img元素而不是返回 file://网址。 :)

最后，在您的 ./entry.ts以上文件 index.js文件导入，你可以在那里有任何 TypeScript。