如何在Electron上使用具有TypeScript类型支持的require内部函数或条件

Question

在电子性能文档中，称为：

在传统的Node.js开发中，我们习惯于将所有的require()语句放在首位。如果您目前正在使用相同的策略编写Electron应用程序，并且正在使用不立即需要的大型模块，请应用相同的策略并将加载推迟到更合适的时间。

因此它建议分配资源"及时"；在需要的时候调用CCD_ 2。问题是我正在尝试使用electron-react-boilerplate，而TypeScript似乎不太支持这种代码。这里有一个例子：

src/main.dev.ts:

if (
process.env.NODE_ENV === 'development' ||
process.env.DEBUG_PROD === 'true'
) {
require('electron-debug')({ showDevTools: false });
}

它有一个ESLint错误">对任何类型值的不安全调用。esint(@typescript-eslint/no-unsafe-call("；在require('electron-debug')中，即使此库已定义类型。

但如果用import替换它，它就不会出现错误：

import electronDebug from 'electron-debug'; // at the top of the file
if (
process.env.NODE_ENV === 'development' ||
process.env.DEBUG_PROD === 'true'
) {
electronDebug({ showDevTools: false });
}

那么，在有类型支持的情况下，我如何使用require呢？

我读到这个答案说要使用CCD_ 9导入声明只能在命名空间或模块中使用。ts(1232("；如果我在CCD_ 10或函数中使用它。

Answer 1

我们可以使用异步import()来解决这个问题：

if (
process.env.NODE_ENV === 'development' ||
process.env.DEBUG_PROD === 'true'
) {
import('electron-debug').then(electronDebug =>
electronDebug.default({ showDevTools: false }),
);
}

请注意，对于CommonJS，它将被转换为require(在此处阅读更多信息(，因此我们可以假设它仍然使用Electron文档中提到的require缓存。

---

将这种方法与electron-react-boilerplate一起使用可能会在yarn package上创建额外的文件，如252.main.prod.js，这将在尝试执行程序时导致错误(错误：找不到模块'../../src/252.main.prod.js'(。为了避免这种情况，您需要告诉Webpack忽略它，如下所示：

之前：

const sourceMapSupport = require('source-map-support');
sourceMapSupport.install();

之后：

import(/* webpackIgnore: true */ 'source-map-support')
.then((sourceMapSupport) => sourceMapSupport.install())
.catch(console.error);