{"action":"created","issue":{"url":"https://api.github.com/repos/ant-design/ant-design-pro/issues/1874","repository_url":"https://api.github.com/repos/ant-design/ant-design-pro","labels_url":"https://api.github.com/repos/ant-design/ant-design-pro/issues/1874/labels{/name}","comments_url":"https://api.github.com/repos/ant-design/ant-design-pro/issues/1874/comments","events_url":"https://api.github.com/repos/ant-design/ant-design-pro/issues/1874/events","html_url":"https://github.com/ant-design/ant-design-pro/issues/1874","id":342238322,"node_id":"MDU6SXNzdWUzNDIyMzgzMjI=","number":1874,"title":"antd pro 项目内嵌到 electron的简单实践","user":{"login":"yyhuaisha","id":13938131,"node_id":"MDQ6VXNlcjEzOTM4MTMx","avatar_url":"https://avatars2.githubusercontent.com/u/13938131?v=4","gravatar_id":"","url":"https://api.github.com/users/yyhuaisha","html_url":"https://github.com/yyhuaisha","followers_url":"https://api.github.com/users/yyhuaisha/followers","following_url":"https://api.github.com/users/yyhuaisha/following{/other_user}","gists_url":"https://api.github.com/users/yyhuaisha/gists{/gist_id}","starred_url":"https://api.github.com/users/yyhuaisha/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/yyhuaisha/subscriptions","organizations_url":"https://api.github.com/users/yyhuaisha/orgs","repos_url":"https://api.github.com/users/yyhuaisha/repos","events_url":"https://api.github.com/users/yyhuaisha/events{/privacy}","received_events_url":"https://api.github.com/users/yyhuaisha/received_events","type":"User","site_admin":false},"labels":[{"id":734812502,"node_id":"MDU6TGFiZWw3MzQ4MTI1MDI=","url":"https://api.github.com/repos/ant-design/ant-design-pro/labels/%F0%9F%A4%A9Discussion","name":"🤩Discussion","color":"006b75","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-07-18T09:02:32Z","updated_at":"2018-08-02T03:17:09Z","closed_at":null,"author_association":"NONE","body":"最近准备将antd pro的项目迁移到 electron，找了两天资料终于有点头绪。\r\n一、首先你要有一个完整的antd pro的项目，然后进入项目目录安装依赖\r\n\r\n``` python\r\n# 安装依赖包并运行\r\nnpm install -save electron\r\n```\r\n\r\n二、配置 main.js\r\n项目根目录下面新建 main.js 文件\r\n``` python\r\n// 引入electron并创建一个Browserwindow\r\nconst { app, BrowserWindow } = require('electron');\r\nconst path = require('path');\r\nconst url = require('url');\r\n\r\n// 保持window对象的全局引用,避免JavaScript对象被垃圾回收时,窗口被自动关闭.\r\nlet mainWindow;\r\n\r\nfunction createWindow() {\r\n  // 创建浏览器窗口,宽高自定义具体大小你开心就好\r\n  mainWindow = new BrowserWindow({ width: 800, height: 600 });\r\n\r\n  // 加载应用 electron-quick-start中默认的加载入口\r\n  // mainWindow.loadURL(\r\n  //   url.format({\r\n  //     pathname: path.join(__dirname, 'index.html'),\r\n  //     protocol: 'file:',\r\n  //     slashes: true,\r\n  //   })\r\n  // );\r\n\r\n  // 加载应用 适用于 react 项目\r\n  mainWindow.loadURL('http://localhost:8000/');\r\n\r\n  // 打开开发者工具，默认不打开\r\n  // mainWindow.webContents.openDevTools();\r\n\r\n  // 关闭window时触发下列事件.\r\n  mainWindow.on('closed', () => {\r\n    mainWindow = null;\r\n  });\r\n}\r\n\r\n// 当 Electron 完成初始化并准备创建浏览器窗口时调用此方法\r\napp.on('ready', createWindow);\r\n\r\n// 所有窗口关闭时退出应用.\r\napp.on('window-all-closed', () => {\r\n  // macOS中除非用户按下 `Cmd + Q` 显式退出,否则应用与菜单栏始终处于活动状态.\r\n  if (process.platform !== 'darwin') {\r\n    app.quit();\r\n  }\r\n});\r\n\r\napp.on('activate', () => {\r\n  // macOS中点击Dock图标时没有已打开的其余应用窗口时,则通常在应用中重建一个窗口\r\n  if (mainWindow === null) {\r\n    createWindow();\r\n  }\r\n});\r\n\r\n// 你可以在这个脚本中续写或者使用require引入独立的js文件.\r\n\r\n```\r\n\r\n要注意“加载应用”这里你的端口号要一致。\r\n\r\n\r\n三、配置你的 package.json ，添加以下项\r\n\r\n``` python\r\n{\r\n  \"main\": \"main.js\", // 配置启动文件\r\n  \"dependencies\": {\r\n    \"electron\": \"^2.0.5\"\r\n  },\r\n  \"scripts\": {\r\n    \"electron-start\": \"electron .\" // 配置electron的start，区别于web端的start\r\n  }\r\n}\r\n```\r\n注意根据你自己原本的项目的基础上来配置。\r\n\r\n\r\n四、还有重要的一点需要修改webpack\r\n在antd pro我修改的是  .babelrc.js，添加 target: 'electron-renderer'。\r\n\r\n以下是我的 .babelrc.js 配置\r\n\r\n``` python\r\nmodule.exports = {\r\n  target: 'electron-renderer',\r\n  plugins: [\r\n    [\r\n      'babel-plugin-module-resolver',\r\n      {\r\n        alias: {\r\n          components: './src/components',\r\n        },\r\n      },\r\n    ],\r\n  ],\r\n};\r\n```\r\n\r\n注意根据你自己原本的项目的基础上来配置。\r\n\r\n\r\n五、启动\r\n\r\n``` python\r\n# 启动react项目\r\nnpm start\r\n\r\n# 启动electron\r\nnpm run electron-start\r\n```\r\n\r\n以上内容参考自 [https://juejin.im/post/5a6a91276fb9a01cbd58ce32](https://juejin.im/post/5a6a91276fb9a01cbd58ce32) \r\n\r\n欢迎关注我这个前端小菜的博客[一叶怀沙](http://yyhuaisha.github.io/)\r\n\r\n后续还会更新关于打包的部分。"},"comment":{"url":"https://api.github.com/repos/ant-design/ant-design-pro/issues/comments/409792662","html_url":"https://github.com/ant-design/ant-design-pro/issues/1874#issuecomment-409792662","issue_url":"https://api.github.com/repos/ant-design/ant-design-pro/issues/1874","id":409792662,"node_id":"MDEyOklzc3VlQ29tbWVudDQwOTc5MjY2Mg==","user":{"login":"yyhuaisha","id":13938131,"node_id":"MDQ6VXNlcjEzOTM4MTMx","avatar_url":"https://avatars2.githubusercontent.com/u/13938131?v=4","gravatar_id":"","url":"https://api.github.com/users/yyhuaisha","html_url":"https://github.com/yyhuaisha","followers_url":"https://api.github.com/users/yyhuaisha/followers","following_url":"https://api.github.com/users/yyhuaisha/following{/other_user}","gists_url":"https://api.github.com/users/yyhuaisha/gists{/gist_id}","starred_url":"https://api.github.com/users/yyhuaisha/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/yyhuaisha/subscriptions","organizations_url":"https://api.github.com/users/yyhuaisha/orgs","repos_url":"https://api.github.com/users/yyhuaisha/repos","events_url":"https://api.github.com/users/yyhuaisha/events{/privacy}","received_events_url":"https://api.github.com/users/yyhuaisha/received_events","type":"User","site_admin":false},"created_at":"2018-08-02T03:17:09Z","updated_at":"2018-08-02T03:17:09Z","author_association":"NONE","body":"[从antd-pro 迁移到 electron（2.打包篇）](https://zhuanlan.zhihu.com/p/41103887)"}}
{"actor":{"display_login":"yyhuaisha"}}