关于前端:翻译-JavaScript-Everywhere第19章-将现有的Web应用程序与Electron集成

翻译 |《JavaScript Everywhere》第 19 章将现有的 Web 应用程序与 Electron 集成

大家好呀，我是毛小悠，是一位前端开发工程师。正在翻译一本英文技术书籍。

为了进步大家的浏览体验，对语句的构造和内容略有调整。如果发现本文中有存在瑕疵的中央，或者你有任何意见或者倡议，能够在评论区留言，或者加我的微信：code_maomao，欢送互相沟通交流学习。

(σﾟ∀ﾟ)σ..:*☆哎哟不错哦

我喜爱收集浏览器书签，就像一个小孩在沙滩上收集贝壳一样。我不是肯定要收集它们，然而到一天完结时，我曾经在几个浏览器窗口中关上了许多选项卡。我并不是夸耀，但我狐疑应该不止我一个人是这样。所以，我应用了一些最罕用的 Web 应用程序的桌面版本。通常，这些应用程序比照网页版并没有什么劣势，然而独立应用程序的便利性使它们全天易于拜访、查找和切换。

在本章中，咱们将钻研如何获取现有的 Web 应用程序并将其包装在 Electron Shell 中。在持续之前，你将须要装置示例 API 和Web应用程序的本地正本。如果你还没有浏览整本书，请拜访附录 A 和附录 B 进行操作。

在上一章中，咱们设置了 Electron 应用程序加载 index.html 文件。咱们也能够加载特定的 URL。在本例中，咱们将从加载本地运行的Web 应用程序的 URL 开始。首先，请确保你的 Web 应用程序和 API 在本地运行。而后咱们能够更新 src/index.js 文件，首先将 BrowserWindow 中的 nodeIntegration 设置为false。这将防止本地运行的节点应用程序拜访内部站点的平安危险。

webPreferences: {nodeIntegration: false},

当初，更改window.loadFile(‘index.html‘);，如下：

window.loadURL('http://localhost:1234');

你的 Web 应用程序的本地实例将须要在 1234 端口上运行。如果你始终在浏览本书，请从 Web 应用程序目录的根目录运行 npm start 来启动开发服务器。

这将批示 Electron 加载 URL，而不是文件。当初，如果你应用npm start 运行该应用程序，你会看到它已加载到 Electron 窗口中，但有一些正告。

正告和谬误

Electron浏览器开发者工具和咱们的终端显示了大量正告和谬误。让咱们看一下其中的每一个（见图19-1）。

图19-1。咱们的应用程序正在运行，但显示大量谬误和正告。

首先，咱们的终端显示了大量 SyntaxError：Unexpected Token errors. 此外，咱们的开发者工具会显示几个相应的正告，指出 DevTools 无奈解析 SourceMap。这两个谬误与Parcel 生成 source map 和Electron读取 source map 的形式无关。可怜的是，联合咱们正在应用的技术，仿佛没有针对此问题的正当解决方案。最好的抉择是禁用 JavaScript 源映射。在应用程序窗口的开发人员工具中，单击“设置”，而后勾销选中“启用 JavaScript 源映射”（请参见图19-2）。

图19-2。禁用源映射将缩小谬误和正告的数量

当初，如果退出并重新启动应用程序，将不再看到与源地图无关的问题。这样做的代价是，在 Electron 内调试客户端 JavaScript 可能会更加艰难，然而值得庆幸的是，咱们依然能够在 Web 浏览器中拜访此性能和咱们的应用程序。

最初两个正告与 Electron 的安全性无关。在将生产应用程序捆绑在一起之前，咱们将解决这些问题，然而当初值得探讨这些正告是什么。

Electron Security Warning (Insecure Resources)电子平安正告（资源不平安）

此正告告诉咱们，咱们正在通过 http 连贯加载 Web 资源。在生产中，咱们应始终通过 https 加载资源，以确保隐衷和平安。在开发中，通过 http 加载本地主机不是问题，因为咱们将援用托管网站，该网站在捆绑的应用程序中应用https。

Electron Security Warning (Insecure Content-Security-Policy)电子平安正告（不平安的内容安全策略）

此正告告诉咱们咱们尚未设置内容安全策略（CSP）。CSP容许咱们指定容许咱们的应用程序从哪个域加载资源，从而大大降低了跨站点脚本（XSS）攻打的危险。同样，在本地开发期间这不是问题，但在生产中很重要。咱们将在本章稍后局部应用CSP。

解决了咱们的谬误后，咱们就能够设置应用程序的配置文件了。

在本地进行开发时，咱们心愿可能运行 Web 应用程序的本地版本，然而在将应用程序捆绑以供其他人应用时，咱们心愿它援用公共可用的URL。咱们能够设置一个简略的配置文件来解决此问题。

在咱们的 ./ src目录，咱们将增加一个 config.js文件，咱们能够在其中存储特定于应用程序的属性。我已蕴含一个配置模板。你可用于从终端轻松复制它：

