资讯专栏INFORMATION COLUMN

基于electron-react-redux的桌面程序制作

ZweiZhao / 3390人阅读

摘要:基于的桌面程序制作本文章将要讲述怎么将,,结合起来,当中的结合很简单,主要是与的结合还有与配合以及热加载的配置有一个我自己做的也许会帮助到你步骤首先我们需要建立一个新的文件夹然后我们初始化一个,将一下代码复制进刚才创建的中

基于electron-react-redux的桌面程序制作

本文章将要讲述怎么将electron,react,redux结合起来,当中react+redux的结合很简单,主要是与electron的结合
还有与webpack配合以及热加载的配置

有一个我自己做的demo也许会帮助到你

步骤

首先我们需要建立一个新的文件夹 mkdir my-electron-react-app && cd my-electron-react-app;

然后我们初始化一个 package.jsonnpm init

将一下代码复制进刚才创建的 package.json

</>复制代码

  1. {
  2. "name": "xxx",
  3. "version": "1.0.0",
  4. "description": "",
  5. "main": "index.js",
  6. "devDependencies": {
  7. "babel": "^5.6.10",
  8. "babel-core": "^5.6.11",
  9. "babel-eslint": "7.1.1",
  10. "babel-loader": "^5.2.2",
  11. "css-loader": "^0.15.1",
  12. "electron": "^1.4.1",
  13. "electron-packager": "^4.1.3",
  14. "electron-rebuild": "^0.2.2",
  15. "less": "^2.5.1",
  16. "less-loader": "^2.2.0",
  17. "node-libs-browser": "^0.5.2",
  18. "prop-types": "^15.5.7",
  19. "style-loader": "^0.12.3",
  20. "webpack": "^1.9.12",
  21. "webpack-dev-server": "^1.9.0"
  22. },
  23. "dependencies": {
  24. "electron-prebuilt": "^0.28.3",
  25. "react": "^15.5.0",
  26. "react-dom": "^15.5.0",
  27. "react-redux": "^4.4.5",
  28. "redux": "^3.5.2"
  29. },
  30. "scripts": {
  31. "test": "npm test",
  32. "start": "./node_modules/electron-prebuilt/dist/Electron.app/Contents/MacOS/Electron .",
  33. "watch": "./node_modules/.bin/webpack-dev-server",
  34. "electron-rebuild": "./node_modules/.bin/electron-rebuild"
  35. },
  36. "author": "xxx",
  37. "license": "ISC"
  38. }

创建一个webpack.config.js 文件

</>复制代码

  1. var webpack = require("webpack");
  2. module.exports = {
  3. entry: {
  4. app: ["webpack/hot/dev-server", "./app/index.js"],
  5. },
  6. output: {
  7. path: "./public/built",
  8. filename: "bundle.js",
  9. publicPath: "http://localhost:8080/built/"
  10. },
  11. devServer: {
  12. contentBase: "./public",
  13. publicPath: "http://localhost:8080/built/"
  14. },
  15. module: {
  16. loaders: [
  17. { test: /.js$/, loader: "babel-loader", exclude: /node_modules/ },
  18. { test: /.css$/, loader: "style-loader!css-loader" },
  19. { test: /.less$/, loader: "style-loader!css-loader!less-loader"}
  20. ]
  21. },
  22. plugins: [
  23. new webpack.HotModuleReplacementPlugin()
  24. ]
  25. }

然后我们需要在根目录创建一个index.js的文件

</>复制代码

  1. var app = require("app");
  2. var BrowserWindow = require("browser-window");
  3. require("crash-reporter").start();
  4. app.on("window-all-closed", function() {
  5. if (process.platform != "darwin") {
  6. app.quit();
  7. }
  8. });
  9. app.on("ready", function() {
  10. mainWindow = new BrowserWindow({width: 900, height: 500});
  11. mainWindow.loadUrl("file://" + __dirname + "/public/index.html");
  12. mainWindow.openDevTools();
  13. mainWindow.on("closed", function() {
  14. mainWindow = null;
  15. });
  16. });

然后我们创建一个public文件夹,在文件夹下创建一个index.html文件

</>复制代码

  1. <span class="hljs-attr">My</span> <span class="hljs-string">Electron app</span>

最后我们需要创建一个app文件夹,然后在app文件夹中创建一个index.js文件

</>复制代码

  1. import "./less/main.less";
  2. import React from "react";
  3. import ReactDOM from "react-dom";
  4. import App from "./App";
  5. import { Provider } from "react-redux";
  6. import configureStore from "./reducers/";
  7. const store = configureStore();
  8. ReactDOM.render(
  9. ,
  10. document.getElementById("root")
  11. );

在这个app文件夹中就是我们的react+redux组合所在的地方,等你将一个简单的react+redux的项目做好之后,就能够在命令窗口输入命令了

</>复制代码

  1. npm install
  2. npm run watch
  3. // 重新打开一个命令窗口之后找到文件夹
  4. npm start

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82443.html

相关文章

  • 基于electron制作一个node压缩图片桌面应用

    摘要:压缩图片桌面应用基于制作一个压缩图片的桌面应用下载地址项目源码准备工作我们来整理一下我们需要做什么压缩图片模块获取文件路径桌面应用生成压缩图片我们需要使用这个库来压缩图片,这里我们把这个库封装成压缩模块。 压缩图片桌面应用imagemin-electron 基于electron制作一个node压缩图片的桌面应用 下载地址:https://github.com/zenoslin/imag...

    bigdevil_s 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<