electron-reloader icon indicating copy to clipboard operation
electron-reloader copied to clipboard

Transpiling main process

Open aidan-rypens opened this issue 5 years ago • 10 comments

Why does it make no sense to transpile your main process files?

Just a question!

aidan-rypens avatar Oct 08 '20 12:10 aidan-rypens

Because Electron already supports the latest JavaScript features.

sindresorhus avatar Oct 08 '20 22:10 sindresorhus

Ah. I think I didn't understand it correctly. So you meant like having something as Babel that writes out your Electron js files in order to support a lower ES?

But to have the Electron files written in Typescript to transpile; that is okay to do? It works with using the typescript built in transpiler.

Just making sure that I don't do something that I shouldn't! I'm sorry if I didn't get what you meant correctly.

aidan-rypens avatar Oct 09 '20 09:10 aidan-rypens

So you meant like having something as Babel that writes out your Electron js files in order to support a lower ES?

Yes.

But to have the Electron files written in Typescript to transpile; that is okay to do? It works with using the typescript built in transpiler.

That would be the same case.

sindresorhus avatar Oct 12 '20 14:10 sindresorhus

Looking more into this, I'm not actually sure anymore why it wouldn't work when transpiled... I should have written some notes to myself about this. If it works fine for you, then great. I'll keep this open until I have time to look more into this and potentially remove that readme note.

sindresorhus avatar Oct 12 '20 14:10 sindresorhus

It works for me, so not a problem here. Thanks!

aidan-rypens avatar Oct 12 '20 15:10 aidan-rypens

@AidanRRR it makes sense to transpile. even if not using TS, one would use i.e. webpack to tree shake, use babel for ECMAScript stuff not available in Node (say do expressions), neatly bundle everything together.

kroko avatar Jan 19 '21 09:01 kroko

@AidanRRR it makes sense to transpile. even if not using TS, one would use i.e. webpack to tree shake, use babel for ECMAScript stuff not available in Node (say do expressions), neatly bundle everything together.

For production code yes, also for this devtool?

aidan-rypens avatar Jan 21 '21 10:01 aidan-rypens

For production code yes, also for this devtool?

Sure, you cannot avoid transpiling if you are using vanilla JS, but having some ECMA stage-x features that requires Babel for Node.js to be able to run the code, or even more if TS.
Personally in development phase

  • for main and preload side I switched to electromon, which is configured to consume compile products and reload on changes
  • main and preload compiled products are generated by webpack, auto recompiles on source changes (watch)
  • for renderer side I use webpack + wds + HMR + react-refresh (main (BrowserWindow) consumes http://... on dev and file:// on other tiers).

kroko avatar Jan 21 '21 11:01 kroko

Looking more into this, I'm not actually sure anymore why it wouldn't work when transpiled... I should have written some notes to myself about this. If it works fine for you, then great. I'll keep this open until I have time to look more into this and potentially remove that readme note.

So I just ran into an issue where it is a problem. Custom webpack config with typescript and all the usual crazy module interop stuff that comes with it. Broke with a type error. The workaround involves adding a tiny wrapper script in vanilla JS and requiring the transpiled app/module from within the wrapper. #19

feljx avatar Feb 27 '21 14:02 feljx

Looking more into this, I'm not actually sure anymore why it wouldn't work when transpiled... I should have written some notes to myself about this. If it works fine for you, then great. I'll keep this open until I have time to look more into this and potentially remove that readme note.

Spent some time and it doesn't work when webpack'd because of the chokidar dependency, which contains file-system binary that doesn't make sense to pull into a webpack'd module (and doesn't work out of the box). Basically chokidar only makes sense when run directly by node because it's meant to watch the file system.

It works fine as far as I can tell when "transpiled" by TypeScript, although then you have to fiddle with webpack and TypeScript build tooling separately, and this increases the complexity of your whole build environment if you were relying on webpack and a TypeScript plugin loader before.

I can't think of a better fix than @feljx if you want everything to build through webpack. The module needs to be run directly by node and not packed into a webpack module.

swinc avatar Jul 02 '21 04:07 swinc