electron-compile support

[dignifiedquire]

• Version: 7.11.3

• Target: all

I've just integrated my app with electron-prebuilt-compile which compiles various assets and JavaScript using babel. According to https://github.com/electron/electron-compile#how-can-i-precompile-my-code-for-release-time it works with electron-packager. I tried just running the build, but nothing gets build with the default setup of electron-builder.
Is there a way to get this integration working?

You can see the code here: https://github.com/ipfs/station/tree/better-build

[dignifiedquire]

Why was this closed? I never got any response and the problems I had are still standing.

[unindented]

@develar can you provide some guidance on what would be needed to get this working?

[develar]

@unindented I haven't yet investigate it. If you can provide error message — I can help you to fix it.

[aeneasr]

Is there currently no way of using electron-builder together with tools such as electron-compile? Other issues mention that this is out of scope, but I'd still like to get this working.

[develar]

@arekkas Just compile it using babel — http://electron-builder.slackarchive.io/general/I%252520just%252520discovered%252520that%252520I/

Awesome thanks! I just discovered that I can actually use babel-cli which does exactly the same and has —watch option too!
babel app/ --source-maps true --copy-files --out-dir build

[aeneasr]

@develar ok so your idea is to run babel on src, output to build, and change "main": "src/main/index.js" to e.g. "main": "build/main/index.js", in the package json?

ps: seems like electron-compile passes the ball to electron-builder, see electron-userland/electron-compile#99

[develar]

@arekkas Yes, as was reported by @pronebird.

seems like electron-compile passes the ball to electron-builder

We are going to support precompilation on our side soon.

[pronebird]

@arekkas not without limitations but we do a lot of awesome stuff with babel-cli alone in https://github.com/jschr/electron-react-redux-boilerplate/blob/master/package.json

[aeneasr]

I see, thanks for pointing me at it. Thank you all for your work on this. At some point, it would probably be cool to have an overview of what to use when for what and how. For a newcomer to the electron ecosystem I have to say it's a steep learning curve :D

[develar]

Good news — electron-complie support mostly implemented and will be released in two days. Sorry that it was not implemented so long.

[develar]

@pronebird Am I right that es6 shim is not required — electron-userland/electron-compile#207 ?

[pronebird]

@develar it could be I did something wrong but I had exactly the same problem where this shim was used in production build. I switched to pure babel pre-compilation since then and never looked back.

[develar]

@pronebird Ok. Thanks for answer. I am waiting @paulcbetts response (electron-userland/electron-compile#207) but it seems shim is not required and electron-builder will not produce shim.

BTW, is ability to provide own transformer for files will be useful for you? I mean — transpile file for production on the fly (electron-builder writes result of transpilation (electron-compile CompilerHost) directly to asar file without any intermediate/temp files).

[pronebird]

@develar either way I transpile files manually for development so I don't really see the benefit of delegating this to electron-builder.

[develar]

Supported in the 16.0.0 — if electron-compile in your dependencies, all files will be transpiled on the fly. Currently, only supported if asar enabled (feel free to file issue to support if asar is disabled).

• warn will be printed if electron-compiler in the production dependencies — it should be in the dev.
• shim is not produced — because should be not produced :)
• compilation on the fly — no temp or intermediate files, directly to asar archive.
• any compiler (including babel) can be added into the pipeline — feel free to file issue to support babel directly.

[aeneasr]

Awesome!

[sammdec]

It would be good to know what I need to get this new feature to work. I have an app that is using electron-compile & electron-compilers and building using electron-builder with the follwoing options

"scripts": {
    "build": "build"
  },
"build": {
    "productName": "NTS mini",
    "mac": null,
    "asar": true
  },

when I build the artifact, they build correctly and I get no errors but when I attempt to open up the app.dmg, I get the following error

Uncaught Exception:
Error: Cannot find module 'electron-compile'

Also as a side-note the app is coming in pretty big, its a veery simple app and the bundle is around 125MB

[develar]

@samjbmason Is it possible to provide your project for test?

[sammdec]

@develar I have added you as a collaborator if that's ok?

[pronebird]

@samjbmason electron apps are generally over 100M due to the size of runtime/libraries used in them. They say there is no way to decrease the size. This would hold true for any native app as well if most of dependencies weren't shipped with operating systems.

