Я пытаюсь создать приложение, используя Electron, React и TypeScript (и моя идея сейчас кажется мне кошмаром). Я использую готовый компилятор для переноса моего кода.
Мое намерение состоит в том, чтобы сохранить nodeIntegration как false Однако, если я это сделаю, это покажет мне ошибку:
Uncaught ReferenceError: требование не определено
в index.html: inline_0.js: 2
Я попытался добавить несколько предустановок Babel, но они не помогают мне. Я также добавил пресет CommonJS. Но все равно не получается.
Причина, по которой стоит оставить false для nodeIntegration, заключается в том, что я не хочу, чтобы он был доступен в renderer.js из-за угроз безопасности, которые он несет с собой.
//. Compilerc
"env": {
"development": {
"application/javascript": {
"presets": [
[
"env",
{
"targets": {
"electron": "4.1.3"
}
}
],
"react",
"es2016-node5"
],
"plugins": [
"react-hot-loader/babel",
"dynamic-import-node",
["transform-es2015-modules-commonjs", {
"allowTopLevelThis": true
}],
"transform-async-to-generator",
"transform-es2015-modules-commonjs"
],
"sourceMaps": "inline"
},
"text/html": {
"pretty": true
}
},
// package.json
{
"name": "master-dashboard",
"version": "1.0.0",
"description": "Master Dashboard",
"main": "app/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron .",
"postinstall": "electron-rebuild"
},
"keywords": [
],
"author": "Kaustav Sarkar",
"license": "MIT",
"dependencies": {
"electron": "^4.1.3",
"electron-compile": "^6.4.4",
"react": "^16.8.6",
"react-dom": "^16.8.6"
},
"devDependencies": {
"babel-plugin-dynamic-import-node": "^2.2.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"electron-prebuilt-compile": "^4.0.0",
"electron-rebuild": "^1.8.4",
"react-hot-loader": "^4.8.2"
}
}
// index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="index.css">
</head>
<body>
<div id="master"></div>
</body>
<script type="application/javascript">
require('./renderers/renderer')
</script>
</html>
// index.js gist
const createWindow = () => {
win = new BrowserWindow({
center: true,
resizable: true,
webPreferences: {
nodeIntegrationInWorker: false,
nodeIntegration: false,
show: false
}
});
win.maximize();
win.webContents.openDevTools();
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
slashes: true,
protocol: 'file'
}), { "extraHeaders": "Cache-Control: no-cache\n" });