介紹

Electron React Boilerplate是Github上超過(guò)12k+star的可擴(kuò)展跨平臺(tái)應(yīng)用程序開(kāi)發(fā)框架，Electron 是基于HTML+CSS+Javascript等 Web 技術(shù)創(chuàng)建原生程序的框架，它已經(jīng)幫我們搞定了最難搞的部分，而Electron React Boilerplate在其基礎(chǔ)上進(jìn)行了擴(kuò)展，將React集成進(jìn)去并構(gòu)建成了模板。

文檔和Github地址

• 文檔：

https://electron-react-boilerplate.js.org/docs/installation

• Github

https://github.com/electron-react-boilerplate/electron-react-boilerplate

特點(diǎn)

• 熱加載

顧名思義，實(shí)時(shí)預(yù)覽功能

• 可擴(kuò)展

構(gòu)建沒(méi)有類型的可擴(kuò)展應(yīng)用程序只能做到這一步。開(kāi)發(fā)應(yīng)用程序時(shí)出現(xiàn)類型錯(cuò)誤。在編譯時(shí)和運(yùn)行時(shí)引發(fā)錯(cuò)誤

• 性能：構(gòu)建優(yōu)化

開(kāi)箱即用的webpack優(yōu)化和壓縮代碼解決方案，這避免了與傳統(tǒng)Electron 應(yīng)用程序相關(guān)的性能瓶頸。

• 項(xiàng)目使用到的工具

Electron

React, Redux, React Router,

Webpack

React Hot Loader

快速入門

測(cè)試環(huán)境：Windows 10 V1903

# 從Github快速克隆:

git clone --depth=1 https://github.com/electron-react-boilerplate/electron-react-boilerplate.git your-project-name

#命令行到項(xiàng)目目錄

cd your-project-name

# yarn安裝依賴

yarn

---

#運(yùn)行

yarn dev

運(yùn)行成功

我這里中途并未出現(xiàn)過(guò)什么錯(cuò)誤，如果你在搭建過(guò)程中出現(xiàn)了什么錯(cuò)誤，可以參考官網(wǎng)的安裝調(diào)試指南。

#構(gòu)建

yarn build

#打包

要打包本地平臺(tái)的應(yīng)用程序：

yarn package

構(gòu)建多個(gè)平臺(tái)請(qǐng)參考官方指南，設(shè)計(jì)一些依賴

yarn package-all

構(gòu)建可選平臺(tái) yarn package --[option]

yarn package --win //windowsyarn package --mac //macyarn package --linux //linux

---

編輯器配置

建議使用VSCode安裝以下擴(kuò)展，只為了讓你有更好的體驗(yàn)，以及提高編碼效率

• Editorconfig
• ESLint
• Prettier
• Flow
• Babel
• Jest
• ES6 Snippets
• React Snippets

項(xiàng)目目錄

項(xiàng)目的目錄和開(kāi)發(fā)基本的React應(yīng)用相差不大

總結(jié)

有了Electron React Boilerplate可以省去我們很多基礎(chǔ)工作的時(shí)間，對(duì)于熟悉React的人來(lái)說(shuō)尤為友好！

總結(jié)

以上是生活随笔為你收集整理的electron开发_基于Electron+React的跨平台应用程序基础开发框架的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。