[sammdec]

@pronebird Ah ok that's not a problem I just wanted to make sure and that it wasn't a symptom of the errors that I was receiving when trying to run the app

[develar]

@samjbmason Some errors discovered on your app, some on electron-builder side. I will post details later.

Yes — electron-builder is not going to use easy way because our goal to help users, not just "well, we build something".

[develar]

@samjbmason

• menubar, electron-devtools-installer are used in the app code, but listed in the devDependencies
• electron-compile is used in the app code, but listed in the devDependencies
• consider to not use shim and use electron-compile-preload for your dev mode (and in production it is not required at all — although I see that you use live reload).
• addDevToolsExtension() is missing from the BrowserWindow object. electron/electron#6083
• didn't manage to run app and fix all issues in the end.

Error on electron-builder side fixed, please try 16.0.1

[sammdec]

@develar Thanks very much for that!
Re your points above:

• Good point on menubar I'll move that across, if I conditionally load electron-devtools-installer that should sort the issue with requireing it right?
• I moved electron-compile into devDependencies because electron-builder said I shoud move it to there.
• what is electron-compile-preload?

[develar]

You should use babel-plugin-transform-inline-imports-commonjs to transform imports to a lazy require statements. It will allow to use imports for any dep, but of course, usage should be only after check that app in the dev mode. Currently, you will get warn about electron-compile dep, but I will fix it later.

https://www.npmjs.com/package/electron-is-dev

Yes, electron-builder asks to move electron-compile to dev deps — it is correct.

About shim — https://github.com/electron-userland/electron-prebuilt-compile

[develar]

Reopened as we have the answer — electron-userland/electron-compile#207 (comment)

[aeneasr]

Any idea what's causing this?

> electron .


App threw an error during load
C:\workspace\js\sites-app\node_modules\webpack\lib\WebpackOptionsApply.js:209
                        comment = legacy && modern ? "\n/*\n//@ sourceMappingURL=[url]\n//# sourceMappingURL=node_modules\webpack\lib\[url]\n*\" :
                                                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
SyntaxError: Invalid or unexpected token

[develar]

@arekkas electron-buidler version?

[aeneasr]

@develar 16.3.0 - also I'm using electron-prebuilt-compile. I'm currently trying to remove all the fragments from my earlier toolchain which included babel-cli etc

[develar]

@arekkas If you can, please provide project to test (you can send me link privately using slack).

[aeneasr]

@develar thanks for this, I'll try a couple more things and if I'm unable to figure it out I'll come back to that :) Just wanted to check if there's any additional wiring required for electron-compiler, but I guess this should work out of the box right?

[develar]

@arekkas Is file on disk is equals to extracted file node_modules\webpack\lib\WebpackOptionsApply.js? Install asar globally (npm install asar -g) and check asar e resources/app.asar _dir to unpack_ where resources/app.asar is path to your app.asar

To be sure, that it is electron-builder corrupts file (or not).

but I guess this should work out of the box right?

Yes.

[aeneasr]

I'm not sure if I understood you correctly, but yes, that is the right path. My project is kinda special, because I use webpack within the project itself to compile third party code using said webpack, which is why webpack, css-loader, babel are first class citizen in my package.json that are actually required by some of my application code. Imagine it as a tool that compiles your es6 project using electron and some ui stuff.

By the way, I'm not talking about the bundle here, but simply electron .. Actually this might be an issue caused by electron-compile, not electron-builder, as electron-builder is not in the toolchain 🙄 . I'll dive into this more and come back when I have something concrete - sorry for wasting your time :)

[aeneasr]

Is there a way to disable electron-compile integration?

[develar]

@arekkas Will be added today. Why do you want to disable?

[develar]

electronCompile option added.

Whether to use electron-compile to compile app. Defaults to true if electron-compile in the dependencies. And false if in the devDependencies or doesn't specified.

Will be released soon.

[aeneasr]

Because for now I'm sticking with my babel flow, but I still need electron-compile for my e2e tests to work, so it's in the devDependencies which causes the package to crash with "electron-compile not found" after packaging

[aeneasr]

Nice, thanks for the quick update!