简体繁体 English

与webpack的电子建设者

[英]Electron-builder with webpack

原文 2017-08-02 14:04:23 4 2 javascript/ webpack/ electron/ electron-builder

tl,dr: TL博士：

Here's what I got: 这是我得到的：

Electron 电子
React 应对
Webpack 的WebPack
electron-builder 电子制造商
electron-edge 电子边缘
node-fibers 节点纤维
some static assets (.png, .svg etc.) 一些静态资产（.png，.svg等）

Here's what I want: 这就是我想要的：

A crossplatform autoupdating installer for the software 该软件的跨平台自动更新安装程序

The long version and the problems: 长版和问题：

I can get Electron, React, Electron Edge, node-fibers, webpack and the static assets to run perfectly when I start the webpackserver in dev mode. 当我在开发模式下启动webpackserver时，我可以获得Electron，React，Electron Edge，node-fiber，webpack和静态资产。

However, how can I integrate this into electron-builder? 但是，我如何将其整合到电子制造商中呢？

I'm new to this whole build process and I just took this boilerplate to get started: Github of the boilerplate 我是整个构建过程的新手，我刚刚开始使用这个样板文件：样板文件的Github

To me, the dev debug process seems to go like this: 对我来说，开发调试过程似乎是这样的：

Have webpack create a bundle.js and an index.html out of my src folder 让webpack从我的src文件夹中创建一个bundle.js和一个index.html
Start a webpackserver with hot mode that serves these files 使用提供这些文件的热模式启动webpackserver

However, how should I tell electron-builder where to get the different files from? 但是，我应该如何告诉电子制造商从哪里获取不同的文件？ There is no package.json nor node_modules/ inside dist/ and node-fibers isn't getting bundled as well (because webpack seems to fck with __dirname or smth, so I excluded it). 在dist /中没有package.json和node_modules /，并且node-fibers也没有捆绑（因为webpack似乎与__dirname或smth混合，所以我将其排除在外）。

Whenever I launch the generated .exe file (that's not the installer, just an exe file that's supposed to launch the program), a message appears that main.js can't be found in the app.asar file. 每当我启动生成的.exe文件（这不是安装程序，只是一个应该启动该程序的exe文件）时，会出现一条消息，指出在app.asar文件中找不到main.js。 I tried extracting it, but it fails before it gets to extract the whole package. 我尝试提取它，但它在提取整个包之前失败了。 Main.js is never needed anyway though, because that was the whole point of having webpack transpile it or am I missing something here? 但是，无论如何都不需要Main.js，因为这是让webpack进行转换的重点，还是我在这里遗漏了一些东西？

I have searched all over the internet for hours now, but I don't get all the concepts .. 我现在已经在互联网上搜索了几个小时，但我没有得到所有的概念..

Could anyone here explain what's wrong with my setup and what I can do to fix that? 这里的任何人都可以解释我的设置有什么问题以及我可以做些什么来解决这个问题？

2 个解决方案

I recommend you to use https://github.com/chentsulin/electron-react-boilerplate 我建议你使用https://github.com/chentsulin/electron-react-boilerplate

If you don't want to use boilerplate for react app, consider to use https://github.com/electron-userland/electron-webpack (but boilerplate is strongly recommended). 如果您不想使用样板用于反应应用，请考虑使用https://github.com/electron-userland/electron-webpack （但强烈建议使用样板）。

I ended up with this boilerplate: 我最终得到了这个样板：

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

I couldn't get HMR to work and had to fix some es6 stuff, but at least it's doing its job. 我无法让HMR工作，不得不修复一些es6的东西，但至少它正在做它的工作。