用電子鍛造構建安全的桌面應用程序並進行反應

>本文展示了使用電子和React構建簡單，安全的文本編輯器桌面應用程序，並利用電子偽造來進行簡化的開發和安全性。 該應用程序稱為“ scratchpad”，在您輸入時，自動衛隊會更改，從而反映了fromScratch的功能。 我們將重點介紹整個安全的編碼實踐。

密鑰概念：

• 電子偽造：一種用於創建，發布和安裝現代電子應用程序的綜合工具，提供了安全有效的開發環境。 >主要與渲染器過程：電子應用程序由管理OS交互和窗口創建的主過程（Node.js）組成，以及渲染器過程（Chromium）處理UI渲染。
• 反應集成：我們將集成在渲染器過程中，以獲得平穩的開發體驗。
• codemirror：一個功能強大的文本編輯器組件增強用戶界面並提供實時更新。
>
• 安全文件處理：>我們將使用電子的主和渲染器流程以及預緊腳本來安全地保存和加載磁盤的內容。 >
>
• >防止白色閃光燈：窗口設置將進行調整以消除應用程序啟動時的初始白色閃光燈。
• 包裝和分佈：電子鍛造簡化了包裝和分發應用程序在各種操作系統上的過程。
開發設置：
• 本教程假設Node.js和Git已安裝。 我們將使用帶有WebPack模板的Electron Forge進行有效的反應集成。 該項目的初始化：

這將創建項目結構，包括>，，

，以及包含初始html，css和javascript文件的目錄。

>

npx create-electron-app scratchpad --template=webpack

添加react：

webpack.main.config.js webpack.renderer.config.js安裝必要的依賴項：webpack.rules.js src

>配置WebPack通過將Babel Loader添加到

>來支持JSX：>

>如原始文章所述，通過替換

並創建

來測試反應集成。 運行

npm install --save-dev @babel/core @babel/preset-react babel-loader
npm install --save react react-dom

應顯示“來自電子中的react！”。

> webpack.rules.js

構建刮擦：

module.exports = [
  // ...
  {
    test: /\.jsx?$/,
    use: {
      loader: 'babel-loader',
      options: {
        exclude: /node_modules/,
        presets: ['@babel/preset-react']
      }
    }
  },
  // ...
];

src/renderer.js>安裝codemirror和react-dodemirror：>

npx create-electron-app scratchpad --template=webpack

>將必要的CSS導入到src/renderer.js>中，並在原始文章中詳細介紹的使用CodeMirror，處理更新和样式中的ScratchPad組件。 調整src/app.jsx和index.html以刪除不必要的元素並改善樣式。 index.css>

安全磁盤節省和加載：>

>使用

添加文件系統處理（）。 創建main.js和fs函數以讀取並寫入應用程序數據目錄（loadContent）中的文件。 saveContent> app.getPath('userData')>在新創建的

文件中使用

和ipcMain在新創建的main.js文件中使用ipcRenderer實現preload.js>，以安全地處理主和渲染器進程之間的通信。 preload.js腳本充當安全的橋樑，僅將必要的功能暴露給渲染器。

>修改用於保存的ScratchPad組件和window.scratchpad.saveContent（使用window.scratchpad.content）加載初始內容。將ipcRenderer.invoke呼叫包裝在異步函數中，以處理ReactDOM.render> window.scratchpad.content返回的承諾

優化加載和建築物：>

set

inshow: false創建並添加BrowserWindowready-to-show事件偵聽器以改善加載體驗，以防止初始的白色閃光燈。 刪除mainWindow.webContents.openDevTools()。

最後，使用npm run make構建並包裝應用程序。 Electron Forge將為您的操作系統生成安裝程序。

這種修訂後的響應提供了對原始文章的更簡潔，有組織的解釋，維護了核心功能和安全性方面，同時提高了可讀性和清晰度。 關鍵改進包括更清晰的截面標題，改進的格式以及對IPC機制的更簡化的說明和安全文件處理。

以上是用電子鍛造構建安全的桌面應用程序並進行反應的詳細內容。更多資訊請關注PHP中文網其他相關文章！