cp src/config.example.js src/config.js

当初咱们能够填写应用程序的属性：

const config = {
LOCAL_WEB_URL: 'http://localhost:1234/',
PRODUCTION_WEB_URL: 'https://YOUR_DEPLOYED_WEB_APP_URL',
PRODUCTION_API_URL: 'https://YOUR_DEPLOYED_API_URL'
};
module.exports = config;

在以前的环境中，咱们应用.env文件来治理特定于环境的设置。在这种状况下，因为 Electron 应用程序捆绑其依赖项的形式，咱们应用了 JavaScript 配置文件。

当初在 Electron 应用程序的次要过程中，咱们能够应用配置文件来指定咱们要在开发和生产中加载的 URL。在src/index.js，首先导入config.js 文件：

const config = require('./config');

当初，咱们能够更新 loadURL 性能认为每种环境加载不同的URL：

// load the URL
if (is.development) {window.loadURL(config.LOCAL_WEB_URL);
} else {window.loadURL(config.PRODUCTION_WEB_URL);
}

通过应用配置文件，咱们能够轻松地为 Electron 提供特定于环境的设置。

如本章后面所述，CSP容许咱们限度应用程序是否有权从中加载资源的域名。这有助于限度潜在的 XSS 和数据注入攻打。在 Electron 中，咱们能够指定 CSP 设置来帮忙进步应用程序的安全性。要理解无关电子和 Web 应用程序的 CSP 的更多信息，我倡议你无关该主题的 MDN 文章。

Electron提供了用于 CSP 的内置 API，然而electronic-util 库提供了更简略，更简洁的语法。在咱们的 src/index.js 的顶部，更新 electronic-util 导入语句以蕴含setContentSecurityPolicy：

const {is, setContentSecurityPolicy} = require('electron-util');

当初，咱们能够为应用程序的生产版本设置CSP：

// set the CSP in production mode
if (!is.development) {
setContentSecurityPolicy(`
default-src 'none';
script-src 'self';
img-src 'self' https://www.gravatar.com;
style-src 'self' 'unsafe-inline';
font-src 'self';
connect-src 'self' ${config.PRODUCTION_API_URL};
base-uri 'none';
form-action 'none';
frame-ancestors 'none';
`);
}

通过编写 CSP，咱们能够应用CSP 评估程序工具查看谬误。如果咱们无意通过其余 URL 拜访资源，则能够将其增加到 CSP 规定集中。

咱们最终的 src/index.js 文件的内容如下：

const {app, BrowserWindow} = require('electron');
const {is, setContentSecurityPolicy} = require('electron-util');
const config = require('./config');
// to avoid garbage collection, declare the window as a variable
let window;
// specify the details of the browser window
function createWindow() {
window = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {nodeIntegration: false}
});
// load the URL
if (is.development) {window.loadURL(config.LOCAL_WEB_URL);
} else {window.loadURL(config.PRODUCTION_WEB_URL);
}
// if in development mode, open the browser dev tools
if (is.development) {window.webContents.openDevTools();
}
// set the CSP in production mode
if (!is.development) {
setContentSecurityPolicy(` default-src 'none';
script-src 'self';
img-src 'self' https://www.gravatar.com;
style-src 'self' 'unsafe-inline';
font-src 'self';
connect-src 'self' ${config.PRODUCTION_API_URL};
base-uri 'none';
form-action 'none';
frame-ancestors 'none'; `);
}
// when the window is closed, dereference the window object
window.on('closed', () => {window = null;});
}
// when electron is ready, create the application window
app.on('ready', createWindow);
// quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS only quit when a user explicitly quits the application
if (process.platform !== 'darwin') {app.quit();
}
});
app.on('activate', () => {
// on macOS, re-create the window when the icon is clicked in the dock
if (window === null) {createWindow();
}
});

这样，咱们就能够在 Electron Shell 中运行 Web 应用程序（如图 19-3 所示）。

图 19-3。咱们在Electron 应用程序 shell 中运行的 Web 应用程序

在本章中，咱们将现有的 Web 应用程序集成到 Electron 桌面应用程序中，这使咱们可能疾速将桌面应用程序推向市场。值得注意的是，这种办法须要衡量取舍，因为它提供了特定于桌面的劣势，并且须要 Internet 连贯能力拜访应用程序的全副性能。对于心愿将台式机应用程序推向市场的咱们来说，这些毛病可能值得。在下一章中，咱们将钻研如何构建和散发 Electron 应用程序。

如果有了解不到位的中央，欢送大家纠错。如果感觉还能够，麻烦您点赞珍藏或者分享一下，心愿能够帮到更多人。

关于前端:翻译-JavaScript-Everywhere第19章-将现有的Web应用程序与Electron集成

写在最后面

第 19 章将现有的 Web 应用程序与 Electron 集成

集成咱们的 Web 应用程序

运行 Web 应用程序

配置

为什么不应用.env？

内容平安政策

